一 效果预览
通过滑动条可调节波浪频率的快慢。
二 实现原理
对当前uv坐标进行线性+三角函数的混合变换,结合动态变化的时间值,得到一个新的采样坐标,使纹理呈现出动态、起伏不定的波浪形态。
Shader
中的关键代码如下。
// 得到波浪效果的新坐标
vec2 new_uv = wave(v_uv0) - wave(v_uv0+u_size);
// 2.0/u_size.x用来缩放波浪大小,控制水面形状
vec2 uv = v_uv0 + 2.0 / u_size.x * new_uv;
o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv);
其中,u_size
参数由应用层传递给Shader
,代表纹理的尺寸。wave是个自定义函数,根据当前位置返回波浪效果后的新坐标,代码如下。
// 计算出波浪效果的新坐标
vec2 wave(in vec2 p) {
float range = 8.0; // 波浪效果的起伏幅度
floa