3.cesium雨、雪、雾天气场景效果

通过cesium的postProcessStages接口改变fragmentShader来实现这些效果

addsnow() {//删除if (this.snow) this.viewer.scene.postProcessStages.remove(this.snow)this.snow = new Cesium.PostProcessStage({name: 'czm_snow',fragmentShader:'\n\uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\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\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.5); \n\}'})this.viewer.scene.postProcessStages.add(this.snow)},

Shader

//雨'\n\uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\float hash(float x)\n\{\n\return fract(sin(x*133.3)*13.13);\n\}\n\void main(void){\n\float time = czm_frameNumber / 60.0;\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=-.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\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), 0.5);\n\}'//雪
'\n\uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\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\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.5); \n\}'//雾
'\n\uniform sampler2D colorTexture;\n\uniform sampler2D depthTexture;\n\varying vec2 v_textureCoordinates;\n\void main(void)\n\{\n\vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);\n\vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);\n\float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n\vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n\float f=(depthcolor.r-0.7)/0.2;\n\if(f<0.0) f=0.0;\n\else if(f>1.0) f=1.0;\n\gl_FragColor = mix(origcolor,fogcolor,f);\n\}'

3.cesium雨、雪、雾天气场景效果相关推荐

cesium-雨雪雾天气效果
cesium-天气效果 cesium可以实现天气变化的效果,官方是使用cesium粒子系统做的效果. 但这种实现方式有问题:当视角变化(拉近.拉远.平移.旋转)时,粒子就会变化,甚至会消失. 我这里通 ...
Cesium雨雪雾天气效果
Cesium雨雪雾天气效果实现效果关键代码 //雪着色器getSnow_fs() {return 'uniform sampler2D colorTexture;\n' +'varying vec ...
Cesium 系列3- SceneWeather添加雨雪天气场景
最近项目中要实现一个根据天气状况自动添加雨雪天气场景的功能,先看官网demo,发现已经有示例Particle System Weaher cesium中显示雪的效果时雪的颗粒度比较大,而且切换视角后就 ...
【笔记】ValseWebinar-去雨去雾专题报告
报告视频链接:[ValseWebinar] 去雨去雾专题报告_哔哩哔哩_bilibili 1 Bridging the gap between low level vision and high le ...
Cesium 1.87+实现建筑泛光效果
Cesium 1.87+实现建筑泛光效果 Cesium 1.87+增加了customShader自定义着色器,实现建筑泛光效果示例代码如下: <!DOCTYPE html><meta ...
软硬件一体化超低时延加速方案落地金融，交易场景效果卓著
量化投资在国内落地发展已有10余年,始终保持的迅猛的发展态势,量化投资机构数量逐年快速增长,资金管理规模指数级增长,管理规模突破100亿的量化私募已超过20家,据中信证券研究部估算,截至2021年二季 ...
photoshop第十五章：制作商业卡片场景效果
第十五章:制作商业卡片场景效果 1.制作证件寸照效果素材: 效果: (1)Ctrl+N新建文件->名称:证件寸照->宽度:14厘米->高度:14厘米->分辨率:300像素/英 ...
html狙击瞄准特效,如何给视频加特效：制作电影中狙击场景效果望远镜效果视频...
其实很多破案的侦查的电影或是电视剧中,会出现狙击的画面,就是镜头显示的是一个枪内部,瞄准一个人的画面,还有望远镜内部的画面效果,这些其实都是可以后期添加到视频画面上的哦,是不是觉得很有趣,自己也能够给 ...
html天气插件iframe,HTML_利用iframe在网页中显示天气附效果截图，css：复制代码代码如下: *{margi - phpStudy...
利用iframe在网页中显示天气附效果截图 css: 复制代码代码如下: *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} bo ...
css3 乌云散去,纯css实现乌云密布的天气图标效果
效果效果如下实现思路使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影增加动画 dom结构用两个嵌套的div容器,父容器来 ...

3.cesium雨、雪、雾天气场景效果

3.cesium雨、雪、雾天气场景效果相关推荐

最新文章

热门文章