浅聊Cesium.js 后处理原理

浅聊Cesium.js 后处理原理

使用例子:

const stages = viewer.scene.postProcessStages;

const silhouette = Cesium.PostProcessStageLibrary.createSilhouetteStage()
silhouette.enabled = true;
stages.add(silhouette);

silhouette.uniforms.color = Cesium.Color.LIME;

涉及到相关类的关系:

流程和three.js比较

0、整体流程

两步: 更新和执行.

function updateAndClearFramebuffers() {
  // ...

  const postProcess: PostProcessStageCollection = scene.postProcessStages;
  postProcess.update();
  postProcess.clear();
  // ...
}

Scene.prototype.resolveFramebuffers() {
  // ...
  const postProcess: PostProcessStageCollection = scene.postProcessStages;

  // 执行后处理渲染
  postProcess.execute();

  // 将结果输出到屏幕
  postProcess.copy();

  // ...
}

1、PostProcessStageCollection

PostProcessStageCollection

PostProcessStageCollection 是一个用于管理后处理阶段的集合类。主要作用和功能如下：

• 阶段管理：
  以集合的方式管理多个后处理阶段。通常，一个后处理效果可能需要多个阶段的处理，例如先进行图像模糊，然后再应用色调映射。

• 顺序控制：
  允许定义后处理阶段的执行顺序。通过调整阶段在集合中的顺序，可以控制它们的执行顺序。例如，如果需要先进行亮度调整，再进行颜色校正，可以通过调整阶段的顺序来实现。

• 功能扩展：
  允许自定义后处理阶段，并将其添加到集合中。

PostProcessStageCollection
  ┣ _ao: PostProcessStageComposite
  ┣ _bloom: PostProcessStageComposite
  ┣ _fxaa: PostProcessStage
  ┣ _autoExposure: AutoExposure
  ┣ _textureCache: PostProcessStageTextureCache
  ┃
  ┣ add()
  ┖ update()

PostProcessStageCollection.prototype.update() {
  // ...
  this._textureCache.updateDependencies();
  this._textureCache.update(context);

  stages[i].update(context, useLogDepth);
  // ...
}

PostProcessStageCollection.prototype.execute() {
  // ...
  execute()
  // ...
}

2、PostProcessStage

PostProcessStage 是后处理阶段的基本单元，用于实现具体的图像处理效果。它是在渲染管线中的最后阶段之一，用于对场景渲染结果进行进一步处理和改善。

PostProcessStage
  ┣ _uniforms: Object
  ┣ _fragmentShader: string
  ┣ _passState: PassState
  ┣ _sampler: Sampler
  ┣ _command: DrawCommand
  ┃
  ┣ outputTexture: Texture
  ┣ _clearColor: Color
  ┣ _pixelFormat: PixelFormat
  ┣ _pixelDatatype: PixelDatatype
  ┃
  ┣ update()
  ┣ execute()
  ┖ destroy()

PostProcessStage.prototype.update() {
  // ...
  createUniformMap()
  updateUniformTextures()
  createDrawCommand()
  createSampler()
  // ...
}

PostProcessStage.prototype.execute() {
  // ...
  this._command.execute();
  // ...
}

3、PostProcessStageTextureCache

PostProcessStageTextureCache 是一个用于缓存后处理阶段纹理的工具。

后处理阶段通常需要使用中间纹理来存储和处理图像数据。PostProcessStageTextureCache 提供了一个管理这些中间纹理的机制，以提高效率和性能。

PostProcessStageTextureCache
  ┃
  ┣ _collection: PostProcessStageCollection
  ┣ _framebuffers: []
  ┣ _stageNameToFramebuffer: []
  ┣ _width: number
  ┣ _height: number
  ┣ _updateDependencies: boolean
  ┃
  ┣ update()
  ┣ clear()
  ┣ getStageByName()
  ┣ getOutputTexture()
  ┣ getFramebuffer()
  ┣ isDestroyed()
  ┣ destroy()
  ┖ updateDependencies()

PostProcessStageTextureCache.prototype.update() {
  // ...
  if (updateDependencies) {
    releaseResources(this);
  }

  if (this._framebuffers.length === 0) {
    createFramebuffers(this, context);
  }
  // ...
}

4、PostProcessStageComposite

PostProcessStageComposite是一个后处理阶段的组合器，用于将多个后处理阶段组合成一个整体的后处理效果。它提供了一种将多个处理阶段串联或并行执行的机制，以实现复杂的后处理效果。

5、PostProcessStageLibrary

各种后处理的实现代码集合。

PostProcessStageLibrary
  ┣ createBlurStage() // 高斯模糊
  ┣ createDepthOfFieldStage() // 景深
  ┣ createEdgeDetectionStage() // 检测边缘
  ┣ createSilhouetteStage() // 轮廓
  ┣ createBlackAndWhiteStage() // 黑白渐变渲染
  ┣ createNightVisionStage() // 夜视效果
  ┣ createLensFlareStage() // 镜头眩光
  ┃
  ┣ createAmbientOcclusionStage() // 环境光遮挡
  ┣ createFXAAStage() // 抗锯齿
  ┣ createAcesTonemappingStage()
  ┣ createFilmicTonemappingStage()
  ┣ createReinhardTonemappingStage()
  ┣ createModifiedReinhardTonemappingStage()
  ┣ createAutoExposureStage()
  ┣ createBrightnessStage()
  ┣ createBloomStage()
  ┖ createDepthViewStage()