Cesium进阶教程（2）线性高度雾

本系列教程适合有前端基础以及一定三维GIS开发基础、想学习cesium高阶内容的同学，例如：WebGIS开发工程师、前端工程师、GIS专业学生和相关科研人员等。
视频版戳此处观看

文字版教程：
Cesium进阶教程（1）在cesium后处理中使用shadertoy的代码

高度雾：根据高度进行雾化的一种现象，可以增加场景的真实感与立体感，使渲染效果更加接近现实环境。

实现思路

获取像素点的世界坐标。
根据像素点的世界坐标计算高程。
根据高程计算雾化值。
根据雾化值混合场景原来的颜色和雾化颜色。

将前面的线性距离雾函数修改一下

这里我们得到像素点的世界坐标，并且减去当前位置的地球半径，得到当前像素点的高程。

glsl 复制代码

float getDistance(sampler2D depthTexture, vec2 texCoords) {
    float depth = czm_unpackDepth(texture2D(depthTexture, texCoords));
    vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
    vec3 eyeCoordinate3 = eyeCoordinate.xyz / eyeCoordinate.w;
    vec4 worldCoordinate4 = czm_inverseView * vec4(eyeCoordinate3, 1.);
    vec3 worldCoordinate = worldCoordinate4.xyz / worldCoordinate4.w;
    return length(worldCoordinate.xyz) - earthRadius; //当前高度
}

同步的，我们在js中获取当前的地球半径

javascript 复制代码

earthRadius = Cesium.Cartesian3.magnitude(viewer.camera.positionWC) - viewer.camera.positionCartographic.height;

接下来，我们根据高程计算雾化因子

这里传入参数fogByHeight：new Cesium.Cartesian4(0, 0.7, 1000, 0.0)

含义为，最低的雾高度为0，雾的强度为0.7，最高的雾高度为1000，强度为0，0-1000m高度的雾，会呈现渐变效果。

glsl 复制代码

float interpolateByDistance(vec4 nearFarScalar, float distance) {
float startDistance = nearFarScalar.x;
float startValue = nearFarScalar.y;
float endDistance = nearFarScalar.z;
float endValue = nearFarScalar.w;
float t = clamp((distance - startDistance) / (endDistance - startDistance), 0.0, 1.0);
return mix(startValue, endValue, t);
}

然后将雾的透明度混合到当前的场景中

glsl 复制代码

// alpha混合
vec4 alphaBlend(vec4 sourceColor, vec4 destinationColor) {
    return sourceColor * vec4(sourceColor.aaa, 1.0) + destinationColor * (1.0 - sourceColor.a);
}

void main(void) {
    // 获取当前地面到相机的距离
    float distanceFog = getDistance(depthTexture, v_textureCoordinates);
// 获取场景本身的颜色
    vec4 col = texture2D(colorTexture, v_textureCoordinates);
// 计算雾化因子
    float fogRate = interpolateByDistance(fogByHeight, distanceFog);
    vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * fogRate);
    gl_FragColor = alphaBlend(finalFogColor, col);
}

最终效果

看不明白没关系，需要上述视频教程+源码的同学可以直接