Cesium雨效果

作為一個WebGL的小白踱承,在前人大牛的肩膀上參考代碼,自己整理了一個雨效果圖,僅供參考

  1. Cesium版本1.79.1挺举,雨效果的類代碼:
class RainEffect {
    constructor(viewer, options) {
        if (!viewer) throw new Error('no viewer object!');
        options = options || {};
        //傾斜角度弱恒,負數(shù)向右辨萍,正數(shù)向左
        this.tiltAngle = Cesium.defaultValue(options.tiltAngle, -.6);
        this.rainSize = Cesium.defaultValue(options.rainSize, 0.3);
        this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
        this.viewer = viewer;
        this.init();
    }

    init() {
        this.rainStage = new Cesium.PostProcessStage({
            name: 'czm_rain',
            fragmentShader: this.rain(),
            uniforms: {
                tiltAngle: () => {
                    return this.tiltAngle;
                },
                rainSize: () => {
                    return this.rainSize;
                },
                rainSpeed: () => {
                    return this.rainSpeed;
                }
            }
        });
        this.viewer.scene.postProcessStages.add(this.rainStage);
    }

    destroy() {
        if (!this.viewer || !this.rainStage) return;
        this.viewer.scene.postProcessStages.remove(this.rainStage);
        this.rainStage.destroy();
        delete this.tiltAngle;
        delete this.rainSize;
        delete this.rainSpeed;
    }

    show(visible) {
        this.rainStage.enabled = visible;
    }

    rain() {
        return "uniform sampler2D colorTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                uniform float tiltAngle;\n\
                uniform float rainSize;\n\
                uniform float rainSpeed;\n\
                float hash(float x) {\n\
                    return fract(sin(x * 133.3) * 13.13);\n\
                }\n\
                void main(void) {\n\
                    float time = czm_frameNumber / rainSpeed;\n\
                    vec2 resolution = czm_viewport.zw;\n\
                    vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
                    vec3 c = vec3(.6, .7, .8);\n\
                    float a = tiltAngle;\n\
                    float si = sin(a), co = cos(a);\n\
                    uv *= mat2(co, -si, si, co);\n\
                    uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
                    float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
                    float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
                    c *= v * b;\n\
                    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
                }\n\
                ";
    }
}

Cesium.RainEffect = RainEffect;
  1. 頁面使用方式
    引入上面的js即可
new Cesium.RainEffect(viewer, {
            tiltAngle: -.6, //傾斜角度
            rainSize: 0.6, //雨大小
            rainSpeed: 120.0 //雨速
        });
  1. 效果圖


    cesium_rain.gif
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市返弹,隨后出現(xiàn)的幾起案子锈玉,更是在濱河造成了極大的恐慌,老刑警劉巖义起,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拉背,死亡現(xiàn)場離奇詭異,居然都是意外死亡默终,警方通過查閱死者的電腦和手機椅棺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來齐蔽,“玉大人两疚,你說我怎么就攤上這事『危” “怎么了诱渤?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛙吏。 經(jīng)常有香客問我源哩,道長,這世上最難降的妖魔是什么鸦做? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任困介,我火速辦了婚禮掉弛,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己瓣窄,他們只是感情好顶考,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布展箱。 她就那樣靜靜地躺著羊赵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪耸袜。 梳的紋絲不亂的頭發(fā)上友多,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音堤框,去河邊找鬼域滥。 笑死纵柿,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的启绰。 我是一名探鬼主播昂儒,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼委可!你這毒婦竟也來了渊跋?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤着倾,失蹤者是張志新(化名)和其女友劉穎拾酝,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屈呕,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡微宝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了虎眨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡镶摘,死狀恐怖嗽桩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情凄敢,我是刑警寧澤碌冶,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站涝缝,受9級特大地震影響扑庞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拒逮,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一罐氨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧滩援,春花似錦栅隐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至恩袱,卻和暖如春泣棋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背畔塔。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工潭辈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留纪吮,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓萎胰,卻偏偏與公主長得像碾盟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子技竟,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容