在学材质的路上一去不复返了属实是,难也难在这
材质代码如下
export class CustomMaterial{
constructor(data){
this.date = new Date().valueOf()+Math.random()
Cesium.Material._materialCache.addMaterial("CustomMaterial" + this.date,{
fabric: {
type: 'test',
uniforms: {
speed: 8,
repeat: 1,
color: Cesium.Color.fromCssColorString(data.color), // 线段颜色
flowColor: Cesium.Color.fromCssColorString(data.flowColor), // 流光颜色
flowSpeed: 0.01, // 流光速度
flowIntensity: 1.0, // 流光强度
startTime: Math.random(),
percent: 0.1,
gradient: 0.01
},
source: /* glsl */ `
uniform vec4 color;
uniform float speed;
uniform float percent;
uniform float gradient;
uniform vec4 flowColor;
uniform float repeat;
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);//获取默认的材质
vec2 st = materialInput.st;//用作每个材质的czm_getMaterial函数的输入 st(2D纹理坐标)
float t =fract(czm_frameNumber * speed / 1000.0); //fract获取小数位 1/x的余数
t *= (1.0 + percent);
float alpha = smoothstep(t- percent, t, st.s) * step(-t, -st.s);//smoothstep能够输出平滑过渡的阈值函数
alpha += gradient;
float offset = fract(st.s*repeat - t);
vec4 ackColor = mix(color, flowColor, smoothstep(t- percent, t, st.s) * step(-t, -st.s));
material.diffuse = ackColor.rgb;
material.alpha = ackColor.a;
return material;
}
`
}
})
}
// 获取当前的材质类型,因为是新定义的材质
getType(){
return 'CustomMaterial' + this.date
}
// 获取cesium 中的时间,uniforms的属性
getValue(time,result){
// 获取到程序运行时长
// result.uTime= performance.now()/1000;
return result
}
}
使用代码
viewer.entities.add({
id: valueList[i].id + valueList[i + 1].id + data.type,
properties: data,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(),
width: 1,
material: material,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
clampToGround: false, //贴地 开启贴地不会被地形遮蔽,
},
})
还请各位大佬多多指教~