前端~三维地图（cesium）动态材质扩散圆环

定义自定义材质

import * as Cesium from "cesium";// 着色器代码抽离为常量
const DiffuseCircleShaderSource = `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 = 1.5 * color.rgb;vec2 st = materialInput.st;float dis = distance(st, vec2(0.5, 0.5));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;}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;}
`;// 参数类型定义
type DiffuseCircleOptions = {color: Cesium.Color;speed: number;circleCount: number;gradient: number;
};// 材质类定义
export class DiffuseCircleMaterial extends Cesium.Material {constructor(options: DiffuseCircleOptions) {const { color, speed, circleCount, gradient } = options; // 解构参数super({translucent: false,fabric: {type: "DiffuseCircle",uniforms: {color,speed,count: circleCount,gradient,},source: DiffuseCircleShaderSource, // 使用抽离的着色器代码},});}
}

调用自定义材质

// 测试自定义材质const circleGeometry = new Cesium.CircleGeometry({center: Cesium.Cartesian3.fromDegrees(125.310767, 43.820491, 1000000),radius: 10000,});const circleInstance = new Cesium.GeometryInstance({geometry: circleGeometry,});// 创建外观const appearance = new Cesium.EllipsoidSurfaceAppearance({material: new DiffuseCircleMaterial({color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),speed: 5.0,circleCount: 5,gradient: 0.4,}),});// 创建圆形图元const circlePrimitive = new Cesium.Primitive({geometryInstances: circleInstance,appearance: appearance,});// 添加到场景viewer.scene.primitives.add(circlePrimitive);