前言
想法是美好的，但现实是残酷的
预期效果展示
可能有人会有疑虑，之前都是实现效果展示，这次为啥是预期效果展示。因为按照菜鸟预期的构想实现的效果与预期的效果是有差别的。
正文
1.实现原理
主要的效果实现还是基于正弦曲线。
在上一节 Creator3D:shader11_水面波浪(一) 中，水面波浪的变化是基于顶点坐标x的变化而变化。
其实也可以修改代码设置为基于z轴坐标的变化而变化
float y=sin(v_position.x*frequency+cc_time.x*speed)*power;
改为
float y=sin(v_position.z*frequency+cc_time.x*speed)*power;
本次菜鸟想实现的效果是上边预期效果中展示的那样，非朝一个方向的扩展，而是由一点向四周扩散的效果。
实现思路：
- 确定扩散中心点坐标
- 判断顶点与中心点的距离
- 获取基于顶点到中心点距离的正弦曲线
2.实现
2.1代码
添加属性
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
centerPos: { value: [1, 1, 1, 1]}
power: { value: 0.1 }
frequency: { value: 0.1}
speed: { value: 2}
指定类型
CCProgram watter-props %{
uniform Constants {
vec4 centerPos;
float power;
float frequency;
float speed;
};
}%
//计算每个顶点到波纹中心点的距离
float dis=distance(centerPos.xyz,v_position.xyz);
float y=sin(dis*frequency+cc_time.x*speed)*power;
v_position.y+=y;
vec4 outPut=cc_matProj * (cc_matView) * vec4(v_position,1.0);
return outPut;
2.2 解析
在实现效果中用plane平面模型来代替水面，设置合适的贴图。大家都清楚，模型是由一个一个的三角形组成的面组成，而组成三角形并且连接每个三角形的是一个一个的点，也就是咱们所说的顶点。
那么plane平面的顶点到底是以怎样的形式存在的，大家可以看一下图
左图是plane实际渲染到屏幕的效果。右图是plane的网格图，能够清楚的看到三角形面的组成以及顶点的分布。
那么为啥实际效果与预期效果会不同呢。
根据上边的图看
- 假设中心点在最中间，白色圈是sin正弦值从0-1上升的过程白色圈到红色圈是sin正弦值1-0下降的过程，
- p1,p2,p5三点都在白色圈上，是最高点。但是问题就出在p2点，从图中大家能看出p1,p5是顶点，但是p2不是。那么中心点到p4点的最高顶点就在p0点了，
- 在p0点后，下一个顶点是p3,而p3已经处于下降过程，最终结果导致中心点到p4这条线上，没有到达最高点就开始下降，
- 简单来说就是距中心点距离相等的点不一定都是顶点。
最终效果就是：
2.3 最终效果
虽然与预期的效果有差距，但还是可以的。环形扩散的效果有时间研究一下用其他的方式实现。
3.地址
- 微信公众号：搬砖小菜鸟
扫码关注公众号，发送"gitee"可获取源码
…