cesium实现天气效果【雨、雪、雾】

最新推荐文章于 2025-04-16 15:20:47 发布

原创

最新推荐文章于 2025-04-16 15:20:47 发布 · 4.1k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章介绍了如何在Cesium项目中通过Cesium的PostProcessStage和自定义fragmentShader实现雪、雨和雾的实时天气效果，包括参数调整和统一管理这些效果的添加和移除方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中使用到cesium,为了让立体效果更好看，更应景，为此里面也涉及到了天气效果，其实网上也有一大堆，我也只是其中的一个复制者，唯一不同的是可以通过参数来改变雨雪的大小等等

实现雪的效果

let lastStage = null;

const FS_Snow = `uniform sampler2D colorTexture;
    in vec2 v_textureCoordinates;
    uniform float rainSpeed;
    float snow(vec2 uv,float scale){
        float time = czm_frameNumber / rainSpeed;
        float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
        uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
        uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
        k=smoothstep(0.,k,sin(f.x+f.y)*0.01);
        return k*w;
    }
    out vec4 vFragColor;
    void main(void){
        vec2 resolution = czm_viewport.zw;
        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
        vec3 finalColor=vec3(0);
        float c = 0.0;
        c+=sn