为了让
CesiumJS中的场景更加自然、美观，添加后期处理（Post Processing）是必不可少的，它能对渲染的场景进行进一步的处理和增强，以改善视觉效果或实现特定的效果。通过该篇笔记来介绍回顾一下，
CesiumJS中的后期处理(Post Processing)相关知识。
Post Processing 是什么？
首先我们先明白，Post Processing 是什么？，以下是我查到的资料介绍：
在计算机图形学和图像处理领域，后期处理（Post Processing）是指对生成的图像或视频进行进一步处理、增强或修改的过程，以改善视觉效果或实现特定的艺术目标。
它通常发生在图像或视频生成后的阶段。
如图所示（Post Processing有助于改善视觉效果、修正错误、添加特效或调整图像的外观）
Post Processing 操作指的是什么？
- 视觉增强 (调整颜色、对比度、饱和度)
- 错误修正（P 图，去除噪点、减少图像模糊或消除色彩偏差来纠正图像中的问题）
- 特效添加 (模糊、景深、光晕、色调映射)
- 艺术创作（滤镜、调整色彩和形态）
- 细节增强（锐化、增加局部对比度）
- 格式转换 (将图像或视频转换为不同的格式或尺寸，以适应不同的应用和平台要求)
如图所示（效果感觉上一个天一个地）
Post Processing 工作流程是什么？
这只是一个大致的流程指南
- 导入素材
- 剪辑和整理
- 调整基本参数
- 去噪和修复
- 特效和滤镜
- 调整尺寸和比例
- 音频处理
- 导出和保存
如图所示（大致想象一下，有这么这个流水线程序）
Post Processing 该如何使用算法自定义实现？
- 获取图像数据
- 对图像数据进行处理（以下操作全非必选）
- 调整颜色和对比度
- 模糊和锐化
- 边缘检测
- 色彩分离
- 漫画化效果
- 其他效果
- 应用处理后的图像数据（将处理后的图像数据显示在屏幕上）
后期处理通常涉及高度优化的图像处理算法，因此在实现时要考虑算法的效率和性能。
对于应用实时（如游戏或实时视频处理），需要确保算法能够以足够快的速度处理图像数据。
这需要一定的编程和图像处理知识，以及合适的工具和库来辅助实现。
能否使用 JS 来实现处理 Post Processing 工作流程
在 JavaScript 中，有几个库可以帮助你处理后期处理（Post Processing）效果。
这些库提供了一些方便的功能和工具，使得实现和应用后期处理效果变得更加简单。
- Three.js：Three.js 是一个功能强大的 3D 渲染库，但它也提供了丰富的后期处理功能。
- Pixi.js：Pixi.js 是一个用于创建基于 WebGL 的交互式图形和游戏的 2D 渲染引擎。
- ShaderGraph：ShaderGraph 是 Unity 引擎中的一个可视化着色器编辑器，可以生成用于 WebGL 的着色器代码。
- GLSL：GLSL（OpenGL Shading Language）是一种用于编写着色器的编程语言。
注意：上述图形库都是基于 WebGL API 来实现的。
要在 WebGL 中实现后期处理（Post Processing），你可以使用着色器（shader）来对渲染的图像进行处理。
示例
- 创建一个带有 WebGL 上下文的画布
jsx
<canvas id="canvas"></canvas>
jsx
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');- 创建顶点和片元着色器
jsx
// 顶点着色器
const vertexShaderSource = `xxx`;
// 片元着色器
const fragmentShaderSource = `xxx`;- 编译和链接着色器
jsx
// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
...
// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
...
// 创建WebGL程序
const program = gl.createProgram();
...- 创建顶点缓冲区
jsx
const positionBuffer = gl.createBuffer();
...- 创建纹理
jsx
const texture = gl.createTexture();
...- 渲染
jsx
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);你可以根据需要在片元着色器中添加不同的处理操作，比如调整颜色、应用滤镜、添加特效等。
请注意，后期处理可能需要更复杂的着色器代码和纹理操作，具体取决于你的需求。
Cesium 中的后期处理(Post Processing)
Cesium.js 是一个基于 WebGL 的 API 而封装的 JavaScript 库，用于创建高性能、跨平台的三维地图和地理信息应用程序。
CesiumJS为了改善视觉效果或实现特定的效果，通过WebGL API和自身的图形绘制算法也开发了一系列后期处理（Post Processing）处理。
后期处理（Post Processing）模块有：
- 色调映射（Tone Mapping）
- 高光和泛光效果
- 模糊和景深效果
- 色彩校正和调整
- 抗锯齿和去噪
核心类
为了使用这个模块，我们首先得弄明白
CesiumJS中几个核心类的使用：
PostProcessStage
jsx
// 渲染阶段
scene.postProcessStages.add(new Cesium.PostProcessStage(options));根据当前场景渲染输出的纹理（或者紧随上一个 Post Processing 后期处理阶段），来进行一个（新）的 Post Processing 后期处理。
PostProcessStageCollection
jsx
new Cesium.PostProcessStageCollection();多个 PostProcessStage 和多个 PostProcessStageComposite 的集合。
其中集合中 PostProcessStage 的输入纹理是，是当前场景渲染输出的纹理或上一个 Post Processing 后期处理阶段渲染出的纹理。
如果启用了（ambient occlusion）环境光遮蔽或（bloom）泛光阶段，它们将在所有其他阶段之前执行。
如果启用了（FXAA）阶段，它将在所有其他阶段之后执行。
PostProcessStageComposite
jsx
// 可分离模糊过滤器
// 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 来配置和应用这些效果，以满足其应用的需求，并改善其在地球上的三维场景中的视觉呈现效果。