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

往期内容：

Cesium进阶教程（1）customShader的使用

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

实现思路

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

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

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

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中获取当前的地球半径

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高度的雾，会呈现渐变效果。

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);
}

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

// 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);
}

最终效果

看不明白没关系，需要上述视频教程+源码

+下方↓↓小助手【cesium进阶】无偿获取