Cocos Shader实现纹理的动态波浪效果

一 效果预览

通过滑动条可调节波浪频率的快慢。

二 实现原理

对当前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