如何做一个水面波浪效果

本文参考自教程，并加上自己的一些心得体会。要想模拟现实中的波浪效果，首先我们需要对顶点的y坐标进行偏移，并且希望y坐标能随着时间变化而流畅变化，形成一种波的曲线。那么，自然而然地，我们想到了三角函数（sin、cos）来实现效果：

                v.vertex.y = sin(v.vertex.x + _Time.y);

我们将shader对应的材质设置到plane上，效果如下：

如何做一个水面波浪效果1.gif

我们可以加上振幅、周期等参数来进一步控制波浪的形状，运动速度和运动轨迹：

            float _Amplitude;
            float _Wavelength;
            float _Speed;
            
           float k = 2 * UNITY_PI / _Wavelength;
            v.vertex.y = _Amplitude * sin(k * (v.vertex.x + _Speed * _Time.y));

效果如下：

如何做一个水面波浪效果2.gif

由于我们现在使用的mesh其实还是plane，所以法向量还是默认的(0,1,0)，我们需要根据波浪的运动去计算正确的法向量。由于现在波浪只在x方向上运动，所以只需要计算tangent即可，binormal即为(0,0,1)。
$tangent=(dx, dy, 0) = (1, akcos(k(x + st)), 0)$
有个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);

有了正确的法向量，效果就好多了：

如何做一个水面波浪效果3.gif

但是，只是普通的正弦波并不能完全反映出水面的波浪起伏，它没有办法描述水面随着波浪前进后退的效果。这里，我们借助大名鼎鼎的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);

如何做一个水面波浪效果4.gif

同样地，我们需要调整一下法向量的计算：
$tangent=(dx, dy, 0) = (1 - aksin(k(s + st)), akcos(k(x + st)), 0)$

float3 tangent = float3(1 - _Amplitude * k * sin(f), _Amplitude * k * cos(f), 0);
float3 binormal = float3(0, 0, 1);
float3 normal = cross(binormal, tangent);

如何做一个水面波浪效果5.gif

值得一提的是，我们需要注意调整振幅和波长的大小，当振幅过大而波长过小时，容易出现波浪往上卷的现象（例如设置_Amplitude为5，_Wavelength为10）：

如何做一个水面波浪效果6.gif

接下来，我们希望波浪不是仅仅沿着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);

如何做一个水面波浪效果7.gif

当然，法向量也要随之调整，此时的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));

如何做一个水面波浪效果8.gif

最后，我们希望能够叠加多个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);

如何做一个水面波浪效果9.gif

如果你觉得我的文章有帮助，欢迎关注我的微信公众号（大龄社畜的游戏开发之路）^-