Cesium Skyline PostProcessStage

skylinePostProcessStage.ts

const fragmentShaderText = /* glsl */`uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
varying vec2 v_textureCoordinates;

void main() {
  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); // RED Outline
  }
}`

const mixFragmentShaderText = /* glsl */`uniform sampler2D colorTexture;
uniform sampler2D redTexture;
uniform sampler2D silhouetteTexture;
varying vec2 v_textureCoordinates;

void main() {
  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(5.0, 0.0, 0.0, 1.0), silhouetteColor.a);
  } else {
    gl_FragColor = color;
  }
}
`

const applySkylineEffect = (viewer: Viewer) => {
  const edgeDetection = PostProcessStageLibrary.createEdgeDetectionStage()
  const skylineStage = new PostProcessStage({
    name: 'skyline',
    fragmentShader: fragmentShaderText,
  })
  const mixStage = new PostProcessStage({
    name: 'mix',
    fragmentShader: mixFragmentShaderText,
    uniforms: {
      redTexture: skylineStage.name,
      silhouetteTexture: edgeDetection.name
    }
  })
  const finalPostProcessStage = new PostProcessStageComposite({
    stages: [edgeDetection, skylineStage, mixStage],
    inputPreviousStageTexture: false,
    uniforms: edgeDetection.uniforms
  })
  viewer.scene.postProcessStages.add(finalPostProcessStage)
}