您需要 登录 才可以下载或查看，没有账号？注册
x
作者: Eibriga 作者网站：https://cyn-prod.com/stylized-paint-shader-breakdown
[micxp_wxonkey]wxv_3014952634651000836[/micxp_wxonkey]
这是我在个人项目研发过程中制作的 UE5 着色器。最初的想法是看看我可以在多大程度上将材质风格化为强烈的绘画效果，而不使用后期处理材质，也不向引擎添加着色模型。一些限制：我创建这个着色器作为我正在从事的个人项目的研发。这是一个武器操作和射击模拟器（巴甫洛夫 VR 遇见了鸭子狩猎？），我打算在其中混合各种风格，例如绘画、绘画、PSX、DOS 等。一个限制是我不会使用后期处理效果，因为我希望能够在一个场景中无缝地混合这几种风格。各种个人工作流程考虑因素也影响了我所做的选择，可以通过多种方式实现相同的结果，并且我将描述的大多数模块都是自给自足的。这是研发结束阶段，不是经过生产测试的着色器，它实现了我想要的结果，但当新用例不可避免地出现问题时，它可能还会发生很大变化。
.
创建纹理
对于这个着色器，我们只需要一个纹理，但我们将在红色和绿色通道上使用法线贴图，以及蓝色和 Alpha 通道上的两个附加贴图。
纹理是在 Substance Designer 中创建的，而且非常简单。
对于漫反射，我们使用模糊方形和垃圾贴图的混合来创建单个绘画描边，然后用随机灰度值将其散布在地图上：
法线贴图是最重要的部分。为此，我们分散相同的形状，但我们采用法线向量并将其非常强烈地随机化，就像每个绘画笔触完全指向不同的方向一样。然后我们将其与生成的法线贴图混合以获得画笔细节。
最后要创建一张贴图，一个辅助蒙版，它将为我们提供另一个具有更多细节和不同比例的画笔描边图案。该纹理对比度非常高，并且使用完整的值范围，因为我们将使用它来混合渐变。
一旦包装好，我们就拥有了独一无二的质地。如果您对我们没有保留法线贴图的蓝色通道感到惊讶，那么这是一种更常用于控制台以保留内存的优化技术。这是一篇详细的 simplegon 文章，介绍了这项技术。
https://www.simplygon.com/posts/dadb5075-a246-456e-9803-1cfce9eb061f#:~:text=Recreating%20blue%20channel%20from%20red,red%20%2D%20green*green)%20.
有了这个纹理，我们就可以在 Blender 的帮助下开始 UE5 之旅了。我在这个项目中使用 UE5.1。
.
虚幻着色器
第一步是创建我们的漫反射。我们将使用贴图的 B 通道作为渐变来插入两个输入颜色，我们可以将其设置为参数以稍后更改材质实例的颜色。这一步非常简单，但在这种情况下已经有一个小技巧可以创造奇迹，即使用 BumpOffset（视差贴图的廉价版本）为我们的画笔描边提供一些深度。凹凸偏移可能会在浅角度或高高度值下崩溃，但这实际上在这种情况下对我们有利，因为该效果与我们的绘画效果配合得很好！对于高度图，我们只需使用蓝色通道蒙版即可，瞧！
[micxp_wxonkey]wxv_3014963346416877569[/micxp_wxonkey]完成此操作后，我们可以使用 SkyAtmosphereLightDirection 的输入创建一个简单的卡通照明效果。请注意，这仅适用于场景的太阳。但是，它与在此处输入可通过蓝图脚本更新的自定义方向一样有效。由于我们的法线贴图纹理中有附加信息，因此我们不能让虚幻像往常一样处理它，我们必须对其进行一些操作以使其可以被引擎消化。Unreal 期望 -1 到 1 的正常范围，而不是像纹理中编码的 0 到 1。就像乘以二并减一一样简单。我们没有重建法线向量的 Z 分量，而是简单地对其进行近似，将 0.95 值附加到我们的向量上。 然后我们将此法线转换为世界空间向量，并将其与太阳光角度进行比较。通过快速操作，我们得到了值 0、0.25 和 1 的阶梯梯度，可以与我们的纹理相乘。
现在我们已经有了漫反射的基础，我们可以继续进行反射了。这个过程或多或少是相同的，但是我们不是将世界法线与光矢量进行比较，而是将光矢量与反射矢量（世界法线通过它传递）进行比较，并使用点积来对颜色进行 lerp而不是只返回值。请注意，这里的数学不是最优的。为了避免获得与漫反射相同的画笔图案，我们只需调整 TexCoordinates 即可获得旋转的法线贴图。对我来说，这种效果确实赋予了绘画效果生命力。当物体移动时，你可以看到颜色在跳舞，感觉非常液体和油腻。请注意，这里的颜色是半硬编码的，作为输入参数，但您也可以从光线和环境中获取颜色。
[micxp_wxonkey]wxv_3014965148692529155[/micxp_wxonkey]
.
SDF闭塞
基础材料的第三个组成部分是遮挡。由于 Unreal 已将自身与 Lumen 的有符号距离场网格紧密地结合在一起，因此我们可以利用此功能来遮挡井。这是一种昂贵的遮挡方法，可能是着色器中最昂贵的部分，这就是为什么这个特定的图形将被放置在静态开关后面，以根据用例启用或禁用。下面您可以看到仅经过几次调整即可获得适当的衰减和对比度的 ApproxAO。
然后，我们使用与漫反射相同的纹理样本，但使用 Alpha 通道来侵蚀渐变并获得一些漂亮的画笔细节。提醒一下，此地图示例还使用了凹凸偏移，因此 AO 画笔描边也获得了一些不错的深度。
[micxp_wxonkey]wxv_3014966475837423619[/micxp_wxonkey]菲涅尔和边缘检测的一个小问题在这里我需要稍微休息一下来介绍一个问题 - 以及我在这里使用的解决方案。您可能非常了解菲涅尔效应，它非常有用且广泛使用。基本上，当网格表面处于浅角度时，它会给出较高的值，而当网格表面面向相机时，它会给出较低的值。您可以通过世界法线和视图方向的点积获得便宜的菲涅耳，如下所示：
好吧，太棒了 - 你会说 - 这是获得某种形式的边缘检测的好方法！确实如此 - 直到您在平坦的表面上尝试它，例如立方体或圆柱体：
没有布埃诺，根本没有布埃诺。整个顶面是白色的，如果您尝试从中提取边缘，我们会得到不需要的伪影。一种解决方案是...不要使用平坦的表面。完全没有。导入具有平滑阴影和/或倒角边缘的所有对象。这缓解了这个问题，但如果您“需要”那些平坦的表面，则会带来相当大的缺点。
正如您所看到的，当我们使用平滑的几何体时，情况得到了改善，但现在我们必须完全避免平坦的表面，这可能实用，也可能不实用。这减少了浅角度的问题，但也没有完全解决它。我选择使用的解决方案是将网格的平滑法线实际烘焙到顶点颜色中。在 Blender 中，就像选择平滑着色、将法线烘焙为顶点颜色并恢复为自动平滑着色一样简单。一些额外的几何形状可以提供更好的结果来支撑边缘，但不需要太多。您很可能使用烘焙的法线贴图来获得更高的精度，但这对我来说很有效，因为我主要使用简单的形状。这样，我可以导入网格并随时在着色器中访问平坦法线或平滑法线，而无需额外的采样器。这样，如果需要，我仍然可以使用平面多边形，尽管我仍然会尝试避免平面并在考虑到此限制的情况下编写网格。这仍然是边缘检测的近似值，稍后我们需要考虑边缘情况（双关语）。但这是可行的，只需在 Blender 中单击一个按钮，只需单击几行 Python 即可 ́\_(ツ)_/̅注意：请记住这一点。这个技巧以后其实会更有用！[micxp_wxonkey]wxv_3014968568157585414[/micxp_wxonkey]那么我们回到正题吧？.
边缘侵蚀
对于这个着色器，我们使用遮罩材质（它实际上对于核心部分来说并不是必不可少的，但由于一些决定将在稍后解释，因此在多种方面都很有用。）在下一部分中，我们将介绍我所说的“侵蚀”效应。这会用画笔纹理削掉边缘，但不能过多干扰轮廓。
对于这种效果和许多其他风格化的外观，使用屏幕坐标简单地投影纹理是很常见的，就像简单地在图像顶部添加一个图层一样。这对于静态图像甚至预渲染帧来说效果很好，但我真的觉得对于交互式相机来说，效果真的很糟糕，因为用户可以清楚地感觉到旋转和平移时纹理的投影方式。相反，我更喜欢使用相机矢量 X 和 Y 分量来获得伪视图映射，该映射在旋转时保持静态，并且在平移时具有更好的效果，但口味可能不同。下面您可以看到两者之间的比较。[micxp_wxonkey]wxv_3014969725147955200[/micxp_wxonkey]在这里您可以看到我们如何使用视图向量的点积和我们存储在顶点颜色中的法线（从 0 到 1 范围转换为 -1 到 1）生成一个廉价的菲涅耳，并使用细节贴图为渐变提供纹理。然后只需对结果进行步进即可获得 1 位掩码，如下右图所示：
这个mask就是我们想要的结果，但是还有一个问题需要解决。由于此遮罩会“咬住”边缘，因此重要的是它不会遮盖网格的重要部分。不幸的是，我们在菲涅尔小题外话中看到，即使使用平滑的顶点法线，浅角度的平面仍然可能产生不需要的阴影：
为了避免这些伪影，我创建了一个小函数来计算法线的面曲率。由于我们使用顶点颜色法线作为输入，因此我们不会遮盖整个平面，而只会遮盖“平滑平坦”部分，从而从遮罩中排除我们想要保留的圆盘边缘：
该曲率滤波器背后的想法非常简单。现代 GPU 以 4 个批次处理像素，我们可以使用 DDY 和 DDX 指令访问像素值之间的增量。如果我们将法线输入 DDY 和 DDX，如果面是平的，它将返回 0，否则它将返回像素之间的法线差异，或一些简化的曲率。我们只需获取 Y 和 X 上的绝对曲率并将其相加即可。我们需要在末尾添加一个非常小的值以消除浮点不精确性。不优雅但必要。
一旦与我们的第一个蒙版结合使用，这使我们能够避免平面被完全蒙版，但代价是一些更小的伪影，我可以忍受：
然后，我们可以将此蒙版输入到我们的不透明度中，并在边缘周围获得良好的油漆侵蚀效果。
.
外缘和偏移轮廓
在我们进一步讨论之前，我需要解释一下我所做的一个选择，该选择使事情变得比实际情况要复杂一些。目前，我只显示了着色器的“实体”部分，但事实证明，外缘和轮廓实际上是同一着色器的一部分。这并不是绝对必要的，但我想尝试看看是否可以在不引起额外绘制调用的情况下实现此效果。为了避免新的绘制调用，我们不能：- 使用另一种几何形状作为边缘和轮廓- 也可以使用另一种材料。然而，我们可以实例化原始网格并将参数传递给每个单独实例的着色器。这就是这里发生的情况，相同网格的 4 个实例，其自定义数据索引为 0.0（底座）、1.0（边缘）和 2.0（两个轮廓）。
然而，这又带来了一个新问题。我最喜欢的物体轮廓或边缘的技术是众所周知的，它是复制网格并反转法线，然后将其膨胀一定量并将两者结合起来。我很久以前就在致敬《卡尔文与霍布斯》的作品中使用过这种技巧
https://sketchfab.com/3d-models/calvin-hobbes-the-big-bang-dd484cd2dc9e477381e152b69d329506
好吧，这让我们陷入了某种困境，原因有两个。一、反转法线。这是一个微不足道的操作，但在 Unreal 中，我们在管道中太晚才控制着色器，不可能使用提供的 VS 和 PS 轻松反转法线。二、充气。膨胀在光滑的物体上工作得很好，只需使用面法线添加世界偏移即可......但在使用锐利的几何体时它会崩溃！[micxp_wxonkey]wxv_3014975709731897345[/micxp_wxonkey]这是我们存储的顶点颜色法线回归的地方！为了正确地膨胀网格，我们可以简单地使用它们而不是真正的顶点法线，瞧！我们的网格膨胀正常！（减去由于顶点颜色范围而导致的一些不精确）[micxp_wxonkey]wxv_3014977900735643648[/micxp_wxonkey]这是我发现的“伪反转”法线的解决方案。只需使用双面遮罩材质并使用“TwoSidedSign”标志来遮罩正面即可。虽然有点暴力，但确实有效。
现在，以一些体操为代价，我们可以随心所欲地膨胀和反转我们的实例。我们的 OuterRim 腐蚀掩模与前一个略有不同，因为它需要适用于背面并且更加明显。我们不会在这里使用曲率蒙版，因为该外缘将显示在我们的“实体”网格后面，并且我们不需要保留外缘的轮廓。该外缘使用与实体网格相同的漫反射输入。
我们只需将外缘实例放在与第一个实例相同的位置，将其膨胀一定量，我们就得到了一个漂亮的边缘：[micxp_wxonkey]wxv_3014979669054210051[/micxp_wxonkey]轮廓的蒙版更简单，下面有点乱，但你明白了要点：
对于轮廓，仅仅膨胀它们是不够的，我们还可以添加随机偏移以获得近似笔画的效果，为此我们可以使用每个实例节点的随机值，乘以硬编码的随机向量，两个实例中的每一个略有不同。
.
阴影
为了获得风格化的阴影，由于我们已经绑定到蒙版着色器，我只需在阴影传递期间覆盖不透明度：
这基本上与我们的侵蚀边缘完全相同，但具有单独的控件，并且更明显：[micxp_wxonkey]wxv_3014982063985016836[/micxp_wxonkey]现在剩下的就是根据实例参数使用简单的 lerp（请参阅本文末尾有关动态分支的注释）来混合所有这些部分。最终的图表相对较大，但如果考虑到我们正在做的工作量，就没有那么大了：
.
性能及注意事项
这里提供的版本性能相当不错，但尚未完全优化。我尚未测试是否值得在着色器复杂性的范围内保存绘制调用。如果我们能够在节点图中正确使用动态分支，那么这几乎绝对是值得的，不幸的是，这将需要对一些自定义节点进行硬编码，这绝对是可能的，但不太实用。虚幻中的动态分支是这里激烈争论的主题 。https://forums.unrealengine.com/t/dynamic-flow-control-in-materials/68393拥有双面遮罩材质也是一个缺点，特别是对于着色器的“实体”部分。一个好的优化过程是对相似的部件（例如不同的轮辋和轮廓）重用更多相同的代码。SDF AO 绝对是最昂贵的计算，但我还没有找到更有效的方法。我非常喜欢这个着色器的一件事是，它以一些hacky方式围绕unreal提出的常用管道工作，但最终它仍然适用于所有UE的系统，并且它作为常规光照着色器与Lumen一起工作得很好，作为一种金属材料，总而言之，它可以非常无缝地集成到场景中，因为它不依赖于后期处理。
它仅依赖于一种纹理，因此通过更改纹理中的笔触样式可以轻松地获得多种外观。
END
声明：本文章中所有的图片和视频都归原作者所有，仅供大家参考学习和交流，不作商业用途，侵删。如果你喜欢这篇文章,欢迎转发！谢谢!
更多学习和交流可扫描下方二维码哦！
| 
评分
