Unreal Engine 4 卡通轮廓线（Toon Outlines）教程 之 反转网格法（Inverted Mesh）

原文|《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。

如果你还想使用其它方法创建轮廓线，请参看后期处理法。