const CircleRippleMaterialSource = `uniform vec4 color;uniform float speed;uniform float count;uniform float gradient;czm_material czm_getMaterial(czm_materialInput materialInput){// 生成默认的基础材质czm_material material = czm_getDefaultMaterial(materialInput);//  material.diffuse  入射光。color这个变量，来源于之前fabric里面uniforms的值。//  material.diffuse = 1.5*color.rgb; 控制的效果是这个颜色的亮度。把1.5改成0.5它会明显变得更暗。如果把1.5改成3或者6，明显可以看到颜色更亮了material.diffuse = 1.5 * color.rgb;// materialInput.st是整个画布的大小(webgl的三维坐标中st的范围是)vec2 st = materialInput.st;// dis主要是扩散中心.从哪个位置开始扩散的。如果改成distance(st,vec2(0,0.5)，那么它扩散的中心就变成了下方中点float dis = distance(st, vec2(0.5, 0.5));// czm_frameNumber 这个是当前渲染的帧数float per = fract(czm_frameNumber * speed / 1000.0);if(count == 1.0){if(dis > per * 0.5){discard;}else {material.alpha = color.a  * dis / per / 2.0;}} else {vec3 str = materialInput.str;if(abs(str.z)  > 0.001){//discard关键词在opengl中是片段截取的意思,相当于这一块不要了discard;}if(dis > 0.5){discard;} else {float perDis = 0.5 / count;float disNum;float bl = 0.0;for(int i = 0; i <= 999; i++){if(float(i) <= count){disNum = perDis * float(i) - dis + per / count;if(disNum > 0.0){if(disNum < perDis){bl = 1.0 - disNum / perDis;}else if(disNum - perDis < perDis){bl = 1.0 - abs(1.0 - disNum / perDis);}material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient)));}}}}}return material;}`;

  Cesium.Material.CircleRippleMaterialProperty = "CircleRippleMaterialProperty";Cesium.Material.CircleRippleMaterialType = "CircleRippleMaterialType";Cesium.Material.CircleRippleMaterialSource = CircleRippleMaterialSource;Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleRippleMaterialType,{fabric: {type: Cesium.Material.CircleRippleMaterialType,uniforms: {color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),speed: 3.0,count: 4,gradient: 0.2,},source: Cesium.Material.CircleRippleMaterialSource,},translucent: function (material) {return true;},});

简单介绍一些我知道的内容。这个是圆形扩散的glsl片源代码。

// 生成默认的基础材质

czm_material material = czm_getDefaultMaterial(materialInput);

 //  material.diffuse  入射光。color这个变量，来源于之前fabric里面uniforms的值。

  //  material.diffuse = 1.5*color.rgb; 控制的效果是这个颜色的亮度。把1.5改成0.5它会明显变得更暗。如果把1.5改成3或者6，明显可以看到颜色更亮了

  material.diffuse = 1.5 * color.rgb;

// materialInput.st是整个画布的大小(webgl的三维坐标中st的范围是X:[-1,1],Y:[-1,1])

   vec2 st = materialInput.st;

  // dis主要是扩散中心.从哪个位置开始扩散的。如果改成distance(st,vec2(0,0.5)，那么它扩散的中心就变成了下方中点

    float dis = distance(st, vec2(0.5, 0.5));

     // czm_frameNumber 这个是当前渲染的帧数

     float per = fract(czm_frameNumber * speed / 1000.0);

canvas坐标系转为webgl坐标系如下图，webgl的坐标是x[-1, 1]，y[-1, 1]。

canvas的中心点：webgl的坐标原点(0.0, 0.0, 0.0)
canvas x轴左右边缘：webgl中x轴的-1.0和1.0
canvas y轴上下边缘：webgl中y轴的1.0和-1.0