Cesium使用后期渲染方式实现雾特效

转载请注明出处:https://blog.csdn.net/wqy248/article/details/89675159

Cesium开源方法里有专门的Fog类,可以实现雾,只要控制其显隐即可。但是由于Cesium有深度测试,需要控制其深度阈值,让其在不同的场景中都能正常显示。cesium超出深度阈值部分就不渲染了,看起来那部分是黑色的,这样确定合适的阈值并根据场景实时变换比较困难。所以果断采用PostProcessStage方式对cesium的webgl渲染后的画面进行重新再次渲染,这样不用担心深度测试的阈值确定不准确问题。

关于PostProcessStage、深度图等相关问题可以问百度,此处直接上代码:

this.FogStage=Cesium.PostProcessStageLibrary.createBrightnessStage();
//this.FogStage.uniforms.brightness=2;//整个场景通过后期渲染变亮 1为保持不变 大于1变亮 0-1变暗 uniforms后面为对应glsl里面定义的uniform参数
this.FogStage=new Cesium.PostProcessStage({
    "name":"self",
    //sampleMode:PostProcessStageSampleMode.LINEAR,
    fragmentShader:"  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" +
        "\n" +
        "      float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n" +
        "      vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n" +
        "\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" +
        "   }"
});



this.viewer.scene.postProcessStages.add(this.FogStage);
this.FogStage.enabled=true;

实现效果如下:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
再叠加个下雪的特效:在这里插入图片描述
主要方法是获取渲染坐标对应的深度值,将其拉伸到0-1范围用于叠加雾颜色到场景中。这就是我想要的寂静岭效果啊。

  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值