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

自定义后处理:像素化

写第一个自定义 PostProcessStage,用取整的纹理坐标做出像素化效果。

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

最小可用的后处理

一个 PostProcessStage 只要两样东西:片元着色器字符串和可选的 uniforms。Cesium 会自动提供 colorTexture 与 v_textureCoordinates。

为什么坐标要乘再除

floor(uv * pixels) / pixels 把连续坐标吸附到格点。乘的数越大格子越细;同一格内的像素采到同一个颜色,就形成了色块。

输出变量

结果必须写进 out_FragColor。这是 Cesium 在拼着色器时定义的输出变量,写成 gl_FragColor 在某些设备上会直接黑屏。

位置类型说明
colorTexturesampler2D上一帧的渲染结果
uniforms.pixelsfloat横向格数
fragmentShaderstringGLSL 片元着色器
out_FragColorvec4必须写入的输出

多个后处理阶段按加入顺序执行,后者读到的是前者的输出,可以串联出「先像素化再描边」这类效果。