如何在UE5中不用高斯模糊做出雨水滑落玻璃的效果和新功能體驗（純藍圖廉價版）

寧靜的下雨天，看著雨水靜靜的從玻璃上滑落，玻璃窗上模糊的景色沿著雨滴落下的軌跡慢慢的變得清晰了起來，彷彿心靈也得到了洗滌一般。

所以今天我們就是來做這種效果，先看下最終的效果圖，為了顯示清楚，這邊反射我調弱了。

最終效果

圖中的效果是我加速了三倍的，正常應該是比較慢的。我會從下面幾個點給大家分解一下製作方法。

原圖準備

，

靜態雨滴

，

雨滴反射和折射

，

模糊效果

，

動態雨滴

，

雨滴軌跡

，

軌跡滑落效果切換。

原圖準備：

我這邊是隨便找了一張網上的圖片，如有侵權請告知。

原圖

靜態雨滴：

靜態的雨滴我用得一張mask一張normal，如下圖

雨滴mask

靜態雨滴法線

我們先把原圖和法線連上去，可以得到以下的效果，很顯然這個缺了點什麼，是什麼呢。沒錯，就是雨水的反射，所以接下來我們講一下雨水的反射和折射。

貼圖加上法線

雨滴的反射和折射：

折射的話我們因為我們這邊不用半透明，所以可以用

refract函式

來模擬，原理就是用refract的RG作為UV輸入到原圖上，就能在法線凸起的位置或者一個類似折射的效果。其中的

NORMAL

就是材質編輯器裡最新新增的功能，就是類似內部定義一個功能函式然後內部呼叫，這樣可以避免你的UE成為一團毛線團，我們可以輸入

add named rerouted declaration node

來新增這個節點。

模擬折射

重定義輸入宣告

很顯然我們已經得到了不準確的折射效果，而且還會隨著視線進行移動，不需要太過精確的效果。我們繼續給他新增反射效果，反射的話還是使用reflection vector加上cubemap來模擬。然後用lerp混合折射的效果，最後控制下整體亮度就行了。

折射加反射

折射加反射的效果

模糊效果：

模糊效果一般是使用高斯模糊效果最好，但是由於高斯模糊太費效能，所以我這邊使用的方法是利用貼圖原有的mipmap模擬。首先選中貼圖，我們會在左邊的視窗看到貼圖的屬性，然後將貼圖的屬性更改為如下所示，改成miplevel取樣，然後將mipvalue改為4我們可以看到貼圖已經模糊了。

mip等級為4的貼圖

由於是取樣同一張貼圖，所以我們可以用texture object來取樣。接下來用我們一開始的normal mask來區分模糊的地方和雨滴。

用mask區分模糊和雨滴

模糊加雨滴

動態雨滴：

上面的圖已經有了基本的效果了，接下來就可以加入動態的雨滴了，因為沒有序列幀我這邊就是在法線上摳了幾個雨滴做成了mask和法線。我取了四個雨滴mask分別存放於一張貼圖的RGBA通道中嗎，這樣方便後面做速度的區分。法線則是放在了一張上。

雨滴mask

雨滴法線

然後我們有了這些後對雨滴做UV偏移動畫，我們需要雨滴從上滑落到下，然後停留半個週期的時間再從上到下滑落。所以我們需要作出如下的波形

雨滴滑落的波形

我們用time加frac可以得到鋸齒波，然後減去0。5就可以得到一半為負的，最後和0進行max操作就可以得到圖上的波形了。然後前面time乘以一個數值進行速度的調整，這個需要做四次。

雨滴的UV動畫

UV1就是剛才提到的新功能定義的最後接到貼圖的UV口，tex的話只是稍微用來對雨滴的滑落軌跡進行偏移的效果

雨滴路徑扭曲

四個雨滴的滑落動畫

有了UV的資訊後，我們需要將用mask將normal分開。前面也提到，四個雨滴是存放在一個貼圖的RGBA裡的，所以我們需要將RGBA每個通道用lerp取區分對應的法線然後疊加起來，以匹配UV動畫。然後將RGBA加起來輸出個整體的mask供區分normal，也就是雨滴下落的時候將法線抹平。

雨滴法線匹配動畫

雨滴效果

雨滴的軌跡：

由於是要做迴圈動畫所以需要做出箇中間實兩邊虛的mask。我這邊使用的方法是利用worldposition製作出mask。我們先將worldposition減去objectposition，這一步是把worldposition轉換到本地座標系（取B軸），然後作為自定義的輸出position（就是新功能）。