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中逐步完善着色效果，以期能够达到原神作品的效果。这里再次强调一遍，原神是一部伟大的作品，我做的努力都是对伟大作品的拙劣的臆测和模仿。

二、面部着色

三、勾边

四、勾边粗细的问题深入

五、布料

六、头发（毛发）

七、环境的完善

---

总结

待写