首页 / Cesium / 使用示例
着色器水波材质
一块贴地的多边形,表面颜色由片元着色器算出:两组正弦波叠加, 波峰处偏亮,波谷处偏深,时间取自内置帧计数。
源码与运行效果
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,波纹会变成一整块纯色。