Cesium 1.62 实战：手把手教你用Shader实现带天空盒倒影的动态水面（附完整源码）

Cesium 1.62 实战：手把手教你用Shader实现带天空盒倒影的动态水面（附完整源码）

在三维地理信息可视化领域，Cesium一直是开发者构建逼真地球场景的首选引擎。当我们需要在数字孪生、智慧城市等项目中模拟真实水域效果时，动态水面结合环境倒影的技术实现尤为关键。本文将基于Cesium 1.62版本，通过原生Shader编程实现一个包含动态波纹和天空盒倒影的复合水面效果，从原理剖析到完整代码实现，为开发者提供可直接集成到生产环境的解决方案。

1. 环境准备与基础配置

1.1 创建项目结构

首先建立标准的Cesium项目目录，建议采用以下结构：

/water-reflection-demo ├── /Build // Cesium库文件 ├── /img // 天空盒图片资源 │ ├── px.png // 右视图 │ ├── nx.png // 左视图 │ ├── py.png // 上视图 │ ├── ny.png // 下视图 │ ├── pz.png // 前视图 │ └── nz.png // 后视图 └── index.html // 主入口文件

1.2 关键依赖配置

在HTML头部引入Cesium核心库时需注意版本匹配：

<script src="Build/Cesium/Cesium.js"></script> <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">

提示：确保使用的Cesium版本严格为1.62，不同版本间Shader编译规则可能存在差异

2. 天空盒系统搭建

2.1 立方体贴图原理

天空盒倒影效果依赖于立方体贴图采样，Cesium 1.62中需要手动处理六个方向的贴图：

2.2 贴图加载优化

通过Material的uniforms传递贴图路径：

uniforms: { skyBoxU: './img/py.png', skyBoxD: './img/ny.png', // ...其他四个方向贴图 }

3. 动态水面Shader核心算法

3.1 波纹生成算法

采用分形噪声(Fractal Noise)模拟自然水波，关键参数包括：

• SEA_HEIGHT: 基础波高(0.6)
• SEA_CHOPPY: 波纹锐度(4.0)
• SEA_SPEED: 波动速度(1.8)
• SEA_FREQ: 波纹密度(0.16)

核心噪声函数实现：

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

3.2 倒影计算原理

通过反射向量确定采样位置：

vec3 inDir = normalize(positionWC - cameraPos); vec3 refDir = normalize(reflect(inDir, planeNor));

根据反射方向选择对应的天空盒面进行采样：

if(refDir.z<0.0){ // 采样下视图 skyColor = texture2D(skyBoxD,uvSky).rgb; } else if(thetaX<PI/4.0){ // 采样右视图 skyColor = texture2D(skyBoxR,uvSky).rgb; } // 其他面判断逻辑...

4. 完整实现与性能优化

4.1 几何体设置

创建作为水面载体的平面几何体：

var box = new Cesium.BoxGeometry({ vertexFormat: Cesium.VertexFormat.POSITION_NORMAL_AND_ST, maximum: new Cesium.Cartesian3(250000.0, 250000.0, 0), minimum: new Cesium.Cartesian3(-250000.0, -250000.0, 0) });

4.2 材质系统配置

构建包含双Shader的自定义材质：

let aper = new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { uniforms: { /*...*/ }, source: `/* 片段着色器代码 */` } }), vertexShaderSource: `/* 顶点着色器代码 */`, fragmentShaderSource: `/* 片段着色器入口 */` });

4.3 实时动画更新

通过requestAnimationFrame驱动时间变量：

function renderLoop(timestamp){ aper.material.uniforms.iTime = timestamp/1000; requestAnimationFrame(renderLoop); }

5. 实战调试技巧

5.1 常见问题排查

• 贴图采样异常：检查天空盒图片尺寸是否为2的幂次方
• 波纹不明显：调整SEA_CHOPPY和SEA_HEIGHT参数
• 性能瓶颈：减少ITER_GEOMETRY迭代次数(默认3次)

5.2 移动端适配建议

• 降低ITER_FRAGMENT值(默认5次)
• 使用压缩格式的天空盒贴图(PVRTC/ETC)
• 禁用高精度浮点运算(precision mediump float)

完整项目代码已托管至开源平台，包含详细注释和可调参数说明。在实际智慧水务项目中应用该方案时，建议结合具体业务需求调整水色参数和波动频率，必要时可扩展支持多光源反射效果。