当前位置：首页 > news >正文

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

news 2026/3/27 5:11:43

本系列教程适合有前端基础以及一定三维GIS开发基础、想学习cesium高阶内容的同学，例如：WebGIS开发工程师、前端工程师、GIS专业学生和相关科研人员等。
视频版戳此处观看
文字版教程：
Cesium进阶教程（1）在cesium后处理中使用shadertoy的代码

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

实现思路

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

将前面的线性距离雾函数修改一下
这里我们得到像素点的世界坐标，并且减去当前位置的地球半径，得到当前像素点的高程。

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