一個有趣的教程
昨天看了一個老外的視頻教程：Rain Drop Ripples惨远，教程用 Shader Graph 實現(xiàn)了游戲中常見的下雨天地面的水花效果。
視頻中水花動畫的實現(xiàn)和我們游戲的實現(xiàn)方式有所不同话肖，他通過 Shader Graph 的 Flipbook 節(jié)點實現(xiàn)了水花的 序列圖 動畫：
上圖中的 Flipbook 節(jié)點對應的代碼如下：
float2 _Flipbook_Invert = float2(FlipX, FlipY);
void Unity_Flipbook_float(float2 UV, float Width, float Height, float Tile, float2 Invert, out float2 Out)
{
Tile = fmod(Tile, Width * Height);
float2 tileCount = float2(1.0, 1.0) / float2(Width, Height);
float tileY = abs(Invert.y * Height - (floor(Tile * tileCount.x) + Invert.y * 1));
float tileX = abs(Invert.x * Width - ((Tile - Width * floor(Tile * tileCount.x)) + Invert.x * 1));
Out = (UV + float2(tileX, tileY)) * tileCount;
}
代碼比較好理解北秽，根據(jù)當前動畫的幀號 Tile 換算出對應的紋理坐標。
以下面這張 4x4 的水花序列圖（需轉(zhuǎn)為法帖）為例狼牺，傳入 Width = 4羡儿，Height = 4，Tile = _Time.x * AnimSpeed是钥，我們就能算出 Out UV掠归。
有了 Out UV后缅叠，我們解碼水花法帖得到當前幀水花法線，再和地表的法線 混合虏冻，就大功告成了肤粱，如下圖：
當然，這只是最簡單的效果厨相，下面我們看一下更多的細節(jié)领曼。
更多細節(jié)
關于UV的frac操作
從 Unity_Flipbook_float 的代碼可知，傳入的參數(shù) UV 必須在 [0,1] 之間蛮穿，而我們一般會對 UV 做 Tiling 操作庶骄，Tiling 的結(jié)果往往是超過1的。
這時践磅，我們需要對 Tiling 的結(jié)果做一個 frac 操作单刁，只保留小數(shù)部分，否則動畫會抽風府适。
多層水花疊加和加入噪音
為了讓水花更加自然羔飞，一般我們會根據(jù) Tiling 不同至少做 2層水花疊加，并且會引入 噪聲 讓它的變化不那么規(guī)律檐春。
這里作者通過 Voronoi noise 來控制兩層水花的 法線強度：
效果如下：
混合水花和水流
單獨有水花還是不夠的逻淌，水花配合水流 才是王道。
水流的實現(xiàn)可以參考前文 潮濕效果之水紋疟暖。
此外卡儒，有的時候，美術(shù)并不希望水流有明顯的流向誓篱，這個時候我們可以做2張水流貼圖朋贬，讓他UV動畫對沖，示意代碼如下：
half3 SGameWetBump(float3 worldPos, half3 worldNormal)
{
half2 flowUV = half2(worldPos.x, worldPos.z);
half3 flowBump1 = tex2D(_SG_WetBumpMap1, flowUV * _SG_WetBumpTilingOffset1.xy + _SG_WetBumpTilingOffset1.zw * _Time.y);
half3 flowBump2 = tex2D(_SG_WetBumpMap2, flowUV * _SG_WetBumpTilingOffset2.xy + _SG_WetBumpTilingOffset2.zw * _Time.y);
half3 flowBump = flowBump1 - flowBump2;
half3 bumpNormal = lerp(half3(0,0,1), flowBump, _SG_WetFactor);
return bumpNormal;
}
這樣窜骄，我們的水花只做一層锦募，效果也能接受，如下圖：
個人主頁
本文的個人主頁鏈接：https://baddogzz.github.io/2020/03/16/Flipbook-Ripples/邻遏。
好了糠亩，拜拜！
