【UE4 Shader】從球開始做一隻史萊姆

昨天張大的公開課大傢伙都聽了嗎？錯過的可以去看看錄播，實在實在實在沒時間的，也可以等著明天小編把它們整理成文字版。今天先來康康包佬寫的一篇關於用ue4還原史萊姆效果的小教程吧~小夥伴們也可以試著做一個。

鴿子王我又回來了，這段時間工作實在太忙，好不容易等到五一假期才有空寫點東西。

很巧昨天下班後在Shade上看到一個史萊姆的效果特別棒，花了一晚上加第二天上午用ue4還原了下（技術實現都是自己想的沒有參考什麼）。

話不多說先看看最終效果：

動圖壓縮的有點厲害，看看照片，其實顏色過渡是很均勻的

接下來我會大致講一下製作的思路和相關技術實現：

首先我想將所有的造型都程序化，模型用一個簡簡單單帶uv的球就行。也就是說所有的眼睛嘴巴包括輪廓都是在材質中製作的。我已經猜到可能有些人會問：

為什麼不直接用貼圖？

為什麼不直接做成模型？

其實選擇程序化的目的，第一是有更大的發揮空間。程序化可以暴露出很多用圖片表現沒有的參數，方便調整。第二程序化效果不會像圖片有精度問題，也不用煩惱各種抗鋸齒mipmap採樣。第三就是個人覺得如果做這個效果用模型貼圖的傳統流程也很沒意思。。。。。。其實和sd一個片做手錶一樣，程序化的東西自己做著玩玩，過一下手癮也挺不錯的。

基礎材料：一個球（分段儘量高一點）

外形製作

由於基礎模型是球體，而史萊姆更多趨向於梨形。所以我們需要先將球體的外形做一些改變。這裡說的改變肯定不是指在maya max中直接修改模型，而是在ue4的材質中做出修改。

其中我用 vertex normal 區分了球體的上下面區域，同時使用兩個權重參數控制上方和下方的收縮大小。值得一提的是由於是梨形變形，所以上方和下方的變形區域也不一樣。其中下圖展示的是球體的橫截面，紅色部分是上方需要變形的區域，藍色部分是下方需要變形的區域

為了實現這兩個區間，我將上方的法線z軸數值應用了一個sin，為了縮短周期只取一半我將輸入端乘了0.5（UE4會在編譯時默認將sin輸入端乘2π，所以材質中只需要輸入0-1就是一個周期）。最終取得區間如圖所示：

下方的區間比較好找，取法線z軸負值的區間就是了。

其中我在形變權重值上加上了 ObjectScale 的影響 ，目的是為了讓絕對偏移距離隨著物體的縮放發生改變，這樣物體在縮放的時候外形就不會發生變化了。

於是我們成功將球變成了梨

材質製作

材質的製作其實很簡單，就是簡單的一層菲涅爾固有色加菲涅爾發光

菲涅爾漸變是將VertexNormal和CameraVector點乘反向，固有色是用漸變lerp前後景兩個顏色。發光用了菲涅爾和相機空間的點法線y方向做混合，這樣發光就會被限制在物體下方。

剩下的粗糙度和Specular Level等就只有一個數值控制，法線在眼睛製作的環節會講

嘴巴製作

終於來到有技術含量（並沒有）一點的製作環節了，這隻史萊姆的嘴巴仔細看其實是有內部結構的：

這裡其實我用了視差去採樣不同的部分，具體思路是求出表面下方的uv，然後用這套uv去採樣嘴巴的形狀，和上方的嘴巴做混合即可。

其中製作嘴巴形狀的節點如下所示（有一些Magic Number請無視）：

其實主要原理就是根據輸入uv定點去畫兩個圓，下方的圓減去上方的圓就有了上嘴唇的效果了。

視差的做法也比較常規，首先算出每個像素的偏移值，然後對每個像素的uv做偏移就可以了，這裡貼上野代碼

細心的朋友應該發現了一些端倪，就是下面的那個EdgeParallaxDepthFix是幹什麼用的？其實這個只是對球面弧度的一種補償

可以看到當暗紅色的視線從不同角度接觸到內部目標平面時，內外平面的距離是不一樣的。在球體中心射入的內外表面長度d1是明顯小於邊緣射入的d2長度。如果我們不做補償就會出現在邊緣看上去厚度變薄的錯誤效果。在這裡我還是用菲涅爾作為這個補償值，直接添加在尋找內表面的厚度上。當然這個補償值也應該和尋找深度掛鈎，這裡我沒有製作，如果有朋友想還原的話可以做進去。

剩下的就是顏色混合階段了，可以用不同深度的嘴部mask求交集，然後lerp不同的顏色即可。

眼睛製作

眼睛的製作也是全程序化的，這裡我是寫的custom。主要目的是求出眼睛區域的mask和法線。

其中mask的製作方法是先分別求出以左右眼睛中心為原點的兩個uv坐標系，算出基於0點的distance，定義半徑之後用半徑加smoothstep算出alpha區域，用smoothstep的好處是邊緣過渡會非常平滑，沒有什麼鋸齒（如下圖所示）。如果不知道smoothstep是什麼的戳這裡：

SmoothStep是個啥？這是數學的魅力！

接下來就是法線了，其實也很簡單，我直接用uv的兩個軸向以r和-r為區間繪製了兩個梯度，加上uv中心算distance得到法線的z分量，共同組成了最後的眼睛法線

因為可以拿到眼睛uv的長度，所以製作瞳孔啥的也是非常方便的，這裡就拋磚引玉，大佬們可以自行完善。

動作製作

動作分為兩部分，一部分是身體的形態運動，另一部分是面部表情運動。

首先自身形態變化我拆成了兩個不同的效果，一套是左右搖擺，一套是上下擠壓。大致製作方法都是先用物體空間位置和boundingbox算出變形區域，然後用三角函數和各種周期控制參數做出搖擺的動畫，最後匯總到一起連入世界位置偏移。其中搖擺的周期時間是擠壓的兩倍，因為每次搖擺到一個方向（半個周期）都需要做一次擠壓（一個周期）。

同時還需注意，為了讓擠壓的效果更真實，在擠壓的過程中體積需要橫向擴張。這裡我放一張之前做煤球時畫的示意圖。大家一看就明白了

萌物養成記 - 三維版煤球表情包製作解析

而且在壓縮和搖擺的動作肯定不能同時發生，需要有先後順序才好看，所以我在這裡加了一個偏移值來調整這個效果

無偏移

有偏移

很明顯可以看到有偏移的動畫更加自然。

接下來就是眼睛和嘴巴的動畫效果了，我分開製作了兩套，分別控制嘴巴和眼睛的動畫，這裡使用不同的偏移值效果提升會非常明顯，那種Q彈的感覺一下就出來了

無偏移

有偏移

另外我還在藍圖中做了眨眼控制，讓最終效果看起來更生動

做完這些後，效果就完成啦~~~

來個節點全家福

如果要說這次做下來的感受是什麼~~可能就是家裡桌子太高，坐久了肩膀有點痛吧。。。

轉發收藏留言點擊再看，你們的支持就是我更新的動力~~

完

（拜託拜託）

歡迎長按掃碼加入交流qq群：