cesium实现下雨下雪特效

敲代码的小江江

已于 2022-06-17 10:59:53 修改

阅读量1.5k

点赞数 4

文章标签：前端 javascript

于 2022-06-17 10:48:41 首次发布

本文链接：https://blog.csdn.net/qq_40863573/article/details/125327716

版权

页面效果

使用着色器实例特效

下雨特效着色器

// 下雨特效
rain () {
  removeStage();
  var e = new Cesium.PostProcessStage({
    name: "czm_rain",
    fragmentShader: FS_Rain()
  });
  viewer.scene.postProcessStages.add(e), lastStage = e
  function 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 = e
  function 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 = e
      function 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 = e
      function 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\
        ";
      }
    },
    // 实例cesium
    getCesiumDem () {
      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>