经纬志
首页 / Cesium / 使用示例

自定义后处理调色

一段二十行的片元着色器,把整帧画面在三种色调之间混合。 强度滑杆从 0 到 1,能看到调色从无到完全覆盖的过程。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

着色器的固定接口

片元着色器必须声明 uniform sampler2D colorTexture 接收上一帧结果, 以及 in vec2 v_textureCoordinates 作为屏幕坐标。 输出写到 out_FragColor,Cesium 会把它合到画面上。

示例还声明了两个自定义 uniform:uAmount 控制混合强度, uMode 用两个阈值区分三种模式。写法上多用 mix, 避免模式切换时画面跳变。

挂到场景上

scene.postProcessStages.add(new Cesium.PostProcessStage({...})) 返回阶段对象,之后改 stage.uniforms.uAmount 就能实时生效, stage.enabled 控制是否执行。

可调参数

位置改什么效果
强度滑杆0 到 1调色覆盖程度
模式下拉框灰度 / 反相 / 棕褐三种色调
SHADER 的亮度系数改成 0.6灰度偏暗
阶段顺序再加一个相同阶段效果叠加,强度翻倍

后处理作用于整帧。包括界面上的点、标签和地球影像都会被一起调色, 这不是图层级的滤镜。只想处理某一层时,应该用材质的颜色参数, 而不是后处理阶段。