UE5 仿原神卡通着色——取舍的艺术


前言

卡通渲染(风格化渲染,或者说非写实渲染?non-photorealistic rendering,NPR)也是渲染中很重要的一个模块,原先更多的是用于各种画面风格鲜明的游戏,但是随着原神的火爆,这种渲染技术开始得到更多得人的关注,并且成为做渲染的人(关注画面表现的人)所必须“有一手”的技能。
在参考了众多相关的做法(来源包括b站,知乎,youtube,还有海外的其他相关学习网站),我在这里将对这种表现力抢眼、高风格化的渲染技术做一个阶段性学习总结。旨在将这种渲染风格吃透(包含的各个效果,以及效果的实现方法),并且尝试理解底层实现原理(包含数学原理和UE5节点本质),进一步加深自己对虚幻引擎的认识,为自己更深入研究引擎源码底层奠定一定的基础。

本文并不会出现很多原创性的做法,更多的是从网络上获取的资源做法的总结。参考的材料包括而不限于

  1. 《Unreal Engine 4 Toon Outlines Tutorial》
    作者是Tommy Tran。作者名下还有多个UE4相关的教程,内容中理论与操作相结合,推荐有英文能力的去进行阅读学习。知乎和csdn上也有一些其文章的翻译版,质量都相当不错。
    官方视频学习,风格化渲染。
  2. b站若干视频(这里贴的是我收藏夹的链接)
  3. 以及知乎和csdn上若干文章(因为有些文章不清楚能不能直接贴链接,这里就不贴了,可以直接搜关键字“卡通渲染”)。

本文首先会从效果的拆解入手,后面会逐步映入各种技术做法,最终旨在实现一个较为满意的卡通渲染。当然文章后续也会不断完善,一些节的标题都是暂定的。


一、整体效果拆解

目前的应用卡通渲染的作品(游戏、影视)来看,无疑原(sai)神(erda)是最火的;但是第一次让我感受三渲二的魅力的却是一部影视作品——正确的卡多,当时看到的时候就有两个感受:1.作为动漫来讲,动作细节多了亿点点;2.作为3d渲染出2d的效果来说,画面处理得非常的干净。现在看来,这种画面风格和原神也是相当一致,其中用到的东西可能或多或少有一些原理相通的地方吧。(最大的不同之处大概就是bloom没有开原神那么高吧)
在这里插入图片描述
我这里没有正确的卡多的资源,就还是更多的以原神为蓝本还进行总结和实践吧。

原神里的技术体现了取舍的艺术,它应用的不一定是最顶尖的最复杂的,却是最有效率的解决办法。
我在这里参考外网一个油管主对原神渲染的拆解(选取了一些我从技术和语言上能够看得懂且有意义的部分):

https://www.youtube.com/watch?v=OdZTf4JdqCY

1.1 “不应该存在的阴影”

尽管现在图形技术允许我们使用多个纹理(基础颜色,金属、粗糙度、法线、位移贴图等)来与光进行交互从而丰富角色的细节,但是其实更多的技术可能性带来了更高的技术门槛,对个人来说的话影响无非就是需要学习更多的东西,但是带到项目上,这意味着构建工作流难度的增加。这时候使用最基础的东西去进行发挥的优势就凸显了出来。我猜想,原神的美术任务可能大部分也是外包出去,这时候,这种把“把阴影画在贴图上”是双方都能听懂且能快速达成共识的想法。

回到效果上面,我并不是专业美术,美术鉴赏能力有限,单以一个普通玩家的身份来看的话,这种“画出来”的阴影在丰富了角色细节的同时,其实并不会影响沉浸的感觉。只是,这种绘制应该比较依赖美术自己的空间想象能力和对整体风格的把控能力,让我这种“不会画画的”上去都不知道该把哪里涂抹得深一点。
在这里插入图片描述
下面这张是我在虚幻引擎无光照视图下看到的头发纹理。
在这里插入图片描述

一些不那么真实的阴影(裙摆应该遮挡阳光并在腿部产生阴影,然而实际游戏中并没有),当然这并不会影响游戏的体验(毕竟大家不会把脑袋放大人家裙子下面,是吧?)。
在这里插入图片描述

1.2 高光表现

传统高光的实现都是光向量和表面法向量方向高度一致时才会出现的。原神中的高光部分应该也是通过绘制实现的,与前面讨论的阴影就是一体双生的两面——一个是往黑了画,一个是往白了画。
在这里插入图片描述
可以注意到处于阴影中的部分,也出现了高光。
在这里插入图片描述

1.3 Ramp shading (或者称为 Cel shading)

这个应该是被大家广泛称为卡通着色的东西了。现实中,应用于一个面上面的光应该是连续变化的,基于物理的着色(PBS)的着力点就是要表现出光着色的连续性(意味着“海量”信息的填充)。但是卡通渲染的发展是基于漫画作品(纸质2d),这种作品的特点是并没有很多的精力去做这种连续的渐变,会忽略一部分的精度表现,所以采用这种阶梯性的光的变化,也就是阶梯性着色。

这里需要体现出一个“连续”转“离散”的概念。我们假设机器着色的精度是0.1(当然实际远比这要高,这里只是举例),那么它画出0到1的连续渐变就是,0,0.1,0.2…0.8,0.9,1.0;而离散就是,我们自己定一个精度(这个精度当然要大于甚至于机器精度,比如说0.5),然后以这个精度去绘制,图上表现就是0,0,0,0,0,0.5,0.5,0.5,0.5,0.5,1.0。这么一来,就仿照漫画的做法,“丢弃”了一部分精度信息。

在这里插入图片描述

1.4 部分阴影

原神中并不存在部分照亮这么一说,角色要么是被整个照亮,要么是整个处于阴影之中。
(角色的一部分胳膊和腿在地面产生了阴影,然而这部分身体和出于阴影中的身体并没有明显对照,即部分照亮的效果。)

那这部分我们得到了什么启示?最关键的传达出来的问题在于,角色用的应该是Unlit的shader,这个shader会接收一个布尔参数,即是否受到了光照,如果传入值是false的话,那么全身即表现阴影状态(原神的阴影状态黑得并不厉害,应该是原贴图乘以了一个百分比)。
在这里插入图片描述

1.5 边缘光

菲涅尔效应,在卡通渲染里的表现效果依然很亮眼。
在这里插入图片描述

后面会以前面分析的这些效果为起点,在UE5中逐步完善着色效果,以期能够达到原神作品的效果。这里再次强调一遍,原神是一部伟大的作品,我做的努力都是对伟大作品的拙劣的臆测和模仿。

二、面部着色

三、勾边

四、勾边粗细的问题深入

五、布料

六、头发(毛发)

七、环境的完善


总结

待写

  • 8
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,让我们来制作一个牛顿环仿真实验! 步骤如下: 1. 创建一个新的UE5项目。选择“Blank”项目模板,命名为“NewtonRingSimulation”。 2. 在“Content”文件夹下创建一个新的文件夹“Materials”,用于存放自定义材质。 3. 在“Materials”文件夹下创建一个新的材质,命名为“NewtonRingMat”。 4. 在材质编辑器中,添加一个“Texture Sample”节点,用于导入牛顿环的贴图。可以在网上搜索并下载牛顿环的贴图,也可以自己制作。 5. 添加一个“Panner”节点,用于控制牛顿环贴图的滚动。将“Panner”节点的“Speed”参数设置为一个较小的值,例如0.1。 6. 添加一个“Scalar Parameter”节点,并将其命名为“Ring Radius”。在材质属性中添加一个新的参数,类型为“Scalar”,名称为“RingRadius”,默认值为“200”。 7. 添加一个“Multiply”节点,将“Texture Sample”节点和“Scalar Parameter”节点连接起来,用于控制牛顿环的大小。 8. 在“World Settings”中,将“Engine Scalability Settings”中的“Material Quality Level”设置为“High”。 9. 在场景中创建一个平面,用作牛顿环仿真实验的底座。 10. 在场景中创建一个圆环模型,用作牛顿环。将“Ring Radius”设置为圆环的半径。 11. 将“NewtonRingMat”应用到圆环模型上。 12. 在场景中添加一个光源,用于照亮牛顿环。 13. 运行游戏,观察牛顿环的滚动和反射效果。 至此,我们已经成功制作了一个牛顿环仿真实验。您可以自由调整材质和参数,以达到更好的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Claude的羽毛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值