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

自定义雾效后处理

读取深度纹理还原视距,按指数衰减把远处图元混向雾色。

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

深度贴图从哪来

PostProcessStage 会自动注入 depthTexture,前提是创建时不需要额外声明。片元着色器里用 czm_readDepth 取出 0 到 1 的深度值。

从深度到视距

深度值不是距离。把像素坐标 gl_FragCoord 与深度一起交给 czm_windowToEyeCoordinates,得到相机坐标系里的位置,length(eye) 才是米为单位的视距。

衰减曲线

1 - exp(-density * dist) 是标准指数雾,远处趋近 1。最后用 clamp 限制到 0.82,避免远景完全糊成一片。

uniform类型说明
densityfloat雾的浓度,单位 1/米
fogColorvec3雾色,0 到 1 的线性分量
depthTexturesampler2D由 Cesium 自动注入
v_textureCoordinatesvec2当前像素的纹理坐标

这份雾对模型、图元、地球表面同时生效;scene.fog 只影响大气与地表,两者可以叠加使用。