Cesium 天際線 着色器后處理

關鍵技術：GLSL, 后處理，離屏渲染等

實現效果：如下圖：

 

 

關鍵代碼：

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);

 

 實現思路：

第一步：繪制輪廓線作為中間參數

第二步：繪制深度紋理小於1的為紅色區域

第三步：

if(redcolor.r == 1.0){
  gl_FragColor = mix(color, vec4(1.0,0.0,0.0,1.0), silhouetteColor.a);
}
else{
  gl_FragColor = color;
}
如果有深度就按照原本的顏色繪制，
如果沒有深度，有輪廓就繪制輪廓，否則就繪制原本的顏色