<!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.zhongkexingtu',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>
源码