“CG小苏 ”再点右上角“ ...”最后设为星标 ★
-------------------------------------- | CG小苏 | 分享最前沿的CG技术-游戏开发-CG自媒体平台 |  

你好。我叫 Hosoi，是 Spark Creative Co., Ltd. 的客户工程师。我们公司每个月都会发布一个内部博客，这次我们有机会为 CGWORLD.jp 做出贡献，我们内部的工程人员将分几个部分撰写有关 UE 中的单元着色的文章。
这次，我们将回顾卡通着色的基础知识，并创建可以在编辑器上完成的表达式。起初，这种方法只能在UE编辑器内完成，但在本系列的后半部分，我想在一篇文章中总结包括引擎修改在内的表达方式。
<1>什么是卡通渲染？<2> UE中如何实现Cell Shader？<3>通过内积表达阴影<4>让我们真正做到吧！第 1 步：准备模型第2步：节点创建第 3 步：纹理设置第 4 步：结果<5> 使用法线贴图添加细节<6>最后 .
<1>什么是卡通渲染？                                 读这篇文章的人可能认为你已经知道什么是卡通着色，但是对于那些第一次接触着色器的人来说，让我们简单回顾一下什么是卡通着色。Cel 着色器有时被称为“Cel 外观”或“Toon 着色器” ，但正如您可以从“Cel”或“Toon”名称中想象到的那样，它是一种用于创建类似于动画 cel 绘图或漫画外观的技术。
那看起来像什么？我想有些人是这么认为的。
很难用文字来解释，但是通过故意减少颜色数量来消除模型的三维感，并通过添加现实生活中不存在的轮廓（主线），我们创建了一个看起来像的3D 模型就像手绘一样。它会的。
.
<2> UE中如何实现Cell Shader？                                 有多种方法可以在 UE 中实现单元着色器。其中，本系列将重点关注以下三项。1：无光照着色器
2：后期效果3：引擎修改

这次我们将使用“ Unlit Shader ” ，这个比较容易表达。工作环境
这次，我们在以下环境中进行实施。
・Windows 10・Visual Studio 2019・Unrea 引擎 5.1.1 .
<3>通过内积表达阴影                                 现在，在创建cel着色器时，不能忽视的一件事是“点积”。通过模型法线和光矢量的内积，可以分为两个范围：-1到0和0到1。

更多精彩图片 请登录

这两个范围分别指的是光线照射到的区域和光线未照射到的区域，通过根据这些线条添加阴影，您可以创建更像是 cel 着色器的清晰外观。如图所示，它看起来像这样。

更多精彩图片 请登录

-1到0之间，没有光，所以是黑的，0到1之间，有光，所以是白的，所以可以清晰的一分为二！ .
<4>让我们真正做到吧！                                 第 1 步：准备模型这次我们将使用以下模型。该图像显示了使用“不透明着色器”时的外观。我们将对此模型应用“无光照着色器”。

更多精彩图片 请登录

首先，从[创建基础资源]中选择[材质] 。在内容浏览器中创建材质后，右键单击并选择[创建材质实例]以创建与模型中的材质一样多的材质实例。创建后，尝试将每个设置为模型的材质。
*此处的材料数量因型号而异。

更多精彩图片 请登录

我认为模型完全变黑了。

更多精彩图片 请登录

这是起点。 .
第2步：节点创建                                 打开父材质并创建一个 cel 着色器。正如一开始所解释的，我们这次将使用 Unlit 着色器，因此将 ShadingModel 设置为[Unlit] 。

更多精彩图片 请登录

现在让我们获取光矢量。UE 灯光有四种类型：orient、point、Spot和sky 。
这次，我们将使用其中之一，即定向光来表达卡通着色。换句话说，被定向光照射的区域将是白色的，而未被照射到的区域将是黑色的。
让我们立即创建一个节点。尝试搜索“SkyAtomosphereLightDirection” 。我相信您已经创建了以下节点。

更多精彩图片 请登录

接下来获取模型的法线信息。搜索“VertexNormalWS” 。

更多精彩图片 请登录

现在我们有了两种材料来计算点积。现在我们来计算内积！您还可以使用 Dot 节点，但这次我将尝试使用 BluePrint 重现下面的公式。

更多精彩图片 请登录

为了获取向量的分量，我们使用ComponentMask 节点。上式中的A1和b1传递给R，a2传递给G，a3和b3传递给B。将每个相乘后，您可以通过添加它们来找到内积。

更多精彩图片 请登录

让我们将输出结果连接到发射颜色。我想它应该像下面这样。这有点吓人，但模型现在有阴影了。

更多精彩图片 请登录

为了更像单元着色器一样表达清晰的着色，我们将内积结果乘以 100，并使用 Clamp 将结果限制在 0 和 1 的范围内。

更多精彩图片 请登录

结果，现在传递 0 或 1，而内积结果为 -1 到 1。你可以看到阴影是清晰的。

更多精彩图片 请登录

.
第 3 步：纹理设置                                 现在让我们设置纹理。搜索“TextureSampleParameter2d”并添加一个节点。实际使用的纹理将在创建的第一个材质实例中设置，因此首先插入一个白色图像。
我们还将添加一个节点来调整阴影颜色。搜索“矢量参数” 。如果不将阴影与纹理颜色相乘，它将变成单一颜色，因此让我们添加“相乘”并将每个颜色连接起来。

更多精彩图片 请登录

最后，搜索“线性插值”并添加一个节点。这个名为 Lerp 的节点将执行线性补全。将纹理和阴影颜色连接到 A 和 B，并将与自发光颜色连接的内积结果连接到 Alpha。
内积会返回0或1，如果线性插值的结果为0，则返回阴影颜色，如果为1，则返回纹理。

更多精彩图片 请登录

最终的蓝图将如下所示。

更多精彩图片 请登录

让我们在材质实例上实际设置一个纹理。打开材质实例，选中[BaseTexture]并设置要使用的纹理。

更多精彩图片 请登录

结果是……

更多精彩图片 请登录

阴影太暗了。让我们稍微调整一下阴影颜色。

更多精彩图片 请登录

我试着把它变成灰色。您还可以从材质实例中单独设置阴影颜色，因此如果您想改善外观，请尝试不同的颜色！

更多精彩图片 请登录

第 4 步：结果最终结果如下所示。

更多精彩图片 请登录

有点太平坦了。特别是，由于“无光照着色器”，裙子失去了褶皱感。这是因为它只是顶点法线和定向光内积的结果。
通过在这里添加法线贴图，我们将能够表达比使用顶点法线更详细的阴影。
<5> 使用法线贴图添加细节
到目前为止，我们使用 VertexNormalWS 节点来获取模型的法线信息。但那样的话，裙子等小细节就很难表现出来了。

更多精彩图片 请登录

更多精彩图片 请登录

法线贴图是一种可以粘贴到多边形上的纹理，除了多边形的法线之外还可以表达内部细微起伏的方向，甚至可以使单板多边形看起来具有凹凸不平的表面。为了实际确定起伏的方向，需要准备与法线不同的矢量。
要创建向量，我们需要三个分量：XYZ。如果你想为纹理准备三个组件......“RGB”似乎可以使用！在法线贴图中，通常将 X 分量表示为 R，Y 分量表示为 G，Z 分量表示为 B。通过这种方式，我们能够准备一个与法线分开的向量。
如果您将其替换为之前的 VertexNormalWS...

更多精彩图片 请登录

▲普通地图

更多精彩图片 请登录

裙子现在有褶皱的感觉。另外，如果你将法线贴图应用到头发上，它会看起来像这样。

更多精彩图片 请登录

更多精彩图片 请登录

▲应用法线贴图之前

更多精彩图片 请登录

▲应用法线贴图后<6>最后当你真正创建的时候，你会发现使用基本着色实现一个cel着色器的步骤并不多。然而，当您查看完成的模型时，您可能会认为您从游戏中认识的角色更酷或更可爱。
我们这次实现的只是基础。从下次开始，我希望我们的图形工程师能够使用各种技术推出更时尚的卡通渲染

更多精彩图片 请登录

1                                  END
声明：本文章中所有的图片和视频都归原作者所有，仅供大家参考学习和交流，不作商业用途，侵删。如果你喜欢这篇文章,欢迎转发！谢谢!更多学习和交流可扫描下方二维码哦！

更多精彩图片 请登录

路过，支持一下啦

好强...