Creator3D:shader12_水面波浪(二)

前言

想法是美好的，但现实是残酷的

预期效果展示

可能有人会有疑虑，之前都是实现效果展示，这次为啥是预期效果展示。因为按照菜鸟预期的构想实现的效果与预期的效果是有差别的。

正文

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"可获取源码