在cesium通过自定义着色器实现动态电子围栏

引言

在现代地理信息系统（GIS）应用中，动态电子围栏是一种重要的功能，能够有效地监控特定区域内的活动。使用Cesium，我们可以通过自定义着色器实现动态电子围栏效果。本文将通过一个示例代码，展示如何在Cesium中创建一个动态电子围栏的着色器，并为其添加动画效果。

效果展示

通过使用上述自定义材质，我们可以在Cesium中创建一个动态电子围栏。这个围栏不仅能够显示特定区域，还可以通过动画效果提升用户体验。你可以在代码中调整条纹的数量、颜色和动画速度，来适应不同的应用场景。

代码解析

以下是创建动态电子围栏材质的代码：

const getWallMaterial1 = (color?: Cesium.Color): Cesium.Material => {
  return new Cesium.Material({
    fabric: {
      uniforms: {
        color: Cesium.defaultValue(color, new Cesium.Color(0.5, 0.5, 0.4, 1)),
      },
      source: `
        uniform vec4 color;
        czm_material czm_getMaterial(czm_materialInput materialInput){
        czm_material material = czm_getDefaultMaterial(materialInput);
        float time = sin(czm_frameNumber/100.0);
        vec2 st = materialInput.st;
        vec2 uv = st;
        st = vec2(st.s, st.t - time); // 添加动画

        float y4 = distance(st.t,0.2); // 第一条白色条纹
        y4 = smoothstep(0.05,0.1,y4); // 通过差值现实第一条白色条纹
        float y6 = distance(st.t,0.5); // 第二
        y6 = smoothstep(0.05,0.1,y6); // 同理
        float y = 1.0- min(y6,y4); // 将其值限制在合理范围
        vec3 col = vec3(0.5,0.6,0.7); // 给定基础颜色
        col += color.rgb * y; // 基础颜色加上条纹颜色
        
        material.diffuse = col; // 最后着色
        material.alpha = uv.t + 0.4; // 实现渐变效果
        return material;
        }                                       
      `,
    },
  });
};

代码详解

1. 函数定义
   getWallMaterial1 是一个接受可选颜色参数的函数。它返回一个Cesium材质对象。

2. 材质的定义
   在材质的定义中，使用了uniforms属性来设置颜色。如果未传入颜色，则默认颜色为 (0.5, 0.5, 0.4, 1)。

3. 着色器源代码
   源代码中定义了czm_getMaterial函数，用于计算材料的外观。

   • float time = sin(czm_frameNumber/100.0);
     通过正弦函数来计算当前帧的时间，以实现动态效果。

   • st = vec2(st.s, st.t - time);
     这里通过调整st的t值来添加动画效果，使条纹在时间上移动。

   • 白色条纹的实现
     使用distance和smoothstep函数，创建了两个白色条纹的动态效果。条纹的Y坐标通过平滑插值显示，使其看起来更自然。

4. 颜色和透明度
   最后，通过计算得出的条纹效果与基础颜色结合，形成最终的diffuse颜色。同时，利用alpha实现了渐变效果，使电子围栏在视觉上更具吸引力。

使用示例

以下是创建动态电子围栏材质的使用示例代码：

const createWall = (wallConfig: WallConfig): Cesium.Primitive => {
    const { data, color, id } = wallConfig;

    const wall = Cesium.WallGeometry.fromConstantHeights({
        positions: Cesium.Cartesian3.fromDegreesArray(data),
        minimumHeight: 50.0,
        maximumHeight: 0.0,
    });

    const instance = new Cesium.GeometryInstance({
        geometry: wall,
        id: Cesium.defaultValue(id, Date.now().toFixed(4).toString()),
    });
    return new Cesium.Primitive({
        geometryInstances: instance,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            translucent: true,
            material: getWallMaterial1(color),
            renderState: {
                cull: false,
            },
        }),
        cull: false,
    });
};

结论

在Cesium中利用自定义着色器实现动态电子围栏是一个强大的功能，它不仅可以增强地图的可视化效果，还能够为用户提供实时监控和警示的能力。希望本文的示例代码能帮助你在项目中实现这一功能，并激发你在Cesium中的更多创意！