虚幻 5 卡通材质与边缘线的学习经历分享

本文由 简悦 SimpRead 转码, 原文地址 www.bilibili.com

作者:枫狗椛椛

导览、效果预览卡通材质预览想传 GIF 图的,可惜太大了,算了零、使用的材质材质设置一、阴影情况的获取一开始是在这个大佬的视频里学的卡通材质的写法视频传送门:https://youtu.be/xf21CBx8rYs 这个大佬是使用环境光方向与顶点法线方向进行点乘获得阴影信息,而且效果很好。

导览、效果预览

卡通材质预览

想传 GIF 图的,可惜太大了,算了

零、使用的材质

材质设置

一、阴影情况的获取

一开始是在这个大佬的视频里学的卡通材质的写法
视频传送门:https://youtu.be/xf21CBx8rYs

这个大佬是使用**环境光方向**与**顶点法线方向**进行**点乘**获得阴影信息,而且效果很好。

获取阴影情况的蓝图与预览

不过这位大佬使用的是 **If 节点**对颜色进行一个硬边缘的阴影计算,这个方法没法进行硬软边缘的调整,所以我继续去寻找别的教程去改进我的材质。

二、硬软边缘调整实现

我无意间,刷到了这个大佬的视频:卡通材质教程

这个大佬使用的是一条 Color 曲线

虚幻引擎中 Color 曲线编辑器界面

我们可以通过对 Color 曲线的 RGB 关键点进行调整实现边缘硬软程度的变换

然后我们结合之前获得的阴影信息,给他加上一些偏移,**恒定偏差标度**一下,然后拉给颜色曲线使用,这样我们就得到了一个非常卡通的阴影效果啦!

计算后的阴影信息

看上图,球球**白色部分的值为 1**,黑色的为 0,所以我们可以通过 Add 节点**给整体加上一定的数值,实现**阴影 Alpha 的调整(不要忘了加上 Saturate 哦!)。然后我又想到了 MMD 里面,有 Toon 贴图这种东西,他硬软边缘可以调整,颜色也可以调整,那我们在虚幻也是可以实现的,于是,我们可以通过原阴影作为蒙版,进行一系列数学变换(有点不好解释呢),把阴影颜色给他安上去。

加上了颜色的阴影

阴影搞定咯,然后我们就可以把**基础色贴图**与**计算好的阴影**相乘,得到阴影计算后的基础色贴图啦!(下图为详细的蓝图节点以及效果预览)

预览与蓝图节点

三、高光计算

轮到高光,普通的高光计算呢,我是做成了和阴影计算相反的样子,大概长这样

普通高光计算

而特殊高光我还是按照上面那位大佬的方法进行制作:卡通材质教程

不过我使用了和他不一样的计算方法

特殊高光计算

我使用**环境光方向**与**镜头方向**相加,Normalize 之后与法线点乘(你与**像素法线**点乘和**顶点法线**点乘都彳亍,差别不大)之后的运算就是调整高光的偏移以及高光的软硬程度了,然后搞上高光颜色和高光强度,Saturate 一下之后给 Lerp 判断**(Lerp 的 Alpha 连接着阴影计算中的颜色曲线)**这样我们就得到了一个看起来很二刺螈的高光效果了!

特殊高光

如果你想在材质实例中对高光的模式进行调整的话,可以使用 bool 变量和 Switch 节点去控制材质节点的走向,例如

Switch 节点使用

四、头发高光

我对高光的探索之旅其实还没有结束,我去研究了一下各向异性制作头发高光,发现好复杂,晦涩难懂,我的能力确实不足,如果有大佬非常会,请教教我 o(╥﹏╥)o,我呢是采用了一下两位大佬的方法去制作头发高光

(1)伪各向异性

(2)https://www.youtube.com/watch?v=r5jReu4xsAs

第二个视频不是英语,所以我是真的看不懂,如果有懂的好哥们儿好姐们儿能帮帮小弟我

然后我也用了 Switch 去调节头发高光模式(这里我就不放蓝图节点了,和视频中一样)

(油管大佬的方法适用范围不太广,b 站大佬的高光方法可以完美适配 mmd 模型与贴图)

五、边缘光

终于来到了边缘光的计算了,边缘光一般是使用菲涅尔节点去制作的,原理很简单,基本不需要解释了,直接上蓝图节点

边缘光计算蓝图节点

Power 的 base 连的是**阴影计算后的结果**,然后加上一些调整硬软偏移和 Alpha 值之类的参数,最终得到类似于这种边缘光效果

边缘光预览

六、最后的处理

所有的东西都计算完毕之后,把**阴影计算后的结果**、高光计算后的结果、**边缘光计算后的结果**加起来,就能得到我们的卡通材质啦,不过还没完,为了让我们的材质能与光照颜色产生交互,我们要给他加上这个

环境光影响

环境光颜色变化影响材质整体的颜色,这样子就非常的 NICE!

这样子我们就得到了一个非常好看的卡通材质啦!

卡通材质最终效果

七、边缘线

跟着这个教程,讲的十分详细

https://www.raywenderlich.com/92-unreal-engine-4-toon-outlines-tutorial

不过,如果你跟着这个教程做出了边缘线的后期处理材质,并将其应用在后期处理体积中,你会发现,全部的东西都变成了带边缘线的,而且边缘线在不停地抖动,这是为什么呢

问题一:局部边缘线实现方法:

在教程中的他教你写的材质函数应该改成这样子

材质函数节点

即,将场景深度变成自定义深度

然后在你需要边缘线的网格体渲染层设置中打开渲染自定义深度通道

自定义深度通道

这样子,我们就只有我们想要的网格体有边缘线啦

问题二:边缘线抖动修复:

打开我们的后期处理材质,找到这个材质设置

色调映射前

这样子就会在抗锯齿之前实现 postprocess,然后交给抗锯齿老兄去消掉我们抖动的狗牙

问题三:边缘线透视问题(紧急修复)

加入图示蓝图节点

相乘后得到的结果连接到 Lerp 的 Alpha 中修复边缘线透视问题

这样,我们的卡通材质和边缘线材质都全部制作完成了,享受你在虚幻 5 引擎中的学习乐趣吧!如果你还是有地方不懂,欢迎私信与评论讨论!

评论