Cesium 中的后期处理(Post Processing)

为了让CesiumJS中的场景更加自然、美观，添加后期处理（Post Processing）是必不可少的，它能对渲染的场景进行进一步的处理和增强，以改善视觉效果或实现特定的效果。

通过该篇笔记来介绍回顾一下，CesiumJS中的后期处理(Post Processing)相关知识。

Post Processing 是什么？

首先我们先明白，Post Processing 是什么？，以下是我查到的资料介绍：

在计算机图形学和图像处理领域，后期处理（Post Processing）是指对生成的图像或视频进行进一步处理、增强或修改的过程，以改善视觉效果或实现特定的艺术目标。

它通常发生在图像或视频生成后的阶段。

如图所示（Post Processing有助于改善视觉效果、修正错误、添加特效或调整图像的外观）

Post Processing 操作指的是什么？

1. 视觉增强 (调整颜色、对比度、饱和度)
2. 错误修正（P 图，去除噪点、减少图像模糊或消除色彩偏差来纠正图像中的问题）
3. 特效添加 (模糊、景深、光晕、色调映射)
4. 艺术创作（滤镜、调整色彩和形态）
5. 细节增强（锐化、增加局部对比度）
6. 格式转换 (将图像或视频转换为不同的格式或尺寸，以适应不同的应用和平台要求)

如图所示（效果感觉上一个天一个地）

Post Processing 工作流程是什么？

这只是一个大致的流程指南

1. 导入素材
2. 剪辑和整理
3. 调整基本参数
4. 去噪和修复
5. 特效和滤镜
6. 调整尺寸和比例
7. 音频处理
8. 导出和保存

如图所示（大致想象一下，有这么这个流水线程序）

Post Processing 该如何使用算法自定义实现？

1. 获取图像数据
2. 对图像数据进行处理（以下操作全非必选）
   • 调整颜色和对比度
   • 模糊和锐化
   • 边缘检测
   • 色彩分离
   • 漫画化效果
   • 其他效果
3. 应用处理后的图像数据（将处理后的图像数据显示在屏幕上）

后期处理通常涉及高度优化的图像处理算法，因此在实现时要考虑算法的效率和性能。

对于应用实时（如游戏或实时视频处理），需要确保算法能够以足够快的速度处理图像数据。

这需要一定的编程和图像处理知识，以及合适的工具和库来辅助实现。

能否使用 JS 来实现处理 Post Processing 工作流程

在 JavaScript 中，有几个库可以帮助你处理后期处理（Post Processing）效果。

这些库提供了一些方便的功能和工具，使得实现和应用后期处理效果变得更加简单。

1. Three.js：Three.js 是一个功能强大的 3D 渲染库，但它也提供了丰富的后期处理功能。
2. Pixi.js：Pixi.js 是一个用于创建基于 WebGL 的交互式图形和游戏的 2D 渲染引擎。
3. ShaderGraph：ShaderGraph 是 Unity 引擎中的一个可视化着色器编辑器，可以生成用于 WebGL 的着色器代码。
4. GLSL：GLSL（OpenGL Shading Language）是一种用于编写着色器的编程语言。

注意：上述图形库都是基于 WebGL API 来实现的。

要在 WebGL 中实现后期处理（Post Processing），你可以使用着色器（shader）来对渲染的图像进行处理。

示例

1. 创建一个带有 WebGL 上下文的画布

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

2. 创建顶点和片元着色器

// 顶点着色器
const vertexShaderSource = `xxx`;

// 片元着色器
const fragmentShaderSource = `xxx`;

3. 编译和链接着色器

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
...

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
...

// 创建WebGL程序
const program = gl.createProgram();
...

4. 创建顶点缓冲区

const positionBuffer = gl.createBuffer();
...

5. 创建纹理

const texture = gl.createTexture();
...

6. 渲染

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

你可以根据需要在片元着色器中添加不同的处理操作，比如调整颜色、应用滤镜、添加特效等。

请注意，后期处理可能需要更复杂的着色器代码和纹理操作，具体取决于你的需求。

Cesium 中的后期处理(Post Processing)

Cesium.js 是一个基于 WebGL 的 API 而封装的 JavaScript 库，用于创建高性能、跨平台的三维地图和地理信息应用程序。

CesiumJS为了改善视觉效果或实现特定的效果，通过WebGL API和自身的图形绘制算法也开发了一系列后期处理（Post Processing）处理。

后期处理（Post Processing）模块有：

1. 色调映射（Tone Mapping）
2. 高光和泛光效果
3. 模糊和景深效果
4. 色彩校正和调整
5. 抗锯齿和去噪

核心类

为了使用这个模块，我们首先得弄明白CesiumJS中几个核心类的使用：

PostProcessStage

// 渲染阶段
scene.postProcessStages.add(new Cesium.PostProcessStage(options));

根据当前场景渲染输出的纹理（或者紧随上一个 Post Processing 后期处理阶段），来进行一个（新）的 Post Processing 后期处理。

PostProcessStageCollection

new Cesium.PostProcessStageCollection();

多个 PostProcessStage 和多个 PostProcessStageComposite 的集合。

其中集合中 PostProcessStage 的输入纹理是，是当前场景渲染输出的纹理或上一个 Post Processing 后期处理阶段渲染出的纹理。

如果启用了（ambient occlusion）环境光遮蔽或（bloom）泛光阶段，它们将在所有其他阶段之前执行。

如果启用了（FXAA）阶段，它将在所有其他阶段之后执行。

PostProcessStageComposite

// 可分离模糊过滤器
// blurXDirection的输入是：当前场景渲染输出的纹理或上一个 Post Processing 后期处理阶段渲染出的纹理
// blurYDirection的输入是：由blurXDirection渲染的纹理
scene.postProcessStages.add(
  new Cesium.PostProcessStageComposite({
    stages: [blurXDirection, blurYDirection],
  }),
);

所有 Post Processing 阶段都按数组的顺序执行。

输入纹理根据 inputPreviousStageTexture 的值而变化：

如果 inputPreviousStageTexture 为 true ，则每个阶段的输入是场景或之前执行的阶段渲染到的输出纹理。

如果 inputPreviousStageTexture 是 false ，则合成中每个阶段的输入（场景）纹理都是相同的。

PostProcessStageSampleMode

Post Processing 阶段采样模式：（像素抽样调查数据）

• NEAREST：通过返回最接近的纹素对纹理进行采样。
• LINEAR： 通过对四个最近的纹素进行双线性插值对纹理进行采样。

PostProcessStageLibrary

包含用于创建常见 后期处理（Post Processing）模块的函数和算法。

示例

开发人员可以使用 Cesium.js 的 API 来配置和应用这些效果，以满足其应用的需求，并改善其在地球上的三维场景中的视觉呈现效果。

相关资料

• Cesium
• Cesium Documentation