UE4實現卷式電纜著色器FX02

摘要：

卷式電纜主要由五部分組成

實現卷式紋理

實現電纜分離

構造法線

處理輪廓邊緣

藍圖+材質繫結邏輯

實現：

實現卷式紋理

實現卷式電纜是透過引擎的自帶元件

Cable Actor

來模擬物理效果

注意UV的起始點和結束點

UV展開圖

這樣我們就可以得知該電纜元件中的起始點和終點是沿著U座標平鋪的，我們只需要在著色器中沿著U方向做螺旋圖案就可以了。

螺旋結構演算法

透過以上演算法我們可以得到以下圖案

從左到右：U + V，U + V的小數部分

如果我們在圓柱上預覽，則可以看到螺旋結果是無縫的，並且可以完美的環繞圓柱。

接下來，讓我們新增更多的螺旋，我們只需要將U分離乘以所需的螺旋數即可。螺旋數得為整數，因為分手值不會產生無縫結果。

該圖演示增加螺旋結構

2.實現電纜分離

接著上面我們實現了螺旋結構紋理，下面我們需要當電纜被拉伸的時候能夠分開並保持其厚度，從而給人一種電纜正在拉伸的錯覺。

為了解決這個問題，我們可以先在著色器中控制來將其分離開，然後再透過藍圖來保持其厚度。

我們可以用以下公式簡單實現

首先我們透過將原始漸變除以CableWight來縮放電纜寬度再加上0。5（標準化線性梯度的一半）並在電纜寬度上減去0。5/CableWight，以便重新放置梯度使其居中。接下來，我們使用saturate，這樣我們就不會返回0到1範圍之外的值。接著再將得到的梯度圖進行求逆，並用if幾點找到該梯度與原始的非反向梯度之間的最小值，這將建立一個從0到1的漸變，然後再回到0。

從左到右：原始漸變，倒置漸變，兩個漸變的最小值，重新歸一化的漸變。

透過以上演算法我們可以得到類似電纜長度的高度圖，接著我們再使用if節點將所有大於0的值評估為1之後，然後連入材質的不透明蒙版中，提高螺旋數，並改為雙面材質，我們就能得到以下結果。

3.構造法線

要構建法線，我們要評估線性梯度並輸出不同的方向。為此，我們可以用“3ColorBlend”3色混合節點節點並給定一個alpha，可以線性地混合3種顏色，同樣我們也可以混合向量，只需要提供3個方向向量，分別是左（-1，0，0），上（0，0，1）和右（1，0，0）並指定一個灰度圖作為Alpha，這樣我們就構造了法線，這裡我們直接使用前面構建的螺旋漸變圖作為Alpha通道構建法線。

構建法線公式

構建完法線的效果

4.處理輪廓邊緣

構建完法線後我們的電纜體積感更強了，但是電纜的邊緣感覺有點生硬，如果電纜沿其輪廓倒圓角會更好，接著我們是不是可以透過上面得到的螺旋漸變圖，再從給定的視角針對電纜的輪廓來解決這個問題。

我們透過以下公式解決邊緣太生硬。

透過以上演算法我們可以得到一個隨視角而變化並橫跨電纜長度的灰度圖。

A-B=C

接著我們做減法運算，這樣我們可以得到螺旋紋理上下邊緣變窄了。

上面為倒角前，下面為倒角後

對比上下電纜，下面比上面更立體、更圓潤、效果更好。

5.藍圖+材質繫結邏輯

完成電纜著色器後，我們需要將其與藍圖邏輯掛鉤，以便在拉伸時將其拆開，並在緩解張力時將其再次捲回，邏輯節點如下。

最終效果：

完整材質節點：

引用地址：