UE5创建卡通油漆丨墨水轮廓丨镜面反射高光着色器材质制作
Game艺视界原创 17596 3
实名

通过了实名认证的内容创造者

发布于 2022-4-21 21:40:22

您需要 登录 才可以下载或查看,没有账号?注册

x
本帖最后由 Game艺视界 于 2022-4-21 23:50 编辑

本期内容
今天我们将开始制作一个简单的油漆着色器,我们创建了相同的着色器,首先我想指出的是我将着色模型设置为无光照,将此设置为未点亮它不会执行所有照明指令和类似的事情,我们 想要将我们的着色模型设置为无光照,以便我们能够控制光照在着色器本身中的工作方式,而不是让引擎来做这件事

022395e2c221f7b462352684881a58f0.png


让我们看看我们的着色器

很快你就会看到我现在在这里有我的顶点法线

如果你在你的模型上使用法线贴图,你可以在这里用像素法线节点替换这个顶点法线节点,然后插入你实际上你想在这里插入的法线进入点积,以便您的法线贴图可能会影响着色器正常工作的方式,并且虚幻没有像unity这样的光矢量节点。它确实有光矢量节点但它只适用于一些非常特定的上下文,我们现在不在其中之一

所以我所做的是我在这里创建了这个节点,它只是一个向量3,它有0.7.7.7作为一种组成或假装的光向量我在我的光矢量和我的顶点法线

这给了我一个渐变,从亮面的一个渐变到暗面的负值,所以我需要在这里使用这两个节点来调整范围,以便它不是-1,1的范围,我有一个0,1的范围,所以我乘以0.5然后加0.5

我需要采用这个渐变并将其转换为 uv 坐标,这就是这个附加节点正在做的事情,这里的这组节点是我的 u 值,这里的节点是我的 v 值,然后我可以使用这些 uv 坐标查找我的纹理样本我的纹理样本是我在unity中使用的相同渐变

看看我们的纹理渐变在这里你可以看到我已经关闭了srgb,并将我的压缩设置设置为用户界面 2d,接下来要做的是将压缩方法或格式设置为b8 g8 r8 a8,这是一个未压缩的纹理,你不会得到和普通纹理一样的压缩效果,但没关系因为它只有 64 x 64,因此保持未压缩不会浪费大量空间

让它不被压缩所以有我的纹理,然后我相乘如果您为模型使用漫反射纹理,则使用我的颜色,您可以在此处用漫反射纹理替换此颜色,然后我将结果传递到自发光颜色

然后您就可以了,我有一些漂亮的卡通着色器油漆和再次就像我在unity中所做的那样

我可以在此处更改此值以选择,要从中采样的 64 纹理上的各种渐变中的哪一个

因此只有我的常规效果,或者我可以将其更改为0.2以获得我的第二个效果或0.3 这里有很多不同的变化,unreal 没有像 unity 那样好的滑块节点,所以我无法实时向你展示

今天我们来看看创建卡通材质轮廓或墨水线的三种方法

在上周的视频中我展示了如何创建这种曲调绘画效果

另一个节点确实将光向量引入,它被称为大气阳光向量,所以如果我现在使用这个节点,我只是使用这个硬编码值 0.7 0.7  0.7 这就是我要的上周,你可以看到,如果你看我的影子光线实际上来自左上角,但我创建的这个硬编码的光矢量不是来自同一个方向,所以它们不匹配,但是如果我采用这个大气阳光矢量节点并将其插入,它会给我场景中阳光的实际方向,所以现在我的卡通着色器上的照明与我的场景中的照明相匹配

好吧,让我们开始我们的曲调轮廓开始,在我们的调音着色器周围创建深色轮廓,我们将看看三种不同的方法

第一种我们直接在着色器本身中进行,这是最简单和最便宜的方法,但是我稍后会告诉你它有一些问题,所以我要做的是在这里建立了一个着色器网络,它会做我正在寻找的东西,这些节点正在创建我的黑暗轮廓,我做的第一件事是我把我的像素法线和我的相机矢量和我在这两者之间做一个点积,所以让我们看看我从像素法线和相机矢量的点积中得到的结果

一种像菲涅尔的效果所以我的模型边缘很暗中心很亮


这里的像素法线,但是如果我用顶点法线替换,你会看到我的结果有点粗,我不知道你是否 可以看到,它不像一个完美的球体,那是因为顶点法线正在进行插值,如果我没有高度细分的模型,如果我没有很多三角形,我会在这里得到一些伪影,我相信在世界空间中使用像素法线,而不是使用顶点法线,可以获得更高的质量相信顶点法线会更便宜,但像素法线会给你更高的质量

像素法线我会得到更平滑的结果

所以这是我得到的轮廓的基础,我想要做的是能够检测我在这里用我的点积计算的值是否低于特定阈值所以我正在使用一个 if 节点,在这里我说如果我从我的点积传入的这个值大于这个阈值那么我们将返回一个值,但如果它小于我们要去返回值 0。所以我将阈值设置为0.15,所以我要做的是,如果我在这里创建的这个蒙版比 0.15 暗,那么我们将返回一个值 0,否则我们将返回一个值 1。所以让我们来看看我们的 if 语句的结果


所以现在我可以把这个轮廓的结果,乘以我从上周的视频中创建的油漆效果,所以我们只需移动我们的节点稍微多一点,在这里获取我们轮廓的结果,然后将它乘以我们的油漆现在我们得到了一个漂亮的几乎不完整的调谐着色器


所以我们可以称之为完成,但是有几个问题我想告诉你这些是什么,如果你有这种深色轮廓方法非常有效漂亮的圆形物体,比如这里的球体,但是如果我要使用像立方体这样的方形物体例如,你可以在这里看到的是我正在做的这个点积,因为我的表面是平的,所以会分裂当我旋转它时,你可以看到没有黑暗在我的盒子边缘周围勾勒出轮廓,因为它无法检测到低于0.5 0.15 的阈值,但是在这些平面上,它会遮蔽整个面部,因为它低于 0.15,所以对于光滑的圆形物体这种方法生成油漆效果或墨水效果的效果非常好,但是对于方形或硬边物体它在这里不起作用

那么好在这里你可以看我的圆柱体上看到表面是圆形的区域我得到很好的轮廓

在表面平坦的区域,它要么不遮蔽任何东西,要么全遮蔽,这种方法在渲染方面是最简单的,可能也是最便宜的方法,但它也有一些缺点

所以让我们看一下另一种方法,这是我已经使用了很长时间的方法,事实上我在原始的 xbox 和 playstation 2 上制作了几款游戏调整了使用这种特殊技术的阴影,这种技术的优点是您根本不需要任何花哨的着色器,因为您现在只需使用网格本身来编辑网格,为了编辑网格,我不会在虚幻中这样做我将切换到使用blender,你可以看到我在这里使用的是 crazy suzanne 猴头

所以我要告诉你的是如何使用搅拌机创建这些轮廓,所以在这我们复制一个相同的网格然后切换到编辑网格

在我的面菜单下,我将沿着法线选择挤出面,这将沿着每个面指向的方向向外或向内推动我的猴子头的面,

所以如果我选择挤出面沿着法线,然后我只是慢慢地用鼠标向上拖动你可以看到它就像我的猴头像气球一样被充气,我也可以把它变小‍‍‍‍‍

所以我要做的是将向上推一点这样我的复制品比我原来的猴子头大一点现在我有两个猴子头,一个是原始的一个稍微大一点下一步我们翻转法线菜单,我将选择法线并翻转

现在您可以查看我是否取消选择所有内容并返回到我的布局模式,现在你可以看到我有这个轮廓,它围绕着我的猴子头

我要说的是你需要做的一件事,以确保它正常工作

我们要做的最后一件事是为大猴子添加一个材料,所以我将来到这里查看材料并点击加号以添加一个新的材料

通过这种技术,我几乎可以创建轮廓任何可以在 3d 中渲染的设备,因为我已经用几何体本身和网格完成了它,而不是依赖于在着色器中尝试这样做,所以这种技术效果很好,它可能是任何人用来调整着色的原始方法在3d 中

所以如果我想要把它带入虚幻我会将我的两个网格一起加入一个具有两种不同材质的网格,然后在虚幻中我会将我的调漆材质分配给较小的版本到较小的猴子头,我将只分配一个黑色材质到轮廓,所以这个方法工作很好。它适用于圆形材料方形和阻塞材料,不像我之前向你展示的纯着色器版本但是这个版本的一个缺点是它几乎使我的多边形数量增加了一倍,所以我需要将角色上的多边形数保持在相当低的水平,这样我就可以将多边形数增加一倍用于调整阴影轮廓

所以我们已经讨论了两种在着色器中创建调整轮廓的方法,例如通过复制和翻转网格第三种方法是稍微复杂(运用UE后效作者自己说后效这一块他不是专业的,不想把不专业技术做分享)后面我们分享一期用后效进行风格化描边效果的制作

继续作者内容
今天我们要为我们的卡通着色器添加镜面高光,两周前我们创建了一个创建绘画效果的着色器上周我们讨论了如何创建深色墨水轮廓,现在我们将向着色器添加镜面反射这是一个完全可选的步骤。你可以很好地使用只有颜料和深色轮廓的着色器

我们需要做的第一件事是创建一个blinn镜面反射高光,首先我们创建一个半角首先我们需要光源的方向,然后我们还需要相机矢量,我们用这两个做的是我们正在创建一个位于光源和相机之间的矢量,所以我要这样做的方式是我现在要把这两个向量加在一起,我们有一个从我们的眼睛到模型表面的相机向量,我们有一个从光到模型表面的光向量我们是为了找到一个介于这两者之间的角度我们将相机和光矢量加在一起

然后我们对结果进行归一化,这给了我们半角

现在我们将在我们的一半之间做一个点积角‍度和我们表面的法线,所以我们已经取得了很好的进展让我们看看这个操作‍的结果是什么‍‍‍
‍

产生一些奇怪的效果,我们只希望它在光明的一面而不是在黑暗的一面,所以我要做的是饱和我的结果(saturate)和这会将所有内容都限制在0和1之间然后我要把我的结果提高到一个幂(power)这里的这个指数将控制我们的镜面高光,有多窄和多聚焦或者它有多宽和不聚焦我将放置一个浮动参数,然后我将右键单击它并选择转换为参数命名为规范焦点给一个默认值例如32(数值越大表面高光越小反之亦然)


我们如何处理它或者我们如何将它与着色器的其余部分很好地集成在一起,有两种非常好的方法可以做到这一点,一个是在中间添加它我们的渐变样本和我们的颜色相乘,首先我将在这里获取我的混合结果并进行添加,然后我们开始 将其传递给我们的乘法在这里,我们将最终颜色相乘让我们看看我们得到了什么


因为我把它添加到渐变中,然后在镜面反射高光被我们给自己的颜色涂上相同颜色后进行乘法,并且它被调低了一点所以你几乎看不到它。我可能想做的是在此处添加另一个乘法,然后将其乘以另一个参数,因此我将再次按住一个键并单击以添加一个浮点参数,然后我将向右单击这个并转换为参数,我们将命名这个规格亮度,因为我们可以使用这个乘法来控制我们的镜面反射的亮度,我给它一个类似 4 的值这将使我们的镜面高光真正显示出来


我们现在有一个镜面高光,它不是纯白色,但它实际上是由这里的颜色值着色的我们也用它来着色我们的油漆,这样有助于混合镜面高光与我们已经使用的油漆颜色

如果我们知道我们希望我们的镜面反射高光始终是白色的,而不是由相同的油漆颜色着色,我们可以在此乘法之后将其添加,因此我只需将纹理样本的结果连接到乘法,然后将乘法的输出连接到此添加,然后重新连接就像那样,现在我们的镜面高光根本没有被我们用于油漆的颜色着色,它只是保持这种漂亮的亮白色


我可以在最后添加一个圆形节点以便它向上舍入到 1或向下舍入到 0然后 加上它,这将给我一个镜面高光,边缘很好这可能是你想要的风格,所以你可以这样做或者如果你想让你的高光稍微柔和一点少一点色彩,也许更风格化一点,你可以跳过这一步,让它像这样漂亮和柔软


我们将创建一个反射向量,所以我将使用自定义反射向量节点和我们将把像素法线插入法线插座它在这里说相机矢量,但我们将使用光矢量而不是使用相机矢量,因为我们想弄清楚法线和光源的反射向量,因为基本上镜面反射是光的反射所以这里我们有这种关系我们反射法线和光源,然后我们重新在它和我们的相机向量之间做一个点积然后我们将对结果进行饱和

添加一个 pow 节点,我们将使用我们之前使用的相同的规范焦点参数,所以我将我的结果提升到32 的幂。然后我们也可以将结果乘以我们的 spe镜面亮度,所以我们乘以我们的镜面亮度

我们重新调整它回到我们之前的方式因为我真的很喜欢将它添加到我们的纹理样本我们的渐变然后将它乘以颜色,我更喜欢这种方法,然后就可以了就像混合一样,这有点暗,所以我们需要将亮度增加到大约 4 甚至可能8好的

所以我们现在有一个 phong镜面高光

关于phong 的行为方式有所不同,这更现实一点是当镜面到达模型的边缘时,它会自行展开并做一点沿着模型边缘的一些边缘照明这比 blinn 版本更真实一点

我们也可以在这里通过添加一个圆形节点循环然后将其连接起来,我最终会得到一个镜面高光,哦,这很有趣

中间高光点层级通过调整SpecBrightness控制

我们已经了解了在您的调子着色器中创建镜面高光的两种方法让我们继续并在此处分组,从选择中创建评论,我们将其称为phong方法因此您可以执行以下任一操作这些方法有或没有圆形,您可以在乘以颜色之前或之后添加它们

完整节点

unity中节点图


本帖被以下画板推荐:

微信公众号:Game艺视界
使用道具 <
Teny  发表于 2022-4-22 23:33:50  
2#
谢谢楼主分享!!!
回复 收起回复
使用道具
kaid  发表于 2022-5-10 23:37:09  
3#
收藏66666666
回复 收起回复
使用道具
QQ号码  发表于 2023-5-24 11:25:30  
4#
谢谢楼主分享
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表