本文參考自教程，并加上自己的一些心得體會(huì)晴音。所謂的水面流動(dòng)刑顺，就是對(duì)給定的紋理貼圖進(jìn)行采樣氯窍，使其隨著時(shí)間流動(dòng)饲常，呈現(xiàn)有規(guī)則地沿著某一方向連續(xù)，但是又不完全有規(guī)律的效果狼讨。
首先贝淤，我們用到的貼圖是一張高度圖，ag通道分別代表高度在x和y方向上的導(dǎo)數(shù)政供，b通道保存真實(shí)的高度數(shù)據(jù)播聪。先讓我們直接對(duì)貼圖進(jìn)行采樣，我們用高度數(shù)據(jù)作為最后的顏色輸出：
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));
接下來(lái)布隔，我們希望它能沿著某一個(gè)方向動(dòng)起來(lái)犬耻，為了實(shí)現(xiàn)這一效果，需要旋轉(zhuǎn)整張貼圖的uv执泰，例如我們嘗試著旋轉(zhuǎn)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);
}
這里我們傳入的參數(shù)并非是一個(gè)旋轉(zhuǎn)的角度枕磁，而是一個(gè)向量，但實(shí)際上兩者是等價(jià)的术吝。已知旋轉(zhuǎn)矩陣為：
又知道计济，那么我們可以用一個(gè)歸一化的向量
來(lái)表示旋轉(zhuǎn)。效果如下：
接下來(lái)我們讓它動(dòng)起來(lái)排苍，設(shè)置旋轉(zhuǎn)向量為一個(gè)隨時(shí)間變化的向量：
float2 uv = RotateUV(i.uv, float2(cos(_Time.y), sin(_Time.y)));
仔細(xì)觀(guān)察沦寂，會(huì)發(fā)現(xiàn)高光的效果不太對(duì)，高光并不是跟隨著紋理旋轉(zhuǎn)而旋轉(zhuǎn)的淘衙，原因是我們?cè)谛D(zhuǎn)高度貼圖時(shí)传藏，沒(méi)有相應(yīng)地對(duì)貼圖描述的法線(xiàn)也進(jìn)行旋轉(zhuǎn)，那么我們把計(jì)算得到的旋轉(zhuǎn)矩陣暴露出來(lái)：
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);
我們希望把旋轉(zhuǎn)向量記錄在一張單獨(dú)的貼圖中彤守，這樣就可以根據(jù)uv采樣得到不同的旋轉(zhuǎn)向量毯侦，然后讓uv隨著時(shí)間不斷位移，從而獲得沿著某個(gè)方向移動(dòng)的效果具垫。甚至侈离，我們可以利用這張貼圖附加一個(gè)速度信息，控制uv隨著時(shí)間位移的速度：
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;
不過(guò)結(jié)果卻是各種噪點(diǎn)在閃爍筝蚕，令人失望卦碾。仔細(xì)分析下原因，是我們對(duì)flow map的采樣太精細(xì)了起宽，每個(gè)點(diǎn)都對(duì)應(yīng)不同的旋轉(zhuǎn)向量洲胖，導(dǎo)致這種不連續(xù)的效果。為了解決這個(gè)問(wèn)題坯沪，首先我們將整個(gè)map進(jìn)行分塊處理绿映，每塊對(duì)應(yīng)一個(gè)旋轉(zhuǎn)向量：
float2 flowUV = floor(i.uv * _GridResolution) / _GridResolution;
float3 flowVec = tex2D(_FlowMap, flowUV).rgb;
然后，讓我們對(duì)塊與塊之間進(jìn)行融合：
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;
雖然整體看上去看上去平滑了很多屏箍，但是塊和塊之間的間隙依舊十分明顯绘梦。這些間隙的形成是由于不同塊采樣的flow map位置存在跳變橘忱，而發(fā)生跳變時(shí)融合的權(quán)重wA和wB總有一個(gè)是1。為了消除間隙卸奉，我們希望flow map采樣發(fā)生跳變時(shí)钝诚，對(duì)應(yīng)的融合權(quán)重為0。對(duì)于wA來(lái)說(shuō)榄棵，我們希望當(dāng)采樣點(diǎn)到達(dá)塊中央時(shí)凝颇，wA到達(dá)最大值1，而在邊緣部分疹鳄，則減小到最小值0拧略。對(duì)于wB我們希望也滿(mǎn)足這樣的條件，但是這樣就不滿(mǎn)足融合的效果瘪弓，因此我們需要將第二次采樣的塊偏移0.5個(gè)單位而不是1個(gè)單位：
float3 FlowCell(float2 uv, float2 offset)
{
offset *= 0.5;
...
}
float wB = abs(2 * frac(i.uv.x * _GridResolution) - 1);
float wA = 1 - wB;
可以看到垫蛆，u方向的間隙已經(jīng)消失了，如法炮制腺怯，再消除掉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;
經(jīng)過(guò)調(diào)整之后袱饭，采樣的權(quán)重最大時(shí)實(shí)際上是在塊的中心，那么我們也希望采樣的flow map位置也是每個(gè)塊的中心呛占，而現(xiàn)在是虑乖，帶有偏移量的塊采樣的是其中心位置，但沒(méi)有偏移的塊采樣的是其左下位置晾虑，因此我們需要額外進(jìn)行一點(diǎn)處理：
float2 shift = 1 - offset;
shift *= 0.5;
float2 flowUV = (floor(uv * _GridResolution + offset) + shift) / _GridResolution;
這里放shift放外面是因?yàn)槲覀冎皇窍肫揭撇蓸拥奈恢谜钗叮皇钦麄€(gè)塊的位置。
接下來(lái)帜篇，我們對(duì)流動(dòng)的效果進(jìn)行微調(diào)糙捺，例如根據(jù)flow map中b通道，即流動(dòng)速度來(lái)調(diào)制高度信息和tiling信息坠狡，這也比較符合直觀(guān)印象碧注，流動(dòng)越快之處贪婉，高度越高，tiling越大济炎，流動(dòng)紋理越密集幻锁。
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;
同時(shí)凯亮，為了避免采樣出flow map的數(shù)據(jù)差異過(guò)小，我們可以手動(dòng)為mainUV增加一些偏移來(lái)增加差異性：
float2 mainUV = RotateUV(uv + offset, flowVec.xy, rotMat);
如果你覺(jué)得我的文章有幫助哄尔，歡迎關(guān)注我的微信公眾號(hào)（大齡社畜的游戲開(kāi)發(fā)之路）^ - ^
