Cesium 封装雾效果

关注

原创 2024-01-28 11:42:57 473 阅读 AI 写同款· GEO 优化 ›

Cesium中实现高度雾效果高度雾效果是一种在三维建模和渲染中广泛使用的技术，主要用于模拟现实世界中的雾气、烟雾等氛围效果。通过在场景中添加高度雾，可以增加场景的深度感、真实感和立体感，使渲染结果更加接近现实环境。由于csdn无法放置html文件，因此如果想体验效果，请移步。由于采用后处理方式实现，因此适用于场景中所有可见的物体。在Cesium中可以通过后处理的方式实现高度雾效果。Cesium中实现后处理高度雾之《迷雾下的阿美利坚》这里只是简单的使用线性雾的方式实现高度雾效果。阅读详情

/*
 * @Descripttion: 
 * @version: 1.0
 * @Author: tanzheng
 * @Date: 2024-1-23 15:30:42
 */
/**
 * 
 * 封装天气场景
 * 雾
 */
class Fog{

    constructor(viewer){
        
    }
    //创建雾
    createFog(){
        this.collection = viewer.scene.postProcessStages;
        this._fog = new Cesium.PostProcessStage({
            name: 'czm_fog',
            fragmentShader: this.getFog(),
            uniforms:{
                vfog:function () {
                        return 0.5;
                }
            }
        });
        this.collection.add(this._fog);
        viewer.scene.skyAtmosphere.hueShift = -0.8;
        viewer.scene.skyAtmosphere.saturationShift = -0.7;
        viewer.scene.skyAtmosphere.brightnessShift = -0.33;
        viewer.scene.fog.density = 0.001;
        viewer.scene.fog.minimumBrightness = 0.8;

       
    }
    //获得雪的shader
    getFog(){
        var fs=  `
        uniform sampler2D colorTexture;
        uniform sampler2D depthTexture;
        varying vec2 v_textureCoordinates;
        uniform float vfog;
        
        void main(void)
        {
            vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);
            vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);
            float depth = czm_readDepth(depthTexture, v_textureCoordinates);
            vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);
            float f=(depthcolor.r-0.22)/vfog;
            if(f<0.0) f=0.0;
            else if(f>0.3) f=0.3;
            gl_FragColor = mix(origcolor,fogcolor,f);
        }
        `
        
        return fs;
    }
    //清除雪
    clearFog(){
        viewer.scene.postProcessStages.remove(this._fog);
    }
    

}

收录于