cesium效果篇—雷电效果

前言

刚开始学cesium的时候，发现网上很多关于雾雨雪的后处理效果，当时就在想，怎么没有更多一点的雷电、云层之类的效果呢，前两年在cesium一个群的群主发了一个基于sdk的网站，发现了雷电效果，当时虎躯一震，大受震撼，一直在思考怎么做出来，但无果。

直到去年随着深一步的了解之后，发现了shaderToy这个宝贝网站，搜了搜，果然找到了，看来大佬们也是站在巨人的肩膀上啊。

成品图

不多说了，放一张集成在cesium中的效果图吧（加了个雨水效果的）。

思路

说来汗颜，里面的shader代码其实也不完全看得懂，所以到了这一步其实没什么思路可言…和雾雨雪类似，后处理实现的，把后处理中的shader代码替换成shadertoy中对应的代码就行，先用起来，慢慢再理解吧。shaderToy雷电效果的地址

另外可能对webgl不太了解的朋友，不太清楚shaderToy的代码到底在cesium中怎么用，这里介绍几个简单的常见替换项：

• iResolution：屏幕分辨率，cesium对应czm_viewport.zw。
• iTime：动态的时间，cesium对应的变量为czm_frameNumber。

另外如果想优化下效果的话，就是后处理是全屏的，可以通过深度纹理获取天空对应的深度值，然后把雷电效果限定在那块部分即可。

代码

vec4 mainImage(vec2 fragCoord)
{
  vec2 iResolution = czm_viewport.zw;
  float iTime = czm_frameNumber * 10.0 / 1000.0;
  vec2 p=2.*fragCoord.xy/iResolution.yy-1.;
  vec2 d;
  vec2 tgt=vec2(1.,-1.);
  float c=0.;
  if(p.y>=0.)
  c=(1.-(fbm2((p+.2)*p.y+.1*iTime)).x)*p.y;
  else
  c=(1.-(fbm2(p+.2+.1*iTime)).x)*p.y*p.y;
  vec3 col=vec3(0.),col1=c*vec3(.3,.5,1.);
  float mdist=100000.;
  
  float t=hash(floor(5.*iTime));
  tgt+=4.*hash2(tgt+t)-1.5;
  if(hash(t+2.3)>.6)
  for(int i=0;i<100;i++){
    
    vec2 dtgt=tgt-p;
    d=.05*(vec2(-.5,-1.)+hash2(vec2(float(i),t)));
    float dist=dseg(d,dtgt);
    mdist=min(mdist,dist);
    tgt-=d;
    c=exp(-.5*dist)+exp(-55.*mdist);
    col=c*vec3(.7,.8,1.);
  }
  col+=col1;
  vec4 color = vec4(col,0.);
  return color;
}

总结

东西算不上难，毕竟其中的核心代码基本靠借鉴。

不由得让我想到了昨天百度文心一言的发布会，网上有鼓励的也有嘲讽的，但资本市场确实给出了答复——下跌9%的股价，但我还会希望了解事情难度的互联网从业者们能真正的给这些不管出于什么目的，能促进科技行业发展的先行者们一点点的鼓励吧。

另外，昨晚微软基于chatGpt4发布的办公软件Microsoft 365 Copilot真的把我吓了一跳，总感觉自己在经历一场变革，不同于诺基亚向苹果的转变，这可能关乎一些行业的前途和命运，关乎我本身~