The Last of Us Part Ⅱ水面漣漪效果實現
本文實現的水面漣漪效果主要來自Wataru Ikeda GDC2021中的分享：Creative and Experimental VFX in ‘The Last of Us Part II’
下面是根據分享的演算法和思想利用Houdini製作資產，並在UE4中實現的全部過程。
一、本方案與之前方案的簡介
本方案的目的主要為能靈活地在水面配置數量和變化儘可能多的漣漪，並能儘量節省效能消耗，以往的水面漣漪方法一般為事先烘焙好一張法線圖，然後實時計算一個UV動畫從而生成一張RT作為法線圖，而本方案輸入為RGB三通道的漣漪Mask，並利用Alpha通道當作遮擋Mask，實時生成高度圖和法線，控制更加靈活，並提供了一種效率高、效果好的生成法線的方法。
二、Houdini生成Mask圖
1.從UE4匯出河流Mesh
首先，從UE4中匯出河流Mesh，可以選擇將StaticMesh匯出FBX，但是為了方便確認下面繪製Mask的位置，最好用Houdini的UE4工具匯出來，如下圖所示，可以將河流周邊的石頭、植被、橋等物體一起匯出，作為Mask位置的標記：
圖中紅框中木板橋位置即接下來需要產生漣漪Mask的位置。
2.處理河流Mesh
首先清理掉Mesh原有的頂點色，然後處理生成Mask的UV，注意要將UV按照Mesh比例約束到正方形的0-1範圍UV內，保證繪製的圓形Mask烘焙出Mask圖的時候還是保持原來形狀，以便於UE4引擎內生成漣漪HeightMap的時候方便處理保持原形，另外如果Mesh精度太低，需要進行平滑和提高精度處理，不然在繪製Mask的時候形狀不好控制，處理完的Mesh大致如下：
UV：
Wires：
3.繪製漣漪Mask
可以用Houdini Attribute Paint節點進行繪製，分別繪製R，G，B通道，然後在attribute VOP節點裡面把三個通道的Mask合成到RGB的頂點色中，再把Alpha畫出來，這裡Alpha作為遮擋避免產生不想要的漣漪區域，最後結果如下：
4.烘焙漣漪Mask圖
利用Houdini的Maps Baker（18。0版本之後支援）可以將Mesh頂點色匯出到base color貼圖中，但是Houdini中頂點色中是沒有Alpha通道的，我們要將自己加的Alpha通道烘焙出來，可以單獨烘焙出Alpha圖Photoshop中合成到PNG圖片中，但是這樣多出來步驟比較麻煩，快捷的方案是修改Maps Baker節點，將Alpha屬性值直接烘焙到頂點色中，修改方式如下：
修改COP2 Network節點
結果如下：
三、UE4引擎內渲染漣漪效果
1.生成高度圖RT
新建水面漣漪高度圖的Render Target和對應的材質，將Houdini中生成的Mask圖轉化為水面漣漪高度圖，材質藍圖節點如下：
這裡需要注意，因為我們需要渲染Alpha通道，所以需要設定材質為Masked，然後將Usage選項下的Used with Editor Compositing的勾選框打上勾，這樣才能保證能輸出Alpha到RT中，最終渲染出的高度圖RT如下：
2.實時生成法線
下面開始最重要的關鍵一步，生成高質量高效率的法線：
Ⅰ 相鄰點取樣
以往最常見的透過高度圖的方式就是透過上下左右的高度叉乘得到，但是效率比較差，需要四次貼圖取樣和叉乘操作，效率比較差。
Ⅱ DDX DDY方式
另一種方法是使用DDX， DDY的方法，僅透過ddx，ddy兩次取樣就能獲取法線，方法如下：
但是，透過這種方法獲取的法線圖一般都有噪點，效果不理想，測試生成法線圖如下：
可以看到中間左側的法線，明顯能看到噪聲產生
Ⅲ 高度圖偏移方案
觀察Normal的黑白圖，可以把法線圖分為亮部和暗部兩部分，如下圖所示：
透過原高度圖與在U，V方向偏移的高度圖相減可以獲取到U，V方向上的亮部與暗部，如動圖所示
然後透過簡單的運算就可以分別得到在UV方向上的法線，如下面計算方式：
在UE4材質中計算方法如下：
需要注意的是，如果在Houdini中烘焙Mask圖的時候有處理過UV，這裡在取樣貼圖的時候同樣也要處理UV來進行正確的取樣，得到法線圖如下：
和DDXDDY相比，生成的法線會更加平滑，而且不會產生噪聲。
3.最終渲染效果
建立一個生成Heimap的藍圖到關卡中，然後設定好水體Mesh的材質，就可以播放預覽，下圖為用512*512的Mask圖，以及1024*1024的RT產生的水面漣漪效果，對於小的水體Mesh，貼圖尺寸還可以減小：
在我的實際Demo工程中測試效果如下：
Gif太大傳不了……
上圖兩種形態的漣漪波紋是由同一張Mask圖產生的，由於我們貼圖有RGB三個通道，所以可以產生不同頻率和強度的波紋效果。
四、總結與展望
本方案總體上來說生成了一種相對高效和高質量的水面漣漪效果，接下來可以考慮將漣漪模擬烘焙到貼圖中或者尋找更加低消耗的實時模擬方案。
參考文章：
https：//www。
gdcvault。com/play/10270
72/Creative-and-Experimental-VFX-in
