CESIUM例子学习（十）——PostProcessStage（fog）

最新推荐文章于 2026-06-07 16:34:16 发布

原创

最新推荐文章于 2026-06-07 16:34:16 发布 · 5.2k 阅读

收录于

当前文章被以下社区和专栏收录：

cesium里的PostProcessStage功能是在1.46之后才加上去的。PostProcessStage算是cesium的高级应用了。很多动态绚丽效果都可以用它来完成，但是对开发者的要求也高一些，如果深入研究，需要GLSLS。关于PostProcessStage的执行的基本流程，http://www.bubuko.com/infodetail-2675940.html这篇博文讲得很仔细，可以收藏起来。

绘制雾的基本思路：在一定可见距离内（startDistance到endDistance），根据目标点离观察点的距离，设置某个颜色及其颜色透明度附加到原来场景颜色。当目标距离小于等于startDistance时，雾颜色和透明度完全不起作用，也就是没有雾的效果；当目标距离与观察点距离大于等于endDistance距离时，透明度设置为0，也就是只看到雾和。代码如下：

var fragmentShaderSource =
    ////计算每个渲染顶点和视点（相机）的距离
    "float getDistance(sampler2D depthTexture, vec2 texCoords) \n" +
    "{ \n" +
    "    float depth = czm_unpackDepth(texture2D(depthTexture, texCoords)); \n" +
    "    if (depth == 0.0) { \n" +
    "        return czm_infinity; \n" +
    "    } \n" +
    "    vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth); \n" +
    "    return -eyeCoordinate.z / eyeCoordinate.w; \n" +