Cesium中是该如何正确打开PostProcessStageLibrary 库(1)

Cesium.js 的 PostProcessStageLibrary 是一个用于创建和应用后期处理效果的库。

以下是我整理记录的相关资料，帮助自己更好地接收了解 Cesium 中的后期处理(Post Processing)。

查看地址

仓库地址

介绍

PostProcessStageLibrary 库提供了一组预定义的后期处理效果，开发者可以使用这些效果来轻松地增强或修改 Cesium.js 应用程序中的渲染效果，并创造出更加逼真和引人注目的视觉感观。

如上图所示，包含：

Bloom（泛光）
FXAA（快速近似抗锯齿）
Ambient Occlusion（环境遮蔽）
Depth of Field（景深）
Brightness (明亮度)
HDR（高动态范围）
Tone Mapping（色调映射）
...

一般的后期处理效果（如：景深、明亮度），有提供相应的PostProcessStageLibrary处理函数，但是某些后期处理效果（如：Bloom、FXAA、Ambient Occlusion），却是内置在viewer.scene.postProcessStages（初次执行的阶段渲染到的输出纹理），不需要添加额外的PostProcessStage或PostProcessStageComposite。

FXAA（快速近似抗锯齿）

Cesium 场景默认不开启（enabled 为 false）

说明

fxaa 效果的后期处理效果，添加抗锯齿效果。启用后，此阶段将在所有其他阶段之后执行。

设置

获取场景 fxaa 后期处理阶段：

tsx 复制代码

this.fxaa = this.viewer.scene.postProcessStages.fxaa;

通过 GUI 可视化控件，修改 fxaa 属性值，来查看 fxaa 变化:

ts 复制代码

let fxaa_folder = gui.addFolder("Fxaa");
fxaa_folder.add({ show: true }, "show").onChange((v: boolean) => {
  viewer.scene.postProcessStages.fxaa.enabled = v;
});

Bloom（泛光）

Cesium 场景默认不开启（enabled 为 false）

说明

bloom 效果的后期处理效果，添加发光效果，使明亮区域更亮，使黑暗区域更暗。启用后，此阶段将在所有其他阶段之前执行。

uniforms

参数	类型	描述
glowOnly	boolean	（默认值为 false）当 true 时，将仅显示发光效果。当 false 时，发光将被添加到输入纹理中。
contrast	number	对比度，[-255.0， 255.0] 范围内的标量值（默认值为 128.0）
brightness	number	明亮度（ -0.3）
delta	number	计算高斯滤波器的权重（默认值为 1.0）
sigma	number	计算高斯滤波器的权重（默认值为 2.0 ）
stepSize	number	到下一个纹素的距离（默认值为 1.0 ）

设置

获取场景 bloom 后期处理阶段：

tsx 复制代码

this.bloom = this.viewer.scene.postProcessStages.bloom;

通过 GUI 可视化控件，修改 Bloom 属性值，来查看 Bloom 变化:

ts 复制代码

const reviseGui = (
  bloom: Cesium.PostProcessStageComposite,
  guiParams: BloomParamsInterface,
) => {
  bloom.enabled = Boolean(guiParams.show);
  bloom.uniforms.glowOnly = Boolean(guiParams.glowOnly);
  bloom.uniforms.contrast = Number(guiParams.contrast);
  bloom.uniforms.brightness = Number(guiParams.brightness);
  bloom.uniforms.delta = Number(guiParams.delta);
  bloom.uniforms.sigma = Number(guiParams.sigma);
  bloom.uniforms.stepSize = Number(guiParams.stepSize);
};

Ambient Occlusion（环境遮蔽）

Cesium 场景默认不开启（enabled 为 false）

说明

ambientOcclusion 效果的后期处理效果，设置场景环境光遮蔽。环境光遮蔽模拟来自环境光的阴影。当表面接收光线时，无论光线的位置如何，这些阴影将始终存在。启用后，此阶段将在所有其他阶段之前执行。

uniforms

参数	类型	描述
intensity	number	用于以指数方式使阴影变亮或变暗。值越高，阴影越暗。（默认值为 3.0）
bias	number	如果样本法线与相机矢量之间的点积小于此值，则采样将停止在当前方向上。（默认值为 0.1）
lengthCap	number	如果从当前样本到第一个样本的距离大于此值，则取样将停止在当前方向上。（默认值为 0.26）
stepSize	number	指示在当前方向上到下一个纹素样本的距离。（默认值为 1.95）
frustumLength	number	如果当前片段与相机的距离大于此值，则不会计算该片段的环境光遮蔽。（默认值为 1000.0）
ambientOcclusionOnly	boolean	这是一个有用的调试选项，用于查看更改统一值的效果。（默认值为 false）当 true 时，只有生成的阴影被写入输出。当 false 时，输入纹理使用环境光遮蔽进行调制。
delta	number	计算高斯滤波器的权重（默认值为 1.0）
sigma	number	计算高斯滤波器的权重（默认值为 2.0 ）
stepSize	number	到下一个纹素的距离（默认值为 1.0 ）

设置

获取场景 AmbientOcclusion 后期处理阶段：

tsx 复制代码

this.ambientOcclusion = this.viewer.scene.postProcessStages.ambientOcclusion;

通过 GUI 可视化控件，修改 AmbientOcclusion 属性值，来查看 AmbientOcclusion 变化:

ts 复制代码

const reviseGui = (
  ambientOcclusion: Cesium.PostProcessStageComposite,
  guiParams: AmbientOcclusionParamsInterface,
) => {
  ambientOcclusion.enabled = Boolean(guiParams.show);
  ambientOcclusion.uniforms.ambientOcclusionOnly = Boolean(
    guiParams.ambientOcclusionOnly,
  );
  ambientOcclusion.uniforms.bias = Number(guiParams.bias);
  ambientOcclusion.uniforms.blurStepSize = Number(guiParams.blurStepSize);
  ambientOcclusion.uniforms.delta = Number(guiParams.delta);
  ambientOcclusion.uniforms.frustumLength = Number(guiParams.frustumLength);
  ambientOcclusion.uniforms.intensity = Number(guiParams.intensity);
  ambientOcclusion.uniforms.lengthCap = Number(guiParams.lengthCap);
  ambientOcclusion.uniforms.sigma = Number(guiParams.sigma);
  ambientOcclusion.uniforms.stepSize = Number(guiParams.stepSize);
};