cesium绘制动态墙体

Cesium如何插入片段着色器与顶点着色器的shader

此文主要讲解如何将自己写的webgl与cesium结合起来 在线示例
1.书写自己的shader,随便先写一个最简单的片段着色器，顶点着色器的添加方法还在研究

this.fshader = `
  void main (void)
  {
	vec2 uv = gl_FragCoord.xy/vec2(1024,100);
	vec3 color = hsb2rgb(vec3(uv.x,1.0,uv.y));
	gl_FragColor = vec4(color,0.5);
	// gl_FragColor.a = material.alpha; //=>0.5
  }
`;

2.在添加图形的时候一定要使用Primitive添加，Entity生成的实例无法修改其材质，但是可以也可以使用CallbackProperty对位置进行实时修改

//先生成材质，默认fabric的type（不写），就可通过source进行传值u_time
const material = new Cesium.Material({
			fabric: {
				uniforms: {
					u_time: 0.5,
				},
				source: `
				uniform float u_time;
				vec3 hsb2rgb( vec3 c ){
					vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0 );
					rgb = rgb*rgb*(3.0-2.0*rgb);
					return c.z * mix(vec3(1.0), u_time*rgb, c.y);
				}
				`,
			},
		});
//使用primitives.add添加
this.wall = this.viewer.scene.primitives.add(
			new Cesium.Primitive({
				geometryInstances: new Cesium.GeometryInstance({
					geometry: wall,
				}),
				appearance: new Cesium.MaterialAppearance({
					// aboveGround: true,
					// closed: false,
					material: material,
					renderState: {
						blending: Cesium.BlendingState.DISABLED, //混合
						depthTest: { enabled: true }, //深度测试
						depthMask: true,
					},
					// vertexShaderSource: this.vshader, //顶点着色器写在这里
					fragmentShaderSource: this.fshader,
				}),
				show: true,
			})
		);

这样只要修改material 的 u_time就能实时修改了,设置定时器或者通过按钮绑定都可以

setInterval(() => {
			material.uniforms.u_time = Math.random();
		}, 1000);