前言
首先咱们回顾一下之前的两篇关于水面的文章
在上边的这两篇文章中，水面的动态效果都是基于顶点着色器，也就是模型的顶点来实现的。
其中在第二篇文章中，菜鸟预期是实现一个波浪扩散的效果，但是最终没有实现。于是菜鸟下去专门研究了一下，终于研究出来了。
效果展示
正文
1.UV是什么？
在顶点着色器中我们能看见一行代码：
v_uv = a_texCoord;
那么UV，也就是a_texCoord到底表示的是什么？
大家都清楚，对于三维的模型，有一个重要的三维坐标系统：顶点坐标（x,y,z）。但是除了这个，还有另一个重要的坐标系统：UV坐标。
什么是UV，简单来说就是切图映射到模型表面的依据。U代表图片在水平方向的坐标，V代表图片在垂直方向的坐标。
U,V的取值都是0~1,也就是（水平方向的第U个像素/图片宽度，垂直方向的第V个像素/图片高度）。它定义了图片上每个点的位置的信息. 这些点与3D模型是相互联系的, 以决定表面纹理贴图的位置. UV就是将图像上每一个点精确对应到模型物体的表面. 在点与点之间的间隙位置由软件进行图像光滑插值处理. 这就是所谓的UV贴图.
2.涟漪
仔细看图，大家可能就会发现，涟漪的效果实际上也就是咱们最常用的正弦曲线，
实现原理
了解了uv，也了解了涟漪的原理，那么怎样将这两点结合起来，实现咱们需要的效果呢。
- 确定扩散起始点startPos，也就是中心点。因为startPos是与uv坐标进行计算，所以他是一个vec2类型。同时uv坐标坐标的x,y范围是（0~1）.
- 扩散方向：uv的扩散方向实际是中心点到其本身的法线方向的偏移，
- 扩散，也就是波速，利用cc_timer.x时间控制
3.代码
//计算uv到起点的向量
vec2 dv = startPos - v_uv;
//计算向量的长度
float dis = sqrt(dv.x * dv.x + dv.y * dv.y);
//更具扩散范围计算power
float p=(power/range)*((range-dis)>0.0 ? range-dis : 0.0);
float sinFactor = sin(dis*frequency-cc_time.x*speed)*0.01*p;
//归一化
vec2 dv1=normalize(dv);
//计算每个像素uv的偏移量
vec2 offset= dv1 * sinFactor;
// //偏移
vec2 uv=offset+v_uv;
4.地址
- 微信公众号：搬砖小菜鸟
扫码关注公众号，发送"水面涟漪"可获取源码
