Cesium后处理postProcessStages特效

原创

已于 2025-04-15 17:30:15 修改 · 3.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

于 2020-11-09 17:35:00 首次发布

本文介绍了Cesium中多种后处理特效的实现，包括边缘检测、轮廓、泛光、阴影、太阳和月亮的显示、星空、大气效果、雨、雪、雾、全屏雾、黑白、高斯模糊、亮度调整、景深、耀斑、夜视、环境遮蔽和阴影等，详细阐述了如何添加和调整这些特效。

1，边缘检测（天际线）createEdgeDetectionStage

var collection = viewer.scene.postProcessStages;

        var edgeDetection = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();

        var postProccessStage = new Cesium.PostProcessStage({
            name: 'czm_skylinetemp',
            fragmentShader: 'uniform sampler2D colorTexture;' +
                'uniform sampler2D depthTexture;' +

                'varying vec2 v_textureCoordinates;' +

                'void main(void)' +
                '{' +
                'float depth = czm_readDepth(depthTexture, v_textureCoordinates);' +
                'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
                'if(depth<1.0 - 0.000001){'+
                'gl_FragColor = color;' +
                '}'+
                'else{'+
                'gl_FragColor = vec4(1.0,0.0,0.0,1.0);'+
                '}'+
            '}'
        });

        var postProccessStage1 = new Cesium.PostProcessStage({
            name: 'czm_skylinetemp1',
            fragmentShader: 'uniform sampler2D colorTexture;' +
                'uniform sampler2D redTexture;' +
                'uniform sampler2D silhouetteTexture;' +

                'varying vec2 v_textureCoordinates;' +

                'void main(void)' +
                '{' +
                'vec4 redcolor=texture2D(redTexture, v_textureCoordinates);'+
                'vec4 silhouetteColor = texture2D(silhouetteTexture, v_textureCoordinates);' +
                'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
                'if(redcolor.r == 1.0){'+
                'gl_FragColor = mix(color, vec4(1.0,0.0,0.0,1.0), silhouetteColor.a);' +
                '}'+
                'else{'+
                'gl_FragColor = color;'+
                '}'+
            '}',
            uniforms: {
                redTexture: postProccessStage.name,
                silhouetteTexture: edgeDetection.name
            }
        });

        var postProccessStage = new Cesium.PostProcessStageComposite({
            name: 'czm_skyline',
            stages: [edgeDetection, postProccessStage, postProccessStage1],
            inputPreviousStageTexture: false,
            uniforms: edgeDetection.uniforms
        });

        collection.add(postProccessStage);

最低0.47元/天解锁文章