Cesium粒子效果之雨、雪、雾

功能简介

气象粒子效果新增
气象粒子效果移除
组件封装

原理介绍

对Cesium的粒子效果理论理解刚入门，如果有表述不正确欢迎指正。
以下代码快主要是利用Cesium的PostProcessStage，创建特定的glsl格式的着色器，着色器具体代码来源于网络整理，整体已经验证可用。

代码

/***
* 粒子效果：雨、雪、雾
*/
function addPostProcessStage(viewer,name,type){let stage = getStage(viewer,name), fs = null;if(!=stage){switch(type){case "snow":fs = fs_snow();break;case "rain":fs = fs_rain();break;case "fog":fs = fs_fog();break;}}stage = new Cesium.PostProcessStage({name : name,fragmentShader:fs});viewer.scene.postProcessStages.add(stage);
}
function removePostProcessStage(viewer,name){let stage = getStage(viewer,name);if(stage){viewer.scene.postProcessStages.remove(stage);}
}
function getStage(viewer,name){let stage = null,stages = viewer.scene.postProcessStages;for(let i = 0;i<stages._stages.length;i++){let tmp = stages.get(i);if(tmp.name == name){stage = tmp;break;}}return stage;
}
function fs_snow(){return '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' + '}';
}
function fs_rain(){return 'uniform sampler2D colorTexture;\n'+ 'varying vec2 v_textureCoordinates;\n'+ ' float hash(float x){\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'+ '  }';
}
function fs_fog(){return '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.22)/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'+'   }';
}export default{addPostProcessStage:addPostProcessStage,removePostProcessStage:removePostProcessStage
}

Cesium粒子效果之雨、雪、雾相关推荐

cesium实现晴，雨，雾，雪等效果
晴 viewer.shadows = true; //阴影viewer.shadowMap.enabled = true;viewer.shadowMap.size = 2048*2;viewer.s ...
cocos2d粒子效果
先了解下类结构 -- CCParticleSystem(所有粒子系统的父类) -- CCParticleSystemPoint.CCParticleSystemQuad (点粒子和方形粒子系统,都继承 ...
6 cocos2dx粒子效果，类图关系，系统原生粒子和自定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果
1 粒子示例 2 类图关系 3 系统原生粒子 CCParticleSystem 所有粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad 点粒 ...
cocos2d-x 粒子效果
大规模运动的物体通常有两种方法实现 1,使用帧动画来模拟 2,粒子效果粒子系统有CCParticleSystem类实现,CCParticleSystem实现了对粒子的控制与调度,对粒子的操作包括: ...
cocos2d 粒子效果以及Particle Designer粒子工具的学习
2019独角兽企业重金招聘Python工程师标准>>> 我们先了解下类结构吧 -- CCParticleSystem(所有粒子系统的父类) -- CCParticleSystemPo ...
第五节利用Ogre 2.3实现雨，雪，爆炸，飞机喷气尾焰等粒子效果
本节主要学习如何使用Ogre2.3加载粒子效果.为了学习方便,直接将官方粒子模块Sample_ParticleFX单独拿出来编译,学习如何实现粒子效果. 一. 前提须知如果参考官方示例建议用最新版的 ...
Cesium 实现粒子效果贴地（伪）
有时我们面对这样的需求,需要在地面上放一个周期性放大缩小的标记,可以使用粒子效果实现,但是粒子效果图片很难贴地(如果你知道怎么做,欢迎分享,期待有人打我脸),我只能变通实现一个看似贴地但实际没有贴地的 ...
UIKit Particle Systems in iOS 5 Tutorial ( 附雨的粒子效果 )
原文地址:http://www.raywenderlich.com/6063/uikit-particle-systems-in-ios-5-tutorial?utm_source=feedburne ...
OGEngine_粒子效果
粒子系统粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术,而这些现象用其它传统的渲染技术难以实现的真实感的 game physics.经常使用粒子系统模拟的现象有火.爆炸.烟.水流.火花. ...

Cesium粒子效果之雨、雪、雾

Cesium粒子效果之雨、雪、雾

功能简介

原理介绍

代码

Cesium粒子效果之雨、雪、雾相关推荐

最新文章

热门文章