UE4虚幻引擎 Cel着色材质教程卡通阴影

1586072604 unreal engine cel shading 44 - UE4虚幻引擎 Cel着色材质教程卡通阴影

UE4虚幻引擎 Cel着色材质教程卡通阴影

作者:Tommy Tran

由于基于物理的渲染,虚幻引擎4的开发非常容易。该软件可近似估算光线与材料的相互作用方式,从而产生逼真的图像。但是,如果要开发具有风格外观的游戏,则需要探索其他技术。

实现风格化外观的一种方法是使用cel着色材质(也称为卡通着色材质)。该技术模仿了卡通和动漫中通常使用的阴影。您可以在诸如Jet Set Radio,《塞尔达传说:风行者》和《地心引力》等游戏中看到此类示例。

在本教程中,您将学习:

  • 创建和使用后处理材料
  • 创建一个cel着色器
  • 将cel着色器隔离到特定的网格
  • 使用查找表控制色带

入门

下载入门项目并解压缩( 提取码: incg)。导航到项目文件夹,然后打开CelShader.uproject。您将看到以下场景:

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

这是您将要进行阴影处理的字符。在开始之前,您应该知道什么是cel着色材质。

什么是Cel卡通着色材质?

Cel卡通着色是当您使用多个颜色带,而不是连续渐变来渲染某些东西时。

resize,m fill,w 1062,h 468# - UE4虚幻引擎 Cel着色材质教程卡通阴影

以下是《塞尔达传说:荒野之息》中的 cel着色示例。请注意,只有角色具有cel阴影,而背景却没有(是不是接近卡通动画片黑白灰)。

resize,m fill,w 1400,h 768# - UE4虚幻引擎 Cel着色材质教程卡通阴影

在此图像中,有三个波段。一种用于阴影,一种用于中间色调,另一种用于高光。

一个常见的误解是,如果某物具有轮廓,则将其阴影化。例如Borderlands。尽管此游戏具有风格化的外观,但未进行 cel着色。您可以在下图中看到它。请注意,角色的阴影不利用颜色带。

resize,m fill,w 1400,h 788# - UE4虚幻引擎 Cel着色材质教程卡通阴影

即使轮廓不是单元阴影,也通常将它们组合在一起。这有助于使图像看起来像已绘制或着墨。您会在动漫风格的游戏(例如Guilty Gear Xrd和Dragon Ball FighterZ)中看到很多。

resize,m fill,w 1400,h 788# - UE4虚幻引擎 Cel着色材质教程卡通阴影

在下一节中,您将学习如何实现cel着色。

Cel着色方法

最常见的方法是比较表面方向(称为法线)和光照方向。通过计算法线和光方向之间的点积,您将获得一个介于-1和1之间的值。

值-1表示表面和光朝向相反的方向。0表示它们彼此垂直。1表示它们朝向相同的方向。

resize,m fill,w 980,h 342# - UE4虚幻引擎 Cel着色材质教程卡通阴影

通过对点积进行阈值化,可以创建多个波段。例如,如果点积大于-0.8,则可以分配较深的颜色。如果点积低于-0.8,则指定浅色。这将创建一个两波段cel着色器。

resize,m fill,w 328,h 468# - UE4虚幻引擎 Cel着色材质教程卡通阴影

此方法的局限性是其他光源不能影响cel阴影对象。同样,对象不能在cel阴影对象上投射阴影。

resize,m fill,w 1270,h 716# - UE4虚幻引擎 Cel着色材质教程卡通阴影

要解决此问题,您需要使用其他方法。您无需计算点积,而可以计算表面的照度。然后,您可以在阈值化期间使用该值而不是点积。

resize,m fill,w 1270,h 716# - UE4虚幻引擎 Cel着色材质教程卡通阴影

既然您知道了cel着色器是什么以及它是如何工作的,现在该创建一个了。

创建Cel着色器

本教程中的cel阴影着色器材质是后期处理效果。后处理使您可以在引擎完成渲染后更改图像。后处理的常见用途是景深,运动模糊和模糊。

要创建自己的后期处理效果,您需要使用后期处理材料。导航到“ 材料”文件夹并创建一个新的“ 材料”。将其重命名为PP_CelShader,然后将其打开。

要将物料转换为后处理物料,您需要更改其domain。转到“详细信息”面板,并将“ material domain”更改为“ post process”。

resize,m fill,w 638,h 482# - UE4虚幻引擎 Cel着色材质教程卡通阴影

创建cel着色器的第一步是计算每个像素的照明程度。我们将其称为照明缓冲区。

计算照明缓冲区

当虚幻引擎将图像渲染到屏幕上时,它会将通行证存储到缓冲区中。要计算照明缓冲区,您将需要访问以下两个缓冲区:

  1. 后期处理输入:虚幻引擎执行了照明和后期处理后,会将图像存储到此缓冲区。如果您不执行进一步的后期处理,这就是虚幻将显示给播放器的内容。
  2. 漫反射色:这是没有任何照明和后期处理的场景。它将包含屏幕上所有内容的漫反射颜色。

resize,m fill,w 1400,h 558# - UE4虚幻引擎 Cel着色材质教程卡通阴影

要访问这些缓冲区,您需要使用SceneTexture节点。创建一个并选择它,然后转到“详细信息”面板。要访问“后处理输入”缓冲区,请将“ 场景纹理ID”更改为PostProcessInput0。

resize,m fill,w 676,h 316# - UE4虚幻引擎 Cel着色材质教程卡通阴影

要访问“漫反射颜色”,请创建另一个SceneTexture节点。将其场景纹理ID更改为DiffuseColor。

resize,m fill,w 676,h 316# - UE4虚幻引擎 Cel着色材质教程卡通阴影

照明缓冲区应仅包含灰度值(描述灰度值)。这意味着您不需要两个缓冲区中的颜色信息。要放弃颜色,连接颜色两者的输出SceneTexture节点的饱和度下降。这将使两个缓冲区完全饱和。

resize,m fill,w 758,h 562# - UE4虚幻引擎 Cel着色材质教程卡通阴影

要计算照明缓冲区,只需将SceneTexture:PostProcessInput0除以SceneTexture:DiffuseColor即可。

resize,m fill,w 998,h 566# - UE4虚幻引擎 Cel着色材质教程卡通阴影

然后,使用clamp,使值保持在0到1范围内。由于您知道可能的值,因此这使执行阈值化变得更容易。

resize,m fill,w 1394,h 568# - UE4虚幻引擎 Cel着色材质教程卡通阴影

这是照明缓冲区的可视化:

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

如您所见,亮的区域更接近白色,不亮的区域更接近黑色。

接下来,您将使用照明缓冲区创建阈值。

创建阈值

对于此cel着色器,任何值大于0.5的像素都将使用常规漫反射颜色。值小于0.5的像素将使用一半亮度的漫反射颜色。

首先,创建一个If节点。这将使您比较两个值。然后,您可以根据比较结果指定不同的输出。

resize,m fill,w 202,h 320# - UE4虚幻引擎 Cel着色材质教程卡通阴影

接下来,将clamp连接到A输入。然后,创建一个值为0.5的常数并将其插入B输入。

resize,m fill,w 904,h 318# - UE4虚幻引擎 Cel着色材质教程卡通阴影

注意:您可以更改B输入的值来更改阈值。

要获取颜色,请创建一个SceneTexture并将其“ 场景纹理ID”设置为“ 漫反射颜色”。随后,乘颜色由0.5得到一半的亮度弥漫。

resize,m fill,w 690,h 244# - UE4虚幻引擎 Cel着色材质教程卡通阴影

最后,像这样连接一切:

resize,m fill,w 2278,h 942# - UE4虚幻引擎 Cel着色材质教程卡通阴影

摘要:

  1. 脱饱和desaturation会将后处理输入和漫反射颜色转换为灰度图像
  2. 除法将后处理输入除以漫反射颜色。这将为您提供照明缓冲区。
  3. clamp保持0到1范围内的值
  4. 所述如果将输出正常漫反射颜色如果照明值大于0.5。如果小于0.5,则将以一半亮度输出漫反射颜色。

现在有了cel着色器,您需要将其应用于场景。

使用后处理材料

要使用后处理材料,您需要创建一个后处理卷。这些通常用于控制后期处理效果,例如白平衡,饱和度和对比度。

单击“ 应用”,然后返回到主编辑器。要创建后处理卷,请转到“模式”面板,然后选择“ 卷”类别。然后,将“ 后处理体积”拖动到视口中以创建一个。

resize,m fill,w 1166,h 772# - UE4虚幻引擎 Cel着色材质教程卡通阴影

现在,您需要告诉后期处理卷使用cel着色器。选择“后处理量”后,转到“详细信息”面板。然后,找到“ 渲染功能后处理材料”,然后单击+图标。这将向阵列添加一个新条目。

resize,m fill,w 626,h 496# - UE4虚幻引擎 Cel着色材质教程卡通阴影

接下来,点击选择下拉菜单,然后选择资产参考。

resize,m fill,w 762,h 298# - UE4虚幻引擎 Cel着色材质教程卡通阴影

这将允许您选择一种材料。单击“ 无”下拉列表,然后选择PP_CelShader。

resize,m fill,w 712,h 208# - UE4虚幻引擎 Cel着色材质教程卡通阴影

默认情况下,仅当您在其中时,后处理卷才会生效。但是,在这种情况下,您希望它影响整个世界。为此,向下滚动到Post Process Volume Settings,然后启用Infinite Extent(Unbound)。

resize,m fill,w 548,h 288# - UE4虚幻引擎 Cel着色材质教程卡通阴影

现在,将cel着色器应用于整个图像,您将看到以下内容:

resize,m fill,w 1278,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

“等等,这看起来不像您先前显示的cel着色器!”

它看起来不同的主要原因是因为引擎在色调映射后应用了cel着色器。要解决此问题,您需要在色调映射之前告诉引擎应用cel着色器。

在tonemapping之前应用Cel阴影

在向播放器显示图像之前,虚幻引擎执行一个称为“色调映射”的过程。进行色调映射的原因之一是使图像看起来更自然。它通过输入颜色来实现此目的,然后使用曲线将其移动到新值。

下面是后处理输入缓冲区的两个图像。一个在色调映射之前,一个在色调映射之后:

resize,m fill,w 1400,h 674# - UE4虚幻引擎 Cel着色材质教程卡通阴影

如您所见,色调映射之前的高光太亮。但是,在进行色调映射后,明亮的区域更柔和。

在大多数情况下,tonemapping映射就可以了。但是,由于在计算中使用了“后处理输入”缓冲区,因此需要其原始值。

打开PP_CelShader并确保您没有选择任何内容。然后,转到“详细信息”面板,然后找到“ 后处理材料”部分。设置可混合的位置,以色调映射之前。

resize,m fill,w 608,h 218# - UE4虚幻引擎 Cel着色材质教程卡通阴影

单击“ 应用”,然后返回到主编辑器。现在的颜色看起来好多了!

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

在下一节中,您将学习如何仅将cel阴影应用于特定对象。

隔离Cel着色器

要隔离后期处理效果,您需要使用一个称为“ 自定义深度”的功能。像后期处理输入和漫反射颜色一样,这是可以在后期处理材料中使用的缓冲区。

在了解什么是“自定义深度”之前,您应该知道“ 场景深度”缓冲区是什么。场景深度存储每个像素距相机平面的距离。这是场景深度的可视化:

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

自定义深度存储相同的信息,但仅用于您指定的网格。这是维京人渲染到“定制深度”时的可视化效果:

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

通过将“场景深度”与“自定义深度”进行比较,可以隔离效果。如果“场景深度”小于“自定义深度”,请使用普通图像。如果“场景深度”大于“自定义深度”,请使用cel阴影图像。

第一步是将维京海盗渲染到“自定义深度”。

使用自定义深度

转到World Outliner并选择SK_Viking。然后,转到“详细信息”面板并找到“ 渲染”部分。接下来,启用Render CustomDepth Pass。

resize,m fill,w 646,h 394# - UE4虚幻引擎 Cel着色材质教程卡通阴影

接下来,您需要执行深度比较。打开PP_CelShader并创建以下设置:

resize,m fill,w 1066,h 822# - UE4虚幻引擎 Cel着色材质教程卡通阴影

注:您需要屏蔽“场景深度”和“自定义深度”的原因是,“ If”节点仅接受A和B输入的标量。

然后,连接卡通渲染网络的输出A> B。最后,将“ 如果您刚制成了发射颜色”连接到输出。

resize,m fill,w 1300,h 894# - UE4虚幻引擎 Cel着色材质教程卡通阴影

现在,只有渲染为“自定义深度”的网格才具有cel着色。

单击“ 应用”,然后返回到主编辑器。您将看到只有维京人现在具有cel阴影。

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

cel着色器效果很好,但是有点简单。如果您想拥有两个以上的队伍怎么办?如果要在频段之间创建更柔和的过渡怎么办?您可以使用查找表(LUT)完成此操作。

什么是查询表?

小时候,您了解了乘法。但是,年轻的头脑可能无法执行这些计算。您可能没有使用计算表,而是使用乘法表来“查找”答案。

resize,m fill,w 1400,h 544# - UE4虚幻引擎 Cel着色材质教程卡通阴影

这本质上就是LUT。它是一个值数组(通常是预先计算的),您可以使用输入进行访问。对于乘法表,输入为乘数和被乘数。

在此cel着色器的上下文中,LUT是具有某种渐变的纹理。以下是LUT外观的四个示例:

resize,m fill,w 512,h 304# - UE4虚幻引擎 Cel着色材质教程卡通阴影

当前,计算阴影颜色的方法是将漫反射颜色乘以0.5。您将使用LUT中的值,而不是乘以常数0.5。通过这样做,您可以控制频段的数量及其过渡。您可以通过LUT的外观了解阴影的外观。

使用LUT之前,您需要更改其某些纹理设置。

更改LUT设置

导航到Textures文件夹,然后打开T_Lut_01。这是LUT的样子:

resize,m fill,w 512,h 64# - UE4虚幻引擎 Cel着色材质教程卡通阴影

您需要更改的第一个设置是sRGB。渲染时,虚幻引擎会将启用了sRGB的所有纹理转换为线性颜色。基本上,这使虚幻引擎更容易执行渲染计算。

sRGB设置非常适合描述外观的纹理。但是,法线贴图和LUT之类的纹理具有用于数学计算的值。因此,虚幻应该假定它们的值已经正确。通过禁用sRGB,虚幻引擎将不会执行到线性颜色的转换。

要做到这一点,取消了sRGB的复选框。您可以在“ 纹理”部分下找到此设置。

resize,m fill,w 786,h 194# - UE4虚幻引擎 Cel着色材质教程卡通阴影

您需要更改的下一个设置是纹理平铺的方式。由于未显示此纹理,因此无需对其进行平铺。此外,在从边缘采样时,启用平铺会引入问题。例如,如果要从左侧边缘采样一个像素,由于平铺,它将尝试融合到右侧边缘。

要禁用平铺,请将X轴平铺方法更改为Clamp。对Y轴平铺方法执行相同的操作。

resize,m fill,w 786,h 324# - UE4虚幻引擎 Cel着色材质教程卡通阴影

设置就这些了。现在,您需要在后处理材料中使用LUT。

使用LUT

关闭T_Lut_01并打开PP_CelShader。首先,删除突出显示的节点:

resize,m fill,w 1934,h 824# - UE4虚幻引擎 Cel着色材质教程卡通阴影

接下来,创建一个纹理样本并将其纹理更改为T_Lut_01。该LUT将创建具有软过渡的三个频段。

resize,m fill,w 682,h 328# - UE4虚幻引擎 Cel着色材质教程卡通阴影

如果您还记得,LUT会采用输入来确定要输出的值。在这种情况下,您将使用照明缓冲区作为输入。

为此,将夹钳连接到Texture Sample的UV上。

resize,m fill,w 676,h 376# - UE4虚幻引擎 Cel着色材质教程卡通阴影

这是可行的,因为照明缓冲区和纹理坐标在0到1的范围内。例如,如果来自照明缓冲区的像素为0.5,则LUT将从纹理的中间输出像素值。

接下来,您需要将漫反射颜色与LUT相乘。为此,请重新创建以下设置:

resize,m fill,w 980,h 528# - UE4虚幻引擎 Cel着色材质教程卡通阴影

附加的原因是将“ 纹理样本”的输出转换为四通道向量。您需要执行此操作,因为您无法将三通道向量乘以四通道向量(SceneTexture)。

最后,像这样连接一切:

resize,m fill,w 1300,h 718# - UE4虚幻引擎 Cel着色材质教程卡通阴影

现在,您无需将漫反射颜色乘以常量,而是要乘以LUT中的值。这控制着有多少个频段及其过渡(取决于LUT)。照明缓冲区确定LUT将输出哪个值。

单击“ 应用”,然后关闭PP_CelShader。现在,阴影将具有三个波段,各波段之间的过渡更柔和。

resize,m fill,w 1280,h 720# - UE4虚幻引擎 Cel着色材质教程卡通阴影

下面是替代LUT外观的比较。这些LUT也包含在项目中。

resize,m fill,w 1400,h 788# - UE4虚幻引擎 Cel着色材质教程卡通阴影

后处理材料非常强大。它们使您可以创建许多逼真的风格化效果。如果您想了解有关后期处理的更多信息,请查阅后期处理效果文档。

Author: incg_UE4

Leave a Reply

Your email address will not be published. Required fields are marked *