动态效果

在Cesium中，postProcessStages是一个强大的功能，它允许开发者在场景渲染完成后，添加额外的图像处理效果，比如模拟下雨、雪、雾等自然现象。要使用postProcessStages实现下雨效果，你可以遵循以下步骤：

准备下雨效果的Shader代码

首先，你需要编写GLSL（OpenGL Shading Language）代码，用于生成下雨效果。这段代码将在片段着色器中运行，模拟雨滴在摄像机镜头上的视觉效果。

const fs = `
            uniform sampler2D colorTexture;
            //【内置变量】纹理坐标，是从顶点着色器中传递下来的。
            in vec2 v_textureCoordinates;
            out vec4 fragColor;

            float hash(float x){
              return fract(sin(x*23.3)*13.13);
            }

            void main(){
              float time = czm_frameNumber / 60.0;
              vec2 resolution = czm_viewport.zw;
              vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
              vec3 c = vec3(0.6, 0.7, 0.8);
              float a = 0.4;
              float si = sin(a), co = cos(a);
              uv *= mat2(co, -si, si, co);
              uv *= length(uv + vec2(0, 4.9)) * 0.3 + 1.0;

              float v = 1.0 - sin(hash(floor(uv.x * 100.0)) * 2.0);
              float b = clamp(abs(sin(20.0 * time * v + uv.y * (5.0 / (2.0 + v)))) - 0.95, 0.0, 1.0) * 20.0;
              c *= v * b;
              fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), 0.4);
    }`;

创建PostProcessStage并应用Shader

接下来，你需要创建一个PostProcessStage实例，并将之前编写的Shader代码应用到这个阶段中。

new PostProcessStage({
name: 'rainEffect',
fragmentShader: fs,
})

将下雨效果添加到场景中

最后，将创建的下雨效果PostProcessStage添加到Cesium的场景中

viewer.scene.postProcessStages.add(new PostProcessStage({
    name: 'rainEffect',
    fragmentShader: fs,
  }));

cesium版本

"cesium": "^1.114.0",

运行效果

cesium实现下雨的效果

实例代码下载

代码运行环境vue3 vite js nodejs 16