書接上文：

英文原文地址：|《Unreal Engine 4 Toon Outlines Tutorial》

作者|Tommy Tran Apr 2 2018 閱讀時長|25分鐘 內容難度|入門級

譯者注： 本教程提供了範例工程，如果需要可以到原文網站免費註冊並下載

所謂“卡通輪廓線”，指的就是渲染時環繞在物件上的線。和卡通著色類似，輪廓線能夠讓你的遊戲更加具有風格化。讓你的物件看起來像是用筆或墨手繪的一樣。擁有此風格的遊戲比如：大神（Okami）、無主之地（Borderlands）、龍珠戰士Z（Dragon Ball FighterZ）。

在本教程中，你將學會：

透過反轉網格模型（inverted mesh）製作卡通輪廓

通過後期處理（post processing）和卷積（convolution）製作卡通輪廓

建立和使用材質函式（material functions）

相鄰畫素取樣（Sample neighboring pixels）

注意：本文假設你已經有了一定的UE4基礎知識

本文是Unreal Engine著色器教程四部曲之一：

第一部分： 卡通著色（Cel Shading）

第二部分：卡通輪廓線（Toon Outline） 【本文】

第三部分：使用HLSL自定義著色器（Custom Shaders Using HLSL） 【敬請期待】

第四部分：繪畫風濾鏡（Paint Filter）【敬請期待】

開始吧

下載本教程的範例工程解壓並找到

ToonOutlineStarter

資料夾並開啟

ToonOutline.uproject

。你可以看到如下場景：

首先，我們使用

反轉網格法

來製作輪廓線

反轉網格法（Inverted Mesh）

這個方法的核心思想就是：把你的目標網格模型（下文簡稱原物體）複製一份（下文簡稱複製體），給它賦予一個純色（一般是黑色），然後把它膨脹一點，讓它筆原始網格大那麼一丟丟，於是你會得到一個輪廓。

如果你像下面那樣做，複製體會完全擋住原物體。

於是，我們把複製體的法線反轉一下，這時當開啟背面剔除（backface culling ），我們會看到模型的內表面而不是外表面。

這樣我們就可以看到原始物體了，由於複製體比原始物體大，所以就形成了輪廓線

優點：

因為輪廓線是由多邊形構成的，所以它看起來非常整齊

輪廓的粗細可以很容易地透過移動頂點（譯者注：即複製體的縮放程度）來調整

輪廓線會隨（原物體表面與複製體表面）的距離而收縮。這一點有時也會成為缺點

缺點：

一般來說，模型的內部（鏤空）部分無法形成輪廓線

由於輪廓線是由多邊形構成，所以可以被遮擋。我們可以看到上圖中模型腳部被地面遮擋了

可能會影響效能。這取決於原物體的面數大小，畢竟我們是直接複製過來的，基本上網格面數會翻倍

在光滑的凸狀網格上表現良好，但是在硬邊或者凹陷區可能會產生縫隙，如下圖所示：

一般來說，我們會在建模軟體中建立反轉網格。這樣我們會更好控制它的輪廓。這種方法允許我們在處理骨骼模型時將複製體直接蒙皮到原始骨骼上，這樣複製體就可以和原始物體一樣的運動了。

本教程中，我們將會在Unreal中建立複製體而不是在建模軟體中。方法可能略微有點不同，但是原理依然是相同的。

首先，我們需要為複製體建立材質。

建立反轉網格材質

下面的方法，我們將把多邊形的外表面遮罩起來，只露出內表面。

注意：因為使用了遮罩，所以這個方法比人工建立網格的代價稍稍高了一點

開啟範例專案中的

Materials

然後開啟

M_Inverted

材質，然後開啟細節面板並調整下列設定：

Blend Mode：

設定為

Masked

，這樣我們就可以透過調整

Opacity Mask Clip Value

的閾值來標記顯示和非顯示區域

Shading Model：

設定為

Unlit

，這樣光照就不會影響到模型了

Two Sided：

設定為

enabled

，模型情況下是背面剔除模式。如果不開啟這個，我們將無法看到網格的內表面

接下來，建立一個Vector Parameter並將其命名為

OutlineColor

。我們將它連線到

Emissive Color

引腳，以此來控制輪廓線的顏色。

接下來，建立一個TwoSidedSign，將其乘以-1並連線到

Opacity Mask

，以此來遮罩外表面。

TwoSidedSign節點輸出1代表外表面，輸出-1代表內表面。這意味著外面面顯示而內表面不顯示。然而，我們想要的是相反的效果。所以我們只要把它乘以-1就可以了。現在前表面輸出-1而內表面輸出1。

最後，我們需要一個方法控制輪廓線的厚度。把下圖中高亮的節點新增上就可以了：

在Unreal中，你透過

World Position Offset

可以移動每一個頂點的位置。並透過

OutlineThickness

和頂點法線相乘來調整網格的厚度：

此時，材質已經制作完畢。點選

Apply

然後關閉

M_Inverted

。 現在，你需要複製一個模型並且應用剛剛製作的材質。

複製網格

找到

Blueprints

資料夾，然後開啟

BP_Viking

。新增一個

Static Mesh component

作為Mesh的子物體，並將其命名為

Outline

。

選中

Outline

，把它的模型設為

SM_Viking

，然後把它的材質設為

MI_Inverted

。

MI_Inverted

是材質

MI_Inverted

的一個材質例項。這樣我們就可以在無須編譯的情況下調整

OutlineColor

和

OutlineThickness

了。

點選

Compile

然後關閉

BP_Viking

，這樣viking就有輪廓線了。我們可以透過調節

MI_Inverted

的各個引數來調整它的顏色和厚度。

上述就是反轉網格模型法！當然你也可以使用建模軟體建立反轉網格，然後把它匯入Unreal。

如果你還想使用其它方法建立輪廓線，請參看

後期處理法

。

譯者注：

如果您對本文有興趣請繼續閱讀下一章節：