经纬志
首页 / Cesium / 使用示例

着色器水波材质

一块贴地的多边形,表面颜色由片元着色器算出:两组正弦波叠加, 波峰处偏亮,波谷处偏深,时间取自内置帧计数。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

fabric 的两个字段

new Cesium.Material({fabric: {...}}) 里 type 是自定义材质名, source 放 GLSL 源码,函数名必须叫 czm_getMaterial, 参数是一个 czm_materialInput,返回值是 czm_material。

着色器里可以直接用 materialInput.st,它对应几何的纹理坐标。 示例把两个不同频率的正弦函数加在 st 上,得到交叉的波纹。

时间从哪来

czm_frameNumber 是 Cesium 每帧递增的内置变量,不需要自己传 uniform。 用它乘以一个小系数当相位偏移,水面就会持续流动, 求值完全在 GPU 侧完成,JS 每帧没有任何额外工作。

可调参数

位置改什么效果
czm_frameNumber * 0.02系数改 0.08波纹流动更快
st.x * 26.0改成 8.0横向波长变长
deep / crest换一组颜色水体色调改变
material.alpha调低到 0.6能看见池底

几何要带纹理坐标。自定义材质依赖 materialInput.st, 创建几何时必须给 vertexFormat,示例用的是 EllipsoidSurfaceAppearance.VERTEX_FORMAT。 缺了它,st 全是 0,波纹会变成一整块纯色。