三维地图实现下雨效果源代码

三维地图服务器 下载地址:http://download.bigemap.com/bm3Dserver.rar    (最新版)

安装以上SDK后,启动,启动面板上找到开发使用,如下图源代码:

//注释:安装地图服务器后,下列代码中的 http://bigemap.com  替换成   http://localhost    ,其他不变

                    <!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>

<div id='container'></div>

<script>
   bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId:'bigemap.googlemap-satellite',requestRenderMode:false});
    viewer.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(104, 30, 300000)
    });

    //定义下雨场景 着色器\\return fract(sin(x*133.3)*13.13);
    function FS_Rain() {
        return "uniform sampler2D colorTexture;\n\
                    varying vec2 v_textureCoordinates;\n\
                    \n\
                    float hash(float x){\n\
                          return fract(sin(x*23.3)*13.13);\n\
                    }\n\
                    \n\
                    void main(void){\n\
                    \n\
                        float time = czm_frameNumber / 60.0;\n\
                        vec2 resolution = czm_viewport.zw;\n\
                        \n\
                        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
                        vec3 c=vec3(.6,.7,.8);\n\
                        \n\
                        float a=-.4;\n\
                        float si=sin(a),co=cos(a);\n\
                        uv*=mat2(co,-si,si,co);\n\
                        uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
                        \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\
                        \n\
                        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);  \n\
                    }\n\
             ";
    }

    var collection = viewer.scene.postProcessStages;
    var fs_rain = FS_Rain();
    var snow = new bmgl.PostProcessStage({
        name: 'czm_rain',
        fragmentShader: fs_rain
    });
    collection.add(snow);
</script>
</body>
</html>

 

效果图;

三维地图实现下雨效果源代码

上一篇:回声服务器


下一篇:ProteanClouds代码解析