CG世界 发表于 2024-1-2 15:38:23

UE5风格化漫画着色器解构


本教程旨在阐释此类材质的开发过程。我们将一步步介绍期望的效果以及实现方法。从美术师层面来讲,制作复杂的风格化材质并非难事,在适当的指导下,任何人都可以做到。
介绍涉及的主题如下:
[*]创建简单轮廓
[*]添加边缘刮痕
[*]颜色和纹理贴图支持
[*]卡通风格的色带效果
[*]轮廓光效果
[*]法线贴图
[*]高光和自发光纹理贴图支持
[*]照明设备蓝图(Blueprint Lighting Rig)的设置和使用材质参数集



早期作品起初,我在一个教程中展示过我的早期作品,还在虚幻商城上发布了风格化材质包(Stylized Materials Pack):https://dev.epicgames.com/commun ... content-development


静态网格体轮廓材质
为避免使用后期处理材质,我开始寻找其他方法,例如使用菲涅尔函数来处理模型外缘。经过不断试错,总结各种创建卡通着色器的教程之后,我构建了一张图表,它可以成功在网格体边缘添加黑色线条。随着继续探索,我发现对像素法线和摄像机向量求点积可以获得和使用菲涅尔函数一样的结果,但设置更简单。

划痕
除了轮廓,我还用同样的方法,在边缘处创建了划痕和斑点,例如点彩。这有助于呈现更好的自定义或手绘效果,还可以根据美术要求创建各种痕迹或斑点效果,包括雕刻线条、半色调斑点等等。需要注意的一点是,纹理映射受网格体UV贴图的影响。如果网格体上没有UV,就不会显示纹理。此外,UV定义了纹理的位置和方向,接缝处可能会产生不理想的结果等等。


色彩、纹理和条带
由于材质使用了混合节点,添加色彩和纹理节点非常容易,这样就可以重新添加原始纹理,将轮廓和划痕叠加到原始纹理贴图上。此外,还可以在其中添加法线贴图,实现更有趣的表面处理。
通过使用曲线图集,我们可以创建灰度色彩的高对比度条带,再叠加到原始色彩或纹理上。此外,还可以在条带的基础上添加效果,在每个条带之间创建不同的过渡效果,比如线条或半色调图案。条带由亮变暗,这种渐变可以通过专门设计用于控制材质这一方面的蓝图的光矢量来控制。


此图显示了所有节点是如何通过“混合变暗节点(Blend Darken Nodes)”协同工作,并将所有效果混合在一起的。要注意的是,混合节点虽然很有用,但是会产生一定的性能开销。



随着着色器的复杂度提高,处理时间也会增加。创建材质图表时要注意性能影响。这可以在视口中快速检查,选择:







纹理卡通效果
在图表中添加“LineScreen”和“Halftone”纹理,我们可以通过在这两个纹理之间插值,从而在条带之间添加纹理效果。



如下图所示,这些节点被放在“曲线图集条带(Curve Atlas Band)”前面。



轮廓光效果
轮廓光是指仅在网格体边缘添加边缘光照效果。使用Blueprint Light设置中的光向前向量来设置轮廓光角度,使其位于模型上的正确位置。这个着色器有两种轮廓光效果:前轮廓光和后轮廓光,可以创建暖、冷两种氛围的轮廓光。


此外,这张图表中还有部分节点是由材质参数集(Material Parameter Collection)中的参数控制的。这些节点都用于和Blueprint Lighting Rig进行沟通,获取有关光源朝向的信息,以及轮廓光颜色、宽度和偏移值,这些属性还可以通过材质实例和细节面板中的光源装置参数控制。

代码概览及这部分节点与图表剩余部分的连接方式如下图所示。


原因是每个材质实例都有专门针对轮廓光值的控制选项,但光源装置具有全局控制性,会影响所有材质实例。这样方便对整个场景做调整,也方便对单个材质或对象的外观做细微的调整。
在这张图表中还可以看到用于添加自定义法线贴图的纹理参数。再仔细看,添加平整法线贴图和线性插值(Lerp)节点可以调节主要法线贴图的强度,加强或削弱其在表面呈现的效果。这样材质会更贴合美术方向。


高光效果
高光控制可以基于光矢量在表面创建明亮的白色高光,还能调整尺寸和边缘硬度,以呈现出更好的高光效果。


此时的卡通着色器    完整的材质图表大致如下:



材质参数集
材质参数集是包含一系列标量和矢量参数的集合,可以和Blueprint Light Rig一起使用,将特定数据输入材质。
这些数据包括定向光源(Directional Light)组件的向前向量和颜色,与轮廓光宽度(Rim Light Width)和颜色有关的自定义公开参数,以及色差(Chromatic Aberration)设置等等。在材质中,我们使用材质参数集节点来访问保存在这里的值。
这一资产是Blueprint Light Rig和材质之间的数据桥梁。打开这个资产,参数的设置方式如图所示,注意每个参数的名称,以便之后在Blueprint Light Rig事件图表中引用它们。


Blueprint Light Rig
蓝图的组件很少:一个用于处理色差的后期处理(PostProcess)组件、一个定向光源、一个用于编辑器内Tick的实时链接控制器(LiveLinkController)。


图表的基本工作是通过更新蓝图中的变量,不断更新材质参数集,更新材质参数集中的标量和向量值。材质也会读取这些值并进行相应的更新。实现方法是,使用设置标量参数(Set Scalar Parameter)和设置向量参数(Set Vector Parameter)节点来更新材质参数集中的值。在蓝图和材质节点中引用相同的材质参数集非常重要。





这个蓝图的关键是使用实时链接控制器在编辑器中运行。这会在编辑器中生成Tick,使材质参数集可以实时更新,但不需要处于运行(Play)模式。如果是游戏,这就相当于使用事件Tick(Event Tick)来触发更新。
蓝图的主要功能更新数值产生变化的变量,材质可以根据需要获取相应的变化和更新。公开的参数可以让我们在编辑器的细节面板中实现修改,不需要返回蓝图。


材质本身也有参数被添加到Blueprint Light Rig的值中,目的是为了在必要时针对每个对象更好地控制材质的特定部分。


升级换代(11)到目前为止,着色器已更新至第10版。接下来,我们将迎来第11版。
为此,我们将添加两项功能。首先,添加材质对彩色半调的支持;其次,创建简单的后期处理材质,用于为整个场景添加效果,作为环境元素,例如体积和大气效果,比如云,这对生成风格化材质来说很有挑战性。
为了给着色器添加彩色半调,我从简单的1024 x 1024半色调开始,创建了4种颜色:黑色、青色、洋红和黄色。这是传统印刷技术中使用的颜色,经过一些调整,结果令人非常满意。


叠加使用半调网屏时会产生摩尔纹现象。为了减少这种现象,每个网屏都按不同角度角度进行了旋转。
在材质中,我们使用自定义旋转器(Custom Rotator)节点来设置每个网屏的角度。因为旋转值已被标准化为0-1的范围,我们可以将自定义浮点参数除以360,按度数来设置角度。其中还有一些参数可以用于偏移网屏,但不需要偏移。


所有网屏的缩放都一样,使用一个浮点标量并让它乘以纹理坐标(Texture Coordinate)节点就可以实现理想的效果。


将4个彩色半调网屏添加到着色器图表中。角度设置如下:黑色45度、青色75度、洋红15度、黄色0度。


一系列乘法节点成就了最终的网屏图像,然后在“实色(Solid Color)”参数之后利用线性插值节点将该图像添加到主图表中。


当然,这会给材质实例增加大量参数,但是我们可以在这个基础上开始探索这种传统分色技术。
半调后期处理材质
为了完成项目,我决定给后期处理体积(Post Process Volume)添加一个巧妙但简易的后期处理黑色半调(Post Process Black Halftone)材质。这是对后期处理体积中已有的简单轮廓的补充。


后期处理材质(Post Process Material)的完整图表。需要注意的一点是,网屏的宽高与纹理的映射方式有关。通过添加查看尺寸(ViewSize)节点,我们可以拆分U和V值,获取高度,再用高度除以宽度,得到适当的比值,用于乘以缩放值。







总结
通过这种有趣的方式,我们可以深入了解虚幻引擎中的风格化漫画着色器。花点时间了解这些函数和技术可以帮助您以更好、更有效的方式在项目中获得您想要的效果。

希望本文的内容对您有所帮助,期待看到您的创作!

全文完
页: [1]
查看完整版本: UE5风格化漫画着色器解构