如上动画，类似动画中的水波效果在生活很常见，在计算机中这类视觉特效常用于海浪,水波,旗帜飘动等。本文这里对水波的简单实现做一下讲解，动画开始的水泡是用Metaball来实现的，之前文章有解析过这里不在讲解。
一.分析
从动画上来看，我们可以很清除的看到，这种水波的运动可以看作是像素的位移，但这种位移不同于日常中的位移，日常中或计算机中的位移属于整体位移即通常是平移，但该动画中明显每个像素的偏移都不一样或者说周期性的偏移，理解到这一点我们实现的原理就非常容易了。
方法一.直接在顶点着色器中改变顶点位置
方法二.在片元着色器中改变成附近点的颜色，怎么理解，当我们将uv作为输入带入到一个f函数,该f函数得到一个新的uv’(是原uv附近一点)，然后我们取texture2D(u_texture,uv’)就动画上就能感知到偏移。
通常我们在片元着色器来做这件事，因为片元着色器还可以处理颜色光照等。
二.实现
经过上述分析后，实现水波就变得很简单，难的是怎么构建f函数 来得到一个更接近我们需求或者更逼真的动画。
开头的水波通过下面wave函数就可以实现：
vec2 wave(vec2 uv) {
float amplitude = 0.015;
float frequency = 1.;
float x = sin(30. * uv.x + 8.* u_time) * amplitude; //x随sin函数波动
float y = sin(10. * uv.y + 8.* u_time) * amplitude; //y随sin函数波动
return vec2(uv.x + x, uv.y + y);
}
void main() {
//vec2 uv = v_uv;
vec2 uv = wave(v_uv); //改变x,y得到一个x,y附近的随机值
vec4 color = texture2D(u_texture, uv);
if (color.a == 0.0) { //透明区域改成黑色
color = vec4(10.0/255.0, 10.0/255.0, 10.0/255.0, 1.0);
}
gl_FragColor = color;
}
x,y通过构建一个sin函数,因子为u_time(必要),uv.x,uv.y. 将uv.x,uv.y也作为因子是为了防止动画偏移太整齐太单一。
再将得到的x,y偏移累加在uv上。即每一帧该像素偏移了x,y
注: uv.x 前乘以30使得x轴有一个明显的拉伸效果。
三.改版
上述实现了开头的动画，但是看着还是不太对劲，波动不太自然的感觉。分析一下偏移我们可以得到
1.x随sin函数波动作为偏移量 受uv.x影响 即y相同情况下 x偏移一样
2.y随sin函数波动作为偏移量 受uv.y影响 即x相同情况下 y偏移一样
这样的变化还是太规律，我们尝试一些变化，如下：
vec2 shift( vec2 p ) {
float x = frequency * (p.x + 3.*u_time*speed); // x与p.x,u_time成正比
float y = frequency * (p.y + 3.*u_time*speed); // y与p.y,u_time成正比
vec2 q = cos(vec2(cos(x-y)*cos(y), sin(x+y)*sin(y))); //q属于cos周期函数的值,随x,y变化 变化没有那么单一
return q;
}
void main() {
vec2 r = v_uv;
vec2 p = shift( r ); //[-1,1]
r += 1.0;
vec2 q = shift(r); //[-1,1]
float amplitude = 2.0 / 300.0; //控制幅度
vec2 s = v_uv + amplitude * (p - q); //得到p,q的差值x幅度得到累加值
vec4 color = texture2D(u_texture, s);
if (color.a == 0.0) { //透明区域改成黑色
color = vec4(10.0/255.0, 10.0/255.0, 10.0/255.0, 1.0);
}
gl_FragColor = color;
}
在shift函数中cos(vec2(cos(x-y)*cos(y), sin(x+y)*sin(y)))，x,y相互影响，使变化更加的随机一些。
我们再来看一下效果：
果然，波动相对自然了一些
四.总结
水波总的来说是像素在定义的周期下函数下做周期性运动。如何构造周期性函数是动画的关键,更复杂的例如3D的水波还值得我们继续探索。
完整代码