经纬志
首页 / Cesium / API 文档

PostProcessStage

先看结论

一个屏幕后处理步骤：拿上一帧的渲染结果当纹理，用自定义片元着色器整屏重算。 调色、反色、描边、扫描线都靠它。

最后验证 2026-11-03 · CesiumJS 1.121 · 更新 2026-10-28 · 引用本文
new Cesium.PostProcessStage({ fragmentShader, uniforms, textures, sampleMode, pixelFormat, pixelDatatype })

构造参数

参数类型默认说明
fragmentShaderstring必填GLSL 片元着色器源码，输出到 gl_FragColor
uniformsobject—自定义 uniform，值为数值、Cartesian2 或颜色
texturesobject—额外的 sampler2D 贴图，键名即变量名
sampleModePostProcessStageSampleModeNEAREST采样方式，需要平滑时改 LINEAR
pixelFormatPixelFormatRGBA输出纹理的通道格式
pixelDatatypePixelDatatypeUNSIGNED_BYTE输出纹理的数据类型，高动态范围用 FLOAT

常用成员与方法

成员类型 / 返回说明
enabledboolean关闭后该步骤被跳过，着色器与纹理仍保留
readyboolean着色器是否编译完成
namestring标识，便于在集合里查找
uniformsobject可运行时修改 uniform 值，用于动画参数
destroy()—释放程序与纹理

加入场景：scene.postProcessStages.add(stage)。集合内按加入顺序执行， 最后加入的最后生效。

示例

var invert = new Cesium.PostProcessStage({
  name: 'invert',
  fragmentShader: [
    'uniform sampler2D colorTexture;',
    'varying vec2 v_textureCoordinates;',
    'uniform float strength;',
    '',
    'void main() {',
    '  vec4 color = texture2D(colorTexture, v_textureCoordinates);',
    '  vec3 rgb = mix(color.rgb, 1.0 - color.rgb, strength);',
    '  gl_FragColor = vec4(rgb, color.a);',
    '}'
  ].join('\n'),
  uniforms: {
    strength: 0.6
  }
});

viewer.scene.postProcessStages.add(invert);

// 运行时调节强度；关闭用 enabled = false
invert.uniforms.strength = 1.0;
invert.enabled = false;

注意事项

  • 只能用 WebGL1 支持的 GLSL 写法：texture2D、varying、gl_FragColor，不能写 #version 300 es。
  • 输入纹理名固定为 colorTexture，纹理坐标固定为 v_textureCoordinates，改名取不到画面。
  • 全屏后处理每个像素都跑一次着色器，移动端叠加多层会明显掉帧，能合并的步骤尽量写进同一个 stage。
  • 后处理输出的 alpha 会参与最终合成，不透明场景下应原样透传 color.a，否则地球边缘发黑。
引用本文

经纬志（2026）。《PostProcessStage》。https://www.jingweizhi.com/cesium/api/post-process-stage.html（访问日期 2026-11-03）。