如何做一个水面流动效果

本文参考自教程，并加上自己的一些心得体会。所谓的水面流动，就是对给定的纹理贴图进行采样，使其随着时间流动，呈现有规则地沿着某一方向连续，但是又不完全有规律的效果。

首先，我们用到的贴图是一张高度图，ag通道分别代表高度在x和y方向上的导数，b通道保存真实的高度数据。先让我们直接对贴图进行采样，我们用高度数据作为最后的颜色输出：

            float3 UnpackDerivativeHeight (float4 textureData) 
            {
                float3 dh = textureData.agb;
                dh.xy = 2 * dh.xy - 1;
                return dh;
            }

            float3 dh = UnpackDerivativeHeight(tex2D(_MainTex, i.uv));
            float4 texColor = dh.z * dh.z * _Color;
            float3 tangentNormal = normalize(float3(-dh.x, -dh.y, 1));

如何做一个水面流动效果1.png

接下来，我们希望它能沿着某一个方向动起来，为了实现这一效果，需要旋转整张贴图的uv，例如我们尝试着旋转45度：

            float2 RotateUV(float2 uv, float2 rotVec)
            {
                rotVec = normalize(rotVec);
                float2x2 mat = float2x2(rotVec.y, -rotVec.x, rotVec.x, rotVec.y);
                return mul(mat, uv);
            }

这里我们传入的参数并非是一个旋转的角度，而是一个向量，但实际上两者是等价的。已知旋转矩阵为：
$\begin{bmatrix} cos\theta & -sin\theta \\ sin\theta & cos\theta \end{bmatrix}$
又知道 $sin^2\theta + cos^2\theta = 1$ ，那么我们可以用一个归一化的向量 $\vec{v} = (sin\theta, cos\theta)$ 来表示旋转。效果如下：

如何做一个水面流动效果2.png

接下来我们让它动起来，设置旋转向量为一个随时间变化的向量：

            float2 uv = RotateUV(i.uv, float2(cos(_Time.y), sin(_Time.y)));

如何做一个水面流动效果3.gif

仔细观察，会发现高光的效果不太对，高光并不是跟随着纹理旋转而旋转的，原因是我们在旋转高度贴图时，没有相应地对贴图描述的法线也进行旋转，那么我们把计算得到的旋转矩阵暴露出来：

            float2 RotateUV(float2 uv, float2 rotVec, out float2x2 mat)
            {
                rotVec = normalize(rotVec);
                mat = float2x2(rotVec.y, -rotVec.x, rotVec.x, rotVec.y);
                return mul(mat, uv);
            }
            dh.xy = mul(rotMat, dh.xy);

如何做一个水面流动效果4.gif

我们希望把旋转向量记录在一张单独的贴图中，这样就可以根据uv采样得到不同的旋转向量，然后让uv随着时间不断位移，从而获得沿着某个方向移动的效果。甚至，我们可以利用这张贴图附加一个速度信息，控制uv随着时间位移的速度：

               float3 flowVec = tex2D(_FlowMap, i.uv).rgb;
                flowVec.xy = 2 * flowVec.xy - 1;
               flowVec.z *= _FlowStrength;
                float2 uv = RotateUV(i.uv, flowVec.xy, rotMat);
                uv.y = uv.y - flowVec.z * _Time.y;

如何做一个水面流动效果5.gif

不过结果却是各种噪点在闪烁，令人失望。仔细分析下原因，是我们对flow map的采样太精细了，每个点都对应不同的旋转向量，导致这种不连续的效果。为了解决这个问题，首先我们将整个map进行分块处理，每块对应一个旋转向量：

                float2 flowUV = floor(i.uv * _GridResolution) / _GridResolution;
                float3 flowVec = tex2D(_FlowMap, flowUV).rgb;

如何做一个水面流动效果6.gif

然后，让我们对块与块之间进行融合：

            float3 FlowCell(float2 uv, float2 offset)
            {
                float2x2 rotMat;
                float2 flowUV = floor(uv * _GridResolution + offset) / _GridResolution;
                float3 flowVec = tex2D(_FlowMap, flowUV).rgb;
                flowVec.xy = 2 * flowVec.xy - 1;
               flowVec.z *= _FlowStrength;
                float2 mainUV = RotateUV(uv, flowVec.xy, rotMat);
                mainUV.y = mainUV.y - flowVec.z * _Time.y;

                float3 dh = UnpackDerivativeHeight(tex2D(_MainTex, mainUV));
                dh.xy = mul(rotMat, dh.xy);

                return dh;
            }

            float3 dhA = FlowCell(i.uv, float2(0, 0));
             float3 dhB = FlowCell(i.uv, float2(1, 0));
             float wA = frac(i.uv.x * _GridResolution);
             float wB = 1 - wA;
             float3 dh = dhA * wA + dhB * wB;

如何做一个水面流动效果7.gif

虽然整体看上去看上去平滑了很多，但是块和块之间的间隙依旧十分明显。这些间隙的形成是由于不同块采样的flow map位置存在跳变，而发生跳变时融合的权重wA和wB总有一个是1。为了消除间隙，我们希望flow map采样发生跳变时，对应的融合权重为0。对于wA来说，我们希望当采样点到达块中央时，wA到达最大值1，而在边缘部分，则减小到最小值0。对于wB我们希望也满足这样的条件，但是这样就不满足融合的效果，因此我们需要将第二次采样的块偏移0.5个单位而不是1个单位：

 float3 FlowCell(float2 uv, float2 offset)
 {
    offset *= 0.5;
    ...
 }
 
 float wB = abs(2 * frac(i.uv.x * _GridResolution) - 1);
 float wA = 1 - wB;

如何做一个水面流动效果8.gif

可以看到，u方向的间隙已经消失了，如法炮制，再消除掉y方向上的间隙：

float3 dhA = FlowCell(i.uv, float2(0, 0));
float3 dhB = FlowCell(i.uv, float2(1, 0));
float3 dhC = FlowCell(i.uv, float2(0, 1));
float3 dhD = FlowCell(i.uv, float2(1, 1));

float2 t = abs(2 * frac(i.uv * _GridResolution) - 1);
float wA = (1 - t.x) * (1 - t.y);
float wB = t.x * (1 - t.y);
float wC = (1 - t.x) * t.y;
float wD = t.x * t.y;
float3 dh = dhA * wA + dhB * wB + dhC * wC + dhD * wD;

如何做一个水面流动效果9.gif

经过调整之后，采样的权重最大时实际上是在块的中心，那么我们也希望采样的flow map位置也是每个块的中心，而现在是，带有偏移量的块采样的是其中心位置，但没有偏移的块采样的是其左下位置，因此我们需要额外进行一点处理：

            float2 shift = 1 - offset;
             shift *= 0.5;
             float2 flowUV = (floor(uv * _GridResolution + offset) + shift) / _GridResolution;

这里放shift放外面是因为我们只是想平移采样的位置，而不是整个块的位置。

如何做一个水面流动效果10.gif

接下来，我们对流动的效果进行微调，例如根据flow map中b通道，即流动速度来调制高度信息和tiling信息，这也比较符合直观印象，流动越快之处，高度越高，tiling越大，流动纹理越密集。

                float2 mainUV = RotateUV(uv, flowVec.xy, rotMat);
                mainUV.y = mainUV.y - flowVec.z * _Time.y;
                float tiling = flowVec.z * _TilingModulated + _Tiling;
                mainUV *= tiling;

                float3 dh = UnpackDerivativeHeight(tex2D(_MainTex, mainUV));
                dh.xy = mul(rotMat, dh.xy);
                dh *= flowVec.z * _HeightScaleModulated + _HeightScale;

同时，为了避免采样出flow map的数据差异过小，我们可以手动为mainUV增加一些偏移来增加差异性：

                float2 mainUV = RotateUV(uv + offset, flowVec.xy, rotMat);

如何做一个水面流动效果11.gif

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