如何做一个水面波浪效果
本文参考自教程，并加上自己的一些心得体会。要想模拟现实中的波浪效果，首先我们需要对顶点的y坐标进行偏移，并且希望y坐标能随着时间变化而流畅变化，形成一种波的曲线。那么，自然而然地，我们想到了三角函数（sin、cos）来实现效果：
v.vertex.y = sin(v.vertex.x + _Time.y);
我们将shader对应的材质设置到plane上，效果如下：
我们可以加上振幅、周期等参数来进一步控制波浪的形状，运动速度和运动轨迹：
float _Amplitude;
float _Wavelength;
float _Speed;
float k = 2 * UNITY_PI / _Wavelength;
v.vertex.y = _Amplitude * sin(k * (v.vertex.x + _Speed * _Time.y));
效果如下：
由于我们现在使用的mesh其实还是plane，所以法向量还是默认的(0,1,0)，我们需要根据波浪的运动去计算正确的法向量。由于现在波浪只在x方向上运动，所以只需要计算tangent即可，binormal即为(0,0,1)。
有个tangent和binormal，我们就可以利用叉乘计算出法向量：
float k = 2 * UNITY_PI / _Wavelength;
float f = k * (v.vertex.x + _Speed * _Time.y);
v.vertex.y = _Amplitude * sin(f);
float3 tangent = float3(1, _Amplitude * k * cos(f), 0);
float3 binormal = float3(0, 0, 1);
float3 normal = cross(binormal, tangent);
有了正确的法向量，效果就好多了：
但是，只是普通的正弦波并不能完全反映出水面的波浪起伏，它没有办法描述水面随着波浪前进后退的效果。这里，我们借助大名鼎鼎的Gerstner wave来模拟这一效果。那么，我们也要在顶点的y改变时同时改变一下x：
float k = 2 * UNITY_PI / _Wavelength;
float f = k * (v.vertex.x + _Speed * _Time.y);
v.vertex.x += _Amplitude * cos(f);
v.vertex.y = _Amplitude * sin(f);
同样地，我们需要调整一下法向量的计算：
float3 tangent = float3(1 - _Amplitude * k * sin(f), _Amplitude * k * cos(f), 0);
float3 binormal = float3(0, 0, 1);
float3 normal = cross(binormal, tangent);
值得一提的是，我们需要注意调整振幅和波长的大小，当振幅过大而波长过小时，容易出现波浪往上卷的现象（例如设置_Amplitude为5，_Wavelength为10）：
接下来，我们希望波浪不是仅仅沿着x方向运动，而是可以沿着设定的某一个方向向量运动。那么如法炮制：
float k = 2 * UNITY_PI / _Wavelength;
float2 d = normalize(_Direction);
float f = k * (dot(d, v.vertex.xz) + _Speed * _Time.y);
v.vertex.x += _Amplitude * d.x * cos(f);
v.vertex.y = _Amplitude * sin(f);
v.vertex.z += _Amplitude * d.y * cos(f);
当然，法向量也要随之调整，此时的binormal不再是(0,0,1)：
float3 tangent = float3(1 - _Amplitude * k * d.x * d.x * sin(f), _Amplitude * k * d.x * cos(f), -_Amplitude * k * d.x * d.y * sin(f));
float3 binormal = float3(-_Amplitude * k * d.x * d.y * sin(f), _Amplitude * k * d.y * cos(f), 1 - _Amplitude * k * d.y * d.y * sin(f));
float3 normal = normalize(cross(binormal, tangent));
最后，我们希望能够叠加多个Gerstner wave，让波浪起伏的效果更加复杂化生动化。我们可以先将一个wave用到的方向，振幅，波长参数整合为一个4维向量，然后抽出一个公共的函数来：
_WaveA ("Direction (2D), Amplitude, Wavelength", Vector) = (1,0,1,10)
float3 GerstnerWave (float4 wave, float3 p, inout float3 tangent, inout float3 binormal)
{
float2 direction = wave.xy;
float amplitude = wave.z;
float waveLength = wave.w;
float k = 2 * UNITY_PI / waveLength;
float2 d = normalize(direction);
float f = k * (dot(d, p.xz) + _Speed * _Time.y);
tangent += float3
(
-amplitude * k * d.x * d.x * sin(f),
amplitude * k * d.x * cos(f),
-amplitude * k * d.x * d.y * sin(f)
);
binormal += float3
(
-amplitude * k * d.x * d.y * sin(f),
amplitude * k * d.y * cos(f),
-amplitude * k * d.y * d.y * sin(f)
);
return float3
(
amplitude * d.x * cos(f),
amplitude * sin(f),
amplitude * d.y * cos(f)
);
}
float3 tangent = float3(1, 0, 0);
float3 binormal = float3(0, 0, 1);
float3 p = v.vertex.xyz;
v.vertex.xyz += GerstnerWave(_WaveA, p, tangent, binormal);
float3 normal = normalize(cross(binormal, tangent));
这样，想叠加几个波，就只需增加一下外部参数即可：
v.vertex.xyz += GerstnerWave(_WaveA, p, tangent, binormal);
v.vertex.xyz += GerstnerWave(_WaveB, p, tangent, binormal);
v.vertex.xyz += GerstnerWave(_WaveC, p, tangent, binormal);
如果你觉得我的文章有帮助，欢迎关注我的微信公众号（大龄社畜的游戏开发之路）-
