在 Cesium 中，postProcessStages 是用于实现后处理效果（Post-Processing Effects）的核心机制。后处理效果是在场景渲染完成后对最终图像进行额外处理的步骤，常用于实现景深、模糊、高光、颜色校正等视觉效果。以下是关于 postProcessStages 的全面解析。
一、基本概念
1、后处理阶段（PostProcessStage）:
表示单个后处理效果的实现（如模糊、抗锯齿等）。
可以组合多个阶段形成处理链（例如先模糊后调色）。
2、后处理阶段集合（PostProcessStageCollection）:
管理多个 PostProcessStage 的集合。
通过 scene.postProcessStages 访问。
3、执行顺序:
后处理阶段按添加到集合中的顺序依次执行。
最后一个阶段的输出通常是最终的屏幕图像。
二、创建与使用
1. 内置后处理效果
Cesium 提供了一些内置的后处理效果，例如：
FXAA (快速近似抗锯齿)
const fxaa = Cesium.PostProcessStageLibrary.createFXAAStage(); scene.postProcessStages.add(fxaa);
Bloom (泛光效果)
const bloom = Cesium.PostProcessStageLibrary.createBloomStage(); bloom.uniforms.glowOnly = false; // 控制是否仅显示泛光 scene.postProcessStages.add(bloom);
2. 自定义后处理阶段
可以通过编写 GLSL 着色器创建自定义效果：
const customStage = new Cesium.PostProcessStage({
name: 'CustomEffect',
fragmentShader: `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
out vec4 fragColor;
void main() {
vec4 color = texture(colorTexture, v_textureCoordinates);
// 自定义逻辑（例如反色）
fragColor = vec4(1.0 - color.rgb, color.a);
}
`,
uniforms: {} // 可传入自定义 Uniform 变量
});
scene.postProcessStages.add(customStage);三、关键属性和方法
1. 常用属性
enabled: 启用或禁用后处理阶段。
fxaa.enabled = false; // 临时关闭 FXAA
uniforms: 调整后处理效果的参数。
bloom.uniforms.intensity = 2.0; // 增强泛光强度
2. 常用方法
add(stage): 添加后处理阶段。
remove(stage): 移除阶段。
removeAll(): 清空所有阶段。
四、性能优化
1、合理选择效果:
复杂的后处理（如 SSAO、景深）会显著影响性能。
在移动端或低配设备上谨慎使用。
2、合并阶段:
将多个 GLSL 操作合并到一个阶段中，减少渲染次数。
3、动态启用:
根据场景需要动态开关效果：
viewer.scene.postProcessStages.fxaa.enabled = isHighQualityMode;
五、常见问题与调试
1. 效果未显示
可能原因:
阶段未添加到 postProcessStages。
着色器代码存在语法错误。
Uniform 变量未正确设置。
调试方法:
使用浏览器开发者工具检查控制台输出。
逐步启用阶段，定位问题。
2. 透明物体问题
后处理默认不处理透明几何体（如 3D Tiles 的透明部分），需设置：
stage.needsDepth = true; // 启用深度检测
3. 执行顺序问题
后处理阶段按添加顺序执行，例如 Bloom 应在颜色校正之前：
scene.postProcessStages.add(colorCorrection); scene.postProcessStages.add(bloom); // 错误！Bloom 可能被覆盖
六、示例代码
const viewer = new Cesium.Viewer("cesiumContainer");
// 添加 FXAA 抗锯齿
const fxaa = Cesium.PostProcessStageLibrary.createFXAAStage();
viewer.scene.postProcessStages.add(fxaa);
// 添加自定义反色效果
const invertColor = new Cesium.PostProcessStage({
name: "InvertColor",
fragmentShader: `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
out vec4 fragColor;
void main() {
vec4 color = texture(colorTexture, v_textureCoordinates);
fragColor = vec4(1.0 - color.rgb, color.a);
}
`
});
viewer.scene.postProcessStages.add(invertColor);
// 动态控制效果
document.getElementById("toggleInvert").addEventListener("click", () => {
invertColor.enabled = !invertColor.enabled;
});七、高级技巧
1.多渲染目标（MRT）:
通过 PostProcessStage 的 pixelFormat 和 forcePowerOfTwo 参数优化渲染。
2.深度纹理访问:
在着色器中访问深度信息：
uniform sampler2D depthTexture; float depth = czm_readDepth(depthTexture, v_textureCoordinates);
3.兼容性处理:
检测 WebGL2 支持：
if (!viewer.scene.context.webgl2) {
console.log("WebGL2 not supported, disabling advanced effects.");
}总结
postProcessStages 是 Cesium 中实现高级视觉效果的核心工具。通过合理组合内置效果、编写自定义着色器，并注意性能优化，可以为三维场景添加丰富的后处理效果。使用时需重点关注执行顺序、深度处理以及设备兼容性问题。