cesium中postProcessStages全面解析

在 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 中实现高级视觉效果的核心工具。通过合理组合内置效果、编写自定义着色器，并注意性能优化，可以为三维场景添加丰富的后处理效果。使用时需重点关注执行顺序、深度处理以及设备兼容性问题。