cesium下雨的效果

一共有2个版本，版本1，我个人认为效果好点，但是不能设置倾斜角度，版本2，可以设置倾斜角度

版本一

版本2

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

// 版本1
export default "uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
uniform float tiltAngle;\n\
uniform float rainSize;\n\
uniform float rainSpeed;\n\
uniform float rainDensity;\n\
float hash(float x){\n\
  return fract(sin(x*133.3)*13.13);\n\
}\n\
void main(void){\n\
float _speed=clamp(rainSpeed*10.,0.5,5.);\n\
float iTime = czm_frameNumber*_speed/ 200.0;\n\
float _sizeTemp=clamp(rainSize,0.1,1.0);\n\
float _size=(1.1-_sizeTemp)*0.01;\n\
float _density=30.-clamp(rainDensity*0.8,0.09,0.8)*28.;\n\
//density\u6BD4\u8F83\u5927\u65F6size\u548Cdensity\u6210\u53CD\u6BD4\u5173\u7CFB(\u5F85\u7814\u7A76)\n\
vec2 resolution = czm_viewport.zw;\n\
vec2 uv=gl_FragCoord.xy*0.99;\n\
vec3 c=vec3(.6,.7,.8);\n\
float a=tiltAngle*-0.01;\n\
float si=sin(a),co=cos(a);\n\
float col=.6-_density*fract((uv.x*.2+uv.y*_size)*fract(uv.x*.91)+iTime)*1.5;\n\
vec4 o = vec4(col, col, col, 1.0);\n\
if(col < 0.01){\n\
    o = vec4(0, 0, 0, 1.0);\n\
}\n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), o, 0.5);  \n\
}\n\
";

// 版本2
// export default "uniform sampler2D colorTexture;\n\
// varying vec2 v_textureCoordinates;\n\
// uniform float tiltAngle;\n\
// uniform float rainSize;\n\
// uniform float rainSpeed;\n\
// float hash(float x){\n\
//   return fract(sin(x*133.3)*13.13);\n\
// }\n\
// void main(void){\n\
// float _speed=clamp(rainSpeed*10.,0.5,5.);\n\
// float time = czm_frameNumber*_speed / 200.0;\n\
// float _sizeTemp=clamp(rainSize,0.1,1.0);\n\
// float _size=(1.1-_sizeTemp)*0.01;\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=-0.01 * tiltAngle;\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*(rainSize/(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\
// ";

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

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

PostProcessStageLibrary.createRainStage = function (val) {
  return new PostProcessStage({
    name: 'czm_rain',
    fragmentShader: Rain,
    // 版本1
    uniforms: {
      rainSize: val.rainSize,    // 粗细 值越小雨效果越大 0-0.5之间
      rainSpeed: val.rainSpeed, //数字越大，速度越快 0-1之间
      rainDensity: val.rainDensity,//密度，数字越大，密度越紧凑 0-1之间
    },
    // 版本2
    // uniforms: {
    //   tiltAngle: val.tiltAngle, //雨下的倾斜角，0为垂直下
    //   rainSize: val.rainSize,    // 粗细 值越小雨效果越大 大于1的数
    //   rainSpeed: val.rainSpeed, //数字越大，速度越快 0-1之间
    // }
  });
}

3、在页面中使用

<template>
  <!-- 导入倾斜摄影数据 -->
  <div class="cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Ion.defaultAccessToken = "你的token";
      var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: false, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      });
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
      // 倾斜摄影模型
      // viewer.scene.globe.depthTestAgainstTerrain = true; //重要  固定物体在位置上
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //限制地图浏览范围的观看最低高度
      var palaceTileset = new Cesium.Cesium3DTileset({
        url: "http://127.0.0.1/tileset.json", //nginx开服务
      });
      var collection = viewer.scene.postProcessStages;
      var snow = Cesium.PostProcessStageLibrary.createRainStage({
        // 版本1
        rainSize: 0.9, // 粗细 值越小雨效果越大 0-0.5之间
        rainSpeed: 0.3, //数字越大，速度越快 0-1之间
        rainDensity: 0.1, //密度，数字越大，密度越紧凑 0-1之间

        // 版本2
        // tiltAngle: 20, //雨下的倾斜角，0为垂直下
        // rainSize: 10, // 粗细 值越小雨效果越大 大于1的数
        // rainSpeed: 0.2, //数字越大，速度越快 0-1之间
      });
      collection.add(snow);

      palaceTileset.readyPromise.then(function (tileset) {
        var cartographic = Cesium.Cartographic.fromCartesian(
          tileset.boundingSphere.center
        );
        var surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          0
        );
        var offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude + 0.000065,
          cartographic.latitude - 0.000002,
          -70.0 //填高度差值
        );
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );

        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        viewer.scene.primitives.add(tileset);
        viewer.flyTo(tileset);
      });

      viewer.scene.primitives.add(palaceTileset);
    },
  },
};
</script>
<style lang='scss' scoped>
.cesium {
  position: absolute;
  width: 100%;
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>