ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-06-08 20:53:09  阅读:237  来源: 互联网

标签:scale float 下雪 uv 三维 snow var bmgl 源代码


三维地图服务器 下载地址: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});
    var lat = 30.6;
    var lon = 104.055;
    //取消双击事件
    viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    //设置初始位置
    viewer.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(lon, lat, 300000)
    });

    //定义下雪场景 着色器
    function FS_Snow() {
        return "uniform sampler2D colorTexture;\n\
    varying vec2 v_textureCoordinates;\n\
\n\
    float snow(vec2 uv,float scale)\n\
    {\n\
        float time = czm_frameNumber / 60.0;\n\
        float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
        uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
        uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
        k=smoothstep(0.,k,sin(f.x+f.y)*0.01);\n\
        return k*w;\n\
    }\n\
\n\
    void main(void){\n\
        vec2 resolution = czm_viewport.zw;\n\
        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
        vec3 finalColor=vec3(0);\n\
        float c = 0.0;\n\
        c+=snow(uv,30.)*.0;\n\
        c+=snow(uv,20.)*.0;\n\
        c+=snow(uv,15.)*.0;\n\
        c+=snow(uv,10.);\n\
        c+=snow(uv,8.);\n\
        c+=snow(uv,6.);\n\
        c+=snow(uv,5.);\n\
        finalColor=(vec3(c)); \n\
        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3); \n\
\n\
    }\n\
";
    }

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

效果图:

标签:scale,float,下雪,uv,三维,snow,var,bmgl,源代码
来源: https://blog.51cto.com/u_15262562/2883422

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有