cesium实现下雨下雪特效

页面效果

使用着色器实例特效

下雨特效着色器

// 下雨特效
rain () {removeStage();var e = new Cesium.PostProcessStage({name: "czm_rain",fragmentShader: FS_Rain()});viewer.scene.postProcessStages.add(e), lastStage = efunction FS_Rain () {return "uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\\n\float hash(float x){\n\return fract(sin(x*133.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.))*100.);\n\float b=clamp(abs(sin(15.*time*v+uv.y*(10./(2.+v))))-.95,0.,1.)*4.;\n\c*=v*b; \n\\n\gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);  \n\}\n\
";}
},

下雪特效着色器

// 下雪特效
snow () {removeStage();var e = new Cesium.PostProcessStage({name: "czm_snow",fragmentShader: FS_Snow()});viewer.scene.postProcessStages.add(e), lastStage = efunction 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.5); \n\\n\}\n\";}
},

清除特效方法

// 清除特效
let removeStage = () => {lastStage && viewer.scene.postProcessStages.remove(lastStage), lastStage = null
}

最后附上完整的页面代码

<template><div><div id="cesiumDemo"></div></div>
</template><script>
let viewer
let lastStage = null
// 清除特效
let removeStage = () => {lastStage && viewer.scene.postProcessStages.remove(lastStage), lastStage = null
}
export default {name: 'CesiumDemo',data () {return {}},created () {},mounted () {this.getCesiumDem()},destroyed () {},methods: {// 下雨特效rain () {removeStage();var e = new Cesium.PostProcessStage({name: "czm_rain",fragmentShader: FS_Rain()});viewer.scene.postProcessStages.add(e), lastStage = efunction FS_Rain () {return "uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\\n\float hash(float x){\n\return fract(sin(x*133.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.))*100.);\n\float b=clamp(abs(sin(15.*time*v+uv.y*(10./(2.+v))))-.95,0.,1.)*4.;\n\c*=v*b; \n\\n\gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);  \n\}\n\
";}},// 下雪特效snow () {removeStage();var e = new Cesium.PostProcessStage({name: "czm_snow",fragmentShader: FS_Snow()});viewer.scene.postProcessStages.add(e), lastStage = efunction 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.5); \n\\n\}\n\";}},// 实例cesiumgetCesiumDem () {Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'viewer = new Cesium.Viewer('cesiumDemo', {animation: false, // 是否显示动画控件baseLayerPicker: false, // 是否显示图层选择控件vrButton: false, // 是否显示VR控件geocoder: false, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件sceneModePicker: false, // 是否显示投影方式控件navigationHelpButton: false, // 是否显示帮助信息控件navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开infoBox: false, // 是否显示点击要素之后显示的信息fullscreenButton: false, // 是否显示全屏按钮selectionIndicator: true, // 是否显示选中指示框homeButton: false, // 是否显示返回主视角控件scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源terrainProvider: Cesium.createWorldTerrain({// 光照阴影requestVertexNormals: true,// 水流效果requestWaterMask: true}) // 显示地形})// this.snow()this.rain()}}
}
</script>
<style scoped>
#cesiumDemo {width: 100vw;height: 100vh;
}
</style>

cesium实现下雨下雪特效相关推荐

canvas 让你呼风唤雨，下雨下雪效果
前端如何呼风唤雨 Canvas 等于什么? = html5 =js = 取代flash = 你可以即见即所得向别人装逼!没错进入 canvas 的权力游戏吧! 起初我创造了canvas . 我 ...
怎么把 html做成雪花特效,CSS3 HTML5下雪特效雪花飘飘
CSS3 HTML5下雪特效雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...
Cesium实现建筑物泛光特效，使用自定义shader实现源码
自从Cesium1.87以后的版本,提供了方便的自定义shader的接口,从而不用修改源码,就可以方便的实现很多自定义的特效,这对Cesium的从业人员来说是一个极大的好消息,所用到的接口是 Cesi ...
下雪了堆雪人去下雪特效
jquery实现的下雪特效. 效果体验:http://keleyi.com/a/bjac/e8t7hoj4.htm 以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC &q ...
CSS3 HTML5下雪特效雪花飘飘
<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> < ...
下雪html特效代码,JavaScript 实现下雪特效的示例代码
直接上代码下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...
Python实现为图像添加下雪特效
这篇文章主要为大家介绍了通过Python为图像添加下雪特效,文中的示例代码讲解详细,对学习Python有一定的帮助,感兴趣的小伙伴可以了解一下.编程学习资料免费白嫖点击领取. 导语也许是为了和音,在 ...
wordpress网站下雪特效代码教程
wordpress网站下雪特效代码教程你主题的fuctions.php添加如下代码 function Snowfall(){?><script type='text/javascript ...
cesium，实现下雨下雪效果切换
honey们,一起来学习cesium天气效果吧^^ 本篇文章实现的是简单的HTML页面在线显示,用其他框架的改一下就可以啦 1.CDN引入 <script src='https://cdn.bo ...

cesium实现下雨下雪特效

页面效果

使用着色器实例特效

cesium实现下雨下雪特效相关推荐

最新文章

热门文章