Cesium进阶教程（2）|基于 Cesium 后处理Post Processing的图形绘制（上）

本系列教程适合有前端基础以及一定三维GIS开发基础、想学习cesium高阶内容的同学，例如：WebGIS开发工程师、前端工程师、GIS专业学生和相关科研人员等。

往期内容：

Cesium进阶教程（1）customShader的使用

01、基础理论后期处理 Post Processing概念

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

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

包含哪些操作

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

02、cesium 中使用后处理

cesium中封装了几个核心类，专门用于后处理的效果，其中我们着重需要了解PostProcessStage和PostProcessStageLibary这两个类

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

可以将整个 cesium 场景想象为一块大的画布，后处理允许我们在这个大画布上使用 shader 去自己完成一些效果，比如，我们可以让整个场景变得更亮一些。

我们使用 PostProcessStage 这个 api，可以自定义后处理效果。

简单介绍一下 cesium 中对于 glsl 的编译环境

在后处理中，cesium 会为我们提供 colorTexture，当前视图的图片资源

v_textureCoordinates，当前渲染的像素坐标

iTime，一个随帧数不断增大的值

javascript 复制代码

// Simple stage to change the color
const fs =`
    uniform sampler2D colorTexture;
		uniform sampler2D depthTexture;
    varying vec2 v_textureCoordinates;
    uniform float scale;
    uniform vec3 offset;
    void main() {
        vec4 color = texture2D(colorTexture, v_textureCoordinates);
        gl_FragColor = vec4(color.rgb * scale + offset, 1.0);
    }`;

colorTexture

颜色纹理图，即场景渲染的结果，或者上一个后处理的结果（如果使用 postProcessStageComposite 的话）。

depthTexture

深度纹理图，即场景深度图，存储了每个像素的深度（可以还原为像素到相机的距离）

v_textureCoordinates

纹理坐标，纹理坐标的范围为 (0,0)-(1,1)

一般会使用颜色采样器，从颜色纹理中获取到当前场景的颜色

javascript 复制代码

texture2D(colorTexture, v_textureCoordinates);

还可以通过深度纹理，获取到像素到相机的距离

javascript 复制代码

float getDistance(sampler2D depthTexture, vec2 texCoords)
{
float depth = czm_unpackDepth(texture(depthTexture, texCoords));
vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
return -eyeCoordinate.z / eyeCoordinate.w;
}

现在分析一下 Cesium 中获取片元到相机距离的思路

首先通过czm_unpackDepth函数解码深度纹理中的深度值（深度纹理存储的是压缩后的深度信息，需要解码为线性深度）。
调用czm_windowToEyeCoordinates将窗口坐标（像素坐标）和深度值转换为眼睛坐标系（以相机为原点的坐标系）下的坐标。
眼睛坐标系中，z 值的正负代表前后方向，除以 w 分量（齐次坐标）得到标准化的眼睛坐标，取 - z 分量即为片元到相机的距离。

javascript 复制代码

eyeCoordinate.xyz / eyeCoordinate.w

看不懂？没关系！

这里还有详细的讲解视频👇

2.cesium进阶教程：后处理绘制圆形_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1yrs1zEE79?vd_source=8c32bbccf29164719fe4e4c40c768444&p=2&spm_id_from=333.788.videopod.episodes