Cesium應用篇--添加雨雪天氣

　　作為一個三維地球，在場景中來點雨雪效果，貌似可以增加一點真實感。Cesium官網Demo中有天氣系統的實例，用的是Cesium中的粒子系統做的。效果如下圖所示，粒子系統的本質是向場景中添加了很多物體，用BillBoard技術展現。這種實現方式有一個麻煩的地方就是當視角變化(拉近、拉遠、平移、旋轉)時，粒子就會變化，甚至會消失，影響體驗。考慮用shader的方式直接模擬雨雪效果，恰好發現了Catzpaw大神寫的模擬雨雪的shader，果斷增添到Cesium中。

 

　　1. 添加GLSL代碼

　　Catzpaw大神寫的模擬雨雪的效果如下，那我們要做的就是將這個效果和地球場景融合。這就用到之前博客中介紹的后期處理過程，只需要添加一個PostProcessStage創建雪的效果，添加一個PostProcessState創建雨的效果即可。

  

　　首先在Source/Shaders/PostProcessStages文件夾下新建Snow.glsl文件和Rain.glsl文件，glsl文件中存放雨雪效果的片元着色器代碼。代碼分別如下：

uniform sampler2D colorTexture; //輸入的場景渲染照片
varying vec2 v_textureCoordinates;

float snow(vec2 uv,float scale)
{
    float time = czm_frameNumber / 60.0;
    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;
}

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=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));
    float c = 0.0;
    c+=snow(uv,30.)*.0;
    c+=snow(uv,20.)*.0;
    c+=snow(uv,15.)*.0;
    c+=snow(uv,10.);
    c+=snow(uv,8.);
    c+=snow(uv,6.);
    c+=snow(uv,5.);
    finalColor=(vec3(c)); //屏幕上雪的顏色
    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5);  //將雪和三維場景融合

}

 

uniform sampler2D colorTexture;//輸入的場景渲染照片
varying vec2 v_textureCoordinates;

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

void main(void){

    float time = czm_frameNumber / 60.0;
    vec2 resolution = czm_viewport.zw;

    vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
    vec3 c=vec3(.6,.7,.8);

    float a=-.4;
    float si=sin(a),co=cos(a);
    uv*=mat2(co,-si,si,co);
    uv*=length(uv+vec2(0,4.9))*.3+1.;

    float v=1.-sin(hash(floor(uv.x*100.))*2.);
    float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
    c*=v*b; //屏幕上雨的顏色

    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5); //將雨和三維場景融合
}

 　　生成雨和雪的glsl代碼很神奇，就是單純的數學計算，意識到學好數學還是很重要的，再次向大神膜拜，哈哈。

　　2. 創建PostProcessStage

　　在上一步寫完glsl代碼后，接下來就是創建PostProcessStage對象。通過在PostProcessStageLibray類中添加兩個函數，就可以創建出需要的PostProcessStage對象。代碼如下：

PostProcessStageLibrary.createSnowStage = function() {
        var snow = new PostProcessStage({
            name : 'czm_snow',
            fragmentShader : Snow
        });
        return snow;
    }

    PostProcessStageLibrary.createRainStage = function() {
        var snow = new PostProcessStage({
            name : 'czm_rain',
            fragmentShader : Rain
        });
        return snow;
    }

 　　3. 外部調用

 　　在准備好以上內容后，就可以直接在html頁面中調用。為了達到更加逼真的效果，還需要更改一下大氣參數。代碼和效果如下：

var collection = viewer.scene.postProcessStages;
var snow = Cesium.PostProcessStageLibrary.createSnowStage();
3 collection.add(snow);
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
6 scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

 

　　4. 總結

　　通過Shader這種方式模擬雨雪可以不受視點位置的影響，相當於是一個全屏的后處理，當然在效果模擬上還有可以增強的地方。本文描寫的步驟可以作為大家在Cesium上添加后期處理效果步驟的一個參考。

PS：Cesium交流可以掃碼加群，期待你的加入！！！