关键技术：GLSL, 后处理，离屏渲染等

实现效果：如下图：

 

 

关键代码：

 1 var collection = viewer.scene.postProcessStages;
 2 
 3         var edgeDetection = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
 4 
 5         var postProccessStage = new Cesium.PostProcessStage({
 6             name: 'czm_skylinetemp',
 7             fragmentShader: 'uniform sampler2D colorTexture;' +
 8                 'uniform sampler2D depthTexture;' +
 9 
10                 'varying vec2 v_textureCoordinates;' +
11 
12                 'void main(void)' +
13                 '{' +
14                 'float depth = czm_readDepth(depthTexture, v_textureCoordinates);' +
15                 'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
16                 'if(depth<1.0 - 0.000001){'+
17                 'gl_FragColor = color;' +
18                 '}'+
19                 'else{'+
20                 'gl_FragColor = vec4(1.0,0.0,0.0,1.0);'+
21                 '}'+
22             '}'
23         });
24 
25         var postProccessStage1 = new Cesium.PostProcessStage({
26             name: 'czm_skylinetemp1',
27             fragmentShader: 'uniform sampler2D colorTexture;' +
28                 'uniform sampler2D redTexture;' +
29                 'uniform sampler2D silhouetteTexture;' +
30 
31                 'varying vec2 v_textureCoordinates;' +
32 
33                 'void main(void)' +
34                 '{' +
35                 'vec4 redcolor=texture2D(redTexture, v_textureCoordinates);'+
36                 'vec4 silhouetteColor = texture2D(silhouetteTexture, v_textureCoordinates);' +
37                 'vec4 color = texture2D(colorTexture, v_textureCoordinates);' +
38                 'if(redcolor.r == 1.0){'+
39                 'gl_FragColor = mix(color, vec4(1.0,0.0,0.0,1.0), silhouetteColor.a);' +
40                 '}'+
41                 'else{'+
42                 'gl_FragColor = color;'+
43                 '}'+
44             '}',
45             uniforms: {
46                 redTexture: postProccessStage.name,
47                 silhouetteTexture: edgeDetection.name
48             }
49         });
50 
51         var postProccessStage = new Cesium.PostProcessStageComposite({
52             name: 'czm_skyline',
53             stages: [edgeDetection, postProccessStage, postProccessStage1],
54             inputPreviousStageTexture: false,
55             uniforms: edgeDetection.uniforms
56         });
57 
58         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;
}
如果有深度就按照原本的颜色绘制，
如果没有深度，有轮廓就绘制轮廓，否则就绘制原本的颜色