cesium打雷闪电的效果

1、在node_modules\cesium\Source\Shaders\PostProcessStages文件夹下生成Lightning.js文件，代码如下

// 闪电
export default "float hash(float x)\n\
{\n\
  return fract(21654.6512 * sin(385.51 * x));\n\
}\n\
float hash(vec2 p)\n\
{\n\
  return fract(1654.65157 * sin(15.5134763 * p.x + 45.5173247 * p.y + 5.21789));\n\
}\n\
vec2 hash2(vec2 p)\n\
{\n\
  return vec2(hash(p * .754), hash(1.5743 * p + 4.5476351));\n\
}\n\
vec2 add = vec2(1.0, 0.0);\n\
vec2 noise2(vec2 x)\n\
{\n\
vec2 p = floor(x);\n\
vec2 f = fract(x);\n\
  f = f * f * (3.0 - 2.0 * f);\n\
vec2 res = mix(mix(hash2(p),\n\
hash2(p + add.xy), f.x),\n\
mix(hash2(p + add.yx), hash2(p + add.xx), f.x), f.y);\n\
  return res;\n\
}\n\
vec2 fbm2(vec2 x)\n\
{\n\
vec2 r = vec2(0.0);\n\
float a = 1.0;\n\
  for (int i = 0; i < 8; i++)\n\
{\n\
r += noise2(x) * a;\n\
x *= 2.;\n\
a *= .5;\n\
}\n\
  return r;\n\
}\n\
float dseg(vec2 ba, vec2 pa)\n\
{\n\
float h = clamp(dot(pa, ba) / dot(ba, ba), -0.2, 1.);\n\
  return length(pa - ba * h);\n\
}\n\
uniform sampler2D colorTexture; \n\
uniform float fall_interval; \n\
uniform float mix_factor; \n\
varying vec2 v_textureCoordinates; \n\
void main(void){\n\
vec2 uv = gl_FragCoord.xy; \n\
float iTime = czm_frameNumber * fall_interval * clamp(fall_interval * 0.1, 0.01, 0.1); \n\
vec2 p = uv / czm_viewport.zw; \n\
vec2 d; \n\
vec2 tgt = vec2(1., -1.); \n\
float c = 0.; \n\
  if (p.y >= 0.) \n\
  c = (1. - (fbm2((p + .2) * p.y + .1 * iTime)).x) * p.y; \n\
else \n\
  c = (1. - (fbm2(p + .2 + .1 * iTime)).x) * p.y * p.y; \n\
vec3 col = vec3(0.); \n\
//\u7528\u5206\u5E03\u6717\u8FD0\u52A8\u6A21\u62DF\u4E4C\u4E91\n\
vec3 col1 = c * vec3(.3, .5, 1.); \n\
float mdist = 100000.; \n\
float t = hash(floor(5. * iTime)); \n\
  tgt += 4. * hash2(tgt + t) - 1.5; \n\
  if (hash(t + 2.3) > .6) \n\
  for (int i = 0; i < 100; i++) {\n\
vec2 dtgt = tgt - p; \n\
d = .05 * (vec2(-.5, -1.) + hash2(vec2(float(i), t))); \n\
//\u70B9d\u5230\u9009\u6BB5dtgt\u7684\u8DDD\u79BB\n\
float dist = dseg(d, dtgt); \n\
//\u6C42\u6700\u5C0F\u8DDD\u79BB(https://blog.csdn.net/weixin_43751272/article/details/114017953\n\
mdist = min(mdist, dist); \n\
tgt -= d; \n\
c = exp(-1.2 * dist) + exp(-55. * mdist); \n\
col = c * vec3(.7, .8, 1.); \n\
  } \n\
  //\u52A0\u4E0A\u4E4C\u4E91\n\
  col += col1; \n\
  gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(col, 0.0), mix_factor); \n\
} \n\
";

2、在node_modules\cesium\Source\Scene\PostProcessStageLibrary.js文件中添加如下代码

import Lightning from "../Shaders/PostProcessStages/Lightning.js";

PostProcessStageLibrary.createLightningStage = function (val) {
  return new PostProcessStage({
    name: 'czm_lightning',
    fragmentShader: Lightning,
    uniforms: {
      mix_factor: val.mix_factor,//混合系数0-1之间的数
      fall_interval: 0.7,//0-1之间的数
    }
  });
}

3、引用

var collection = viewer.scene.postProcessStages;
var lightning = Cesium.PostProcessStageLibrary.createLightningStage({
        mix_factor: 0.2,//混合系数
      });
collection.add(lightning);