文章目錄
- 效果預覽
- 具體實作
- 采樣貼圖替換的深度資訊
效果預覽
公司需要一個不使用深度資訊，不用光照模型的水效果，具體實作參照了：卡通風格的水面效果—ToonWater https://zhuanlan.zhihu.com/p/138083802，只是他是將一些資訊存在了頂點顏色中，我的專案中是使用了一張貼圖，先展示效果：
具體實作
建議先閱讀 “卡通風格的水面效果—ToonWater https://zhuanlan.zhihu.com/p/138083802
”，效果實作中的水底折射，水波紋，水面高光都是一樣的，這里的實作主要是將存在頂點顏色中的資訊換成了采樣貼圖，加了焦散效果和泡沫效果，
采樣貼圖替換的深度資訊
這里采樣貼圖_BoundTex，_BoundTex的R通道資訊用來修改Alpha值，用于體現深水、淺水，淺水區制造半透明感，會影響水面貼圖的采樣后的Alpha，以及焦散的Alpha，模擬淺水區半透明效果，靠近岸邊的時候應適當降低Alpha值，
首先采樣一張水面貼圖，再以通道圖的R通道做深淺的Alpha區分，如下圖可見水的邊緣有了淺水的半透明效果，
加一個噪聲對uv采樣偏移，來模擬水底部的折射，水面貼圖上可以加上一些水底的資訊，
再加入水波紋效果，這里是使用法線貼圖實作的，以下是一些不同的法線貼圖的效果，這里用的法線貼圖是在切線空間下的，
float3 normalDir = normalize(UnpackNormal(tex2D(_NormalTex, TRANSFORM_TEX(i.uv, _NormalTex)+ samplerUV * 0.25 + samplerNoise)));
float vdn = saturate(pow(dot(i.viewDir, normalDir), _WaveControl.y));
return vdn;
還需要水面上的白色波浪效果以及岸邊的白色泡沫，采樣通道圖的G通道作為遮罩，浪花只使用R通道的值，將G通道的值與浪花采樣的值相乘就可以得到一個按通道圖G通道分布的浪花區域，G通道：浪花產生的區域，值大小會影響波浪的alpha，應該有一個從0-1-0的Alpha值變化程序，Shader中配合了簡單的溶解消失，浪花的具體形狀采樣Wave Tex，但Wave Tex只保存了R通道的值，
fixed waveMask = saturate((tex2D(_BoundTex,i.uv).g - distortNoise) * 30);
fixed waveTex = tex2D(_WaveTex, i.uv * _WaveTex_ST.xy * _WaveIntensity + samplerUV3 + samplerNoise).r *waveMask;
水的邊緣部分并不明顯，加入一圈岸邊的泡沫，這里使用通道圖的B通道，值大小會影響泡沫的Alpha，需要產生泡沫的地方都可以在圖中畫出來，
最后再加上一圈水底的焦散表現，模擬水底光路的效果，這里需要Alpha與水面顏色相反，所以最后焦散的Alpha要做與水面貼圖采樣的Alpha差值的相加，
fixed4 col3 = col * col.a + col2 * (1-col.a + col2.a);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292439.html
標籤：其他