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

手把手教你用Cesium Shader实现带动态倒影的逼真水面（附完整源码）

news 2026/4/25 4:45:25

手把手教你用Cesium Shader实现带动态倒影的逼真水面（附完整源码）

在三维地理可视化领域，Cesium凭借其强大的渲染能力成为行业标杆。当我们需要在数字地球表面添加水域效果时，简单的蓝色平面往往难以满足真实感需求。本文将带你从零开始，通过Shader编程实现一个包含动态波纹和天空倒影的逼真水面效果，让虚拟水域"活"起来。

1. 环境准备与基础搭建

1.1 创建基础Cesium场景

首先确保已配置Cesium开发环境。推荐使用npm安装最新版Cesium：

npm install cesium

创建基础HTML文件，引入Cesium库并初始化Viewer：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cesium Water Shader Demo</title> <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="cesiumContainer"></div> <script> Cesium.Ion.defaultAccessToken = 'your_access_token'; const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); </script> </body> </html>

1.2 准备天空盒资源

动态倒影效果需要立方体贴图作为反射源。准备6张分辨率为1024x1024的天空盒图片，命名规范如下：

方向	文件名	对应轴
右	px.png	+X
左	nx.png	-X
上	py.png	+Y
下	ny.png	-Y
前	pz.png	+Z
后	nz.png	-Z

将图片放入项目/assets/skybox/目录，后续将通过uniforms传入Shader。

2. Shader核心原理剖析

2.1 水面波纹算法

动态波纹采用分形噪声叠加实现，核心参数包括：

const float SEA_HEIGHT = 0.6; // 波纹振幅 const float SEA_CHOPPY = 4.0; // 波纹锐度 const float SEA_SPEED = 1.8; // 波动速度 const float SEA_FREQ = 0.16; // 基础频率

噪声生成函数采用经典的Perlin噪声变体：

float sea_octave(vec2 uv, float choppy) { uv += noise(uv); vec2 wv = 1.0 - abs(sin(uv)); vec2 swv = abs(cos(uv)); wv = mix(wv, swv, wv); return pow(1.0 - pow(wv.x * wv.y, 0.65), choppy); }

2.2 倒影实现机制

倒影效果通过反射光线计算实现，关键步骤包括：

计算入射光线与水面法线的反射向量
根据反射方向确定采样天空盒的哪一面
进行双线性纹理采样获取环境颜色

vec3 inDir = normalize(positionWC - cameraPos); vec3 refDir = normalize(reflect(inDir, planeNor)); vec2 dirOnPlane = normalize(vec2(refDir.x, refDir.y)); float theta = acos(dot(refDir, vec3(0,0,1.0))); float len = tan(theta); vec2 interPos = len * dirOnPlane; vec2 uvSky = (interPos + 1.0) / 2.0; vec3 skyColor = texture2D(skyBoxU, uvSky).rgb;

3. 完整Shader代码实现

3.1 材质定义与参数配置

创建Cesium Material时，需要传入天空盒纹理和时间参数：

const material = new Cesium.Material({ fabric: { uniforms: { iTime: 0, planeNor: planeNor, skyBoxU: './assets/skybox/py.png', skyBoxD: './assets/skybox/ny.png', skyBoxR: './assets/skybox/px.png', skyBoxL: './assets/skybox/nx.png', skyBoxF: './assets/skybox/nz.png', skyBoxB: './assets/skybox/pz.png' }, source: `/* 完整Shader代码见下一节 */` } });

3.2 片段着色器核心代码

完整的水面渲染算法实现：

vec4 czm_getMaterial(vec2 vUv, vec3 positionWC) { // 波纹生成 float SEA_TIME = 1.0 + iTime * SEA_SPEED; vec3 p = vec3(vUv.x * 100.0, 0.0, vUv.y * 100.0); float height = map_detailed(p); // 法线计算 vec3 n = getNormal(p, 0.02); // 反射计算 vec3 cameraPos = czm_encodedCameraPositionMCHigh + czm_encodedCameraPositionMCLow; vec3 inDir = normalize(positionWC - cameraPos); vec3 refDir = normalize(reflect(inDir, planeNor)); // 天空盒采样 vec3 skyColor = sampleSkyBox(refDir); // 水面颜色合成 vec3 waterColor = mix(SEA_BASE, SEA_WATER_COLOR, height); vec3 finalColor = mix(waterColor, skyColor, 0.6); return vec4(finalColor, 0.8); }

4. 性能优化与问题排查

4.1 常见问题解决方案

问题1：倒影边缘出现锯齿

解决方案：增加天空盒分辨率或启用Mipmap
修改采样代码：

texture2D(skyBoxU, uvSky, 1.0);

问题2：水面闪烁

原因：Z-fighting导致
解决方法：增加水面与地形的偏移量

const offset = new Cesium.Cartesian3(0, 0, 0.1); const position = Cesium.Cartesian3.add(planePos, offset, new Cesium.Cartesian3());

4.2 移动端优化技巧

降低波纹迭代次数：

const int ITER_GEOMETRY = 2; // 原为3 const int ITER_FRAGMENT = 3; // 原为5

使用低分辨率天空盒（512x512）
简化光照计算：

float diffuse = max(dot(n, l), 0.2);

5. 进阶效果扩展

5.1 添加岸边泡沫效果

通过距离场计算实现岸边白色泡沫：

float shoreFactor = smoothstep(0.0, 0.1, abs(height)); vec3 foam = vec3(shoreFactor * 0.8); finalColor += foam;

5.2 动态天气集成

根据天气参数调整水面表现：

天气类型	波纹幅度	水面颜色	反射强度
晴天	0.4	(0.8,0.9,0.6)	0.7
阴天	0.6	(0.5,0.6,0.7)	0.4
暴雨	1.2	(0.3,0.4,0.5)	0.2

实现代码：

uniform float weatherType; // 0-1范围 float dynamicChopper = mix(0.4, 1.2, weatherType); vec3 dynamicColor = mix(vec3(0.8,0.9,0.6), vec3(0.3,0.4,0.5), weatherType);

在实际项目中，我发现将水面Shader与Cesium的后期处理系统结合，可以实现更惊艳的效果。比如添加屏幕空间反射(SSR)能增强细节表现，但需要注意性能平衡。

查看全文

http://www.jsqmd.com/news/696161/