Cesium 后处理（Post Process）

原文地址：https://blog.csdn.net/ls870061011/article/details/123910821

作者：GIS李胜

为实现三维模型的更炫、更酷、更美观，Cesium在1.46的版本中新增了场景的后期处理（Post Processing）功能，包括模型描边、黑白图、明亮度调整、夜市效果、环境光遮蔽，也包括雷达扫描、原型扩散等一些特效。今天我们来学习一下场景后期处理的基础知识和实现流程。

一、场景后期处理效果

Cesium为我们提供了一些默认的示例效果，但基本上可分为如下三类：
包括ambientOcclusion环境光遮挡、bloom发光效果、fxaa近似抗锯齿，我们挑选前两个为例进行说明。

1、环境光遮罩：

没有开启AO效果如下图一，开启AO效果如下图二，单纯的AO图如下图三

https://sandcastle.cesium.com/?src=Ambient%20Occlusion.html&label=Post%20Processing

2、发光bloom

https://sandcastle.cesium.com/?src=Bloom.html&label=Post%20Processing

3、抗锯齿 FXAA/MXAA

cesium demo https://sandcastle.cesium.com/?src=MSAA.html&label=Post%20Processing

FXAA + MSAA 4X 能起到非常不错的抗锯齿效果。

二、场景后期处理流程

场景的后期处理这个词比较陌生，但说起照片的PS大家都很熟悉，这两个过程非常类似。日常生活中我们拍摄完照片之后，发现太亮或太暗，又或者是皮肤不够白、脸上痘痘明显，我们可以调整亮度、修复一下嫩白的脸蛋，经过几波操作之后，得到了一张我们非常满意的照片。

我们可以把照片的修复过程简单理解成场景的后期处理过程，修图的过程就比喻成对三维场景中初始渲染的效果进行再处理，比如添加物体描边、明暗度调整、夜市效果等，最终把综合之后的效果在场景中渲染出来。Cesium中的场景后期处理的大概流程如下图所示：

下面结合Cesium本身的PostProcess类，详细的说明一下处理流程：
第一步：通过PostProcessStageLibrary创建一个或者多个后处理效果对象，得到多个PostProcessStage或PostProcessStageComposite；
第二步：将他们加入到PostProcessStageCollection对象中，并设置PostProcessStage或PostProcessStageComposite一些参数，如uniforms；
第三步：PostProcessStageCollection对象就会按照加入的顺序进行屏幕后期处理，在所有的效果都处理完毕后，最后绘制到屏幕上。
当然也可以省略第一步，直接利用PostProcessStageCollection实例化对象中已有的处理效果去实现，如ambientOcclusion、bloom、fxaa。
————————————————

三、场景后期处理相关类

上述提到了PostProcess类，基本上涉及到4个类文件，具体每个类的作用又是什么呢？我们来说明一下。
（1）PostProcessStage
对应于某个具体的后期处理效果，它的输入为场景渲染图或者上一个后期处理的结果图，输出结果是一张处理后的图片。

// Simple stage to change the colorvar
fs =
  'uniform sampler2D colorTexture;\n' +
  'varying vec2 v_textureCoordinates;\n' +
  'uniform float scale;\n' +
  'uniform vec3 offset;\n' +
  'void main() {\n' +
  '    vec4 color = texture2D(colorTexture, v_textureCoordinates);\n' +
  '    gl_FragColor = vec4(color.rgb * scale + offset, 1.0);\n' +
  '}\n';
scene.postProcessStages.add(new Cesium.PostProcessStage({
  fragmentShader : fs,
  uniforms : {
    scale : 1.1,
    offset : function() {
      return new Cesium.Cartesian3(0.1, 0.2, 0.3);
    }
  }}));

（2）PostProcessStageComposite
一个集合对象，按顺序存储了不同的场景处理对象，存储类型为PostProcessStage或者PostProcessStageComposite的元素，并存储在stages属性中。

// Example 1: separable blur filter
// The input to blurXDirection is the texture rendered to by the scene or the output of the previous stage.
// The input to blurYDirection is the texture rendered to by blurXDirection.
scene.postProcessStages.add(new Cesium.PostProcessStageComposite({
    stages : [blurXDirection, blurYDirection]}));

（3）PostProcessStageLibrary
负责创建具体的后期处理效果，提供了一些创建常用场景特效的方法，包括createBlackAndWhiteStage-黑色和白色渐变渲染、createBlurStage-高斯模、createBrightnessStage-纹理饱和、createDepthOfFieldStage-景深效果等，创建返回的结果是PostProcessStageComposite或者PostProcessStage类型。相对来说比较简单，直接调用即可。

var stages = viewer.scene.postProcessStages;
var silhouette = stages.add(
	Cesium.PostProcessStageLibrary.createSilhouetteStage()
);

（4）PostProcessStageCollection
是一个集合类型的类，负责管理和维护放到集合中的PostProcessStage或PostProcessStageComposite类型对象，实例化对象可通过viewer.scene.postProcessStages直接获取，提供了一些常用的方法，如add、contains、destroy、remove等。
但需要注意的是，该集合中也设定了三个ambientOcclusion、bloom、fxaa效果，如果此类中的环境光遮挡-ambientOcclusion或发光效果-bloom被启用，它们将在所有其他阶段之前执行，优先级最高；如果近似抗锯齿-fxaa被启用，它将在所有其他阶段之后执行，优先级最低。