随着卡通渲染的发展，这个概念逐渐被泛化。
Text /wxdkh
大家好，我是wxdkh。在知乎写漫画渲染眼镜和人脸文章的米子，目前是网易的技术美术。很荣幸被邀请与大家分享漫画渲染。
知乎个人主页的睡币：
https://www.zhihu.com/people/迷你刺猬-xie-42-53
在本内容中，我将重点介绍在卡通渲染中使用技巧的技巧。由于时间的关系，这次我只列举一些在卡通渲染中经常用到的方法。讲解不会特别深入，内容也不是很复杂。对细节感兴趣的同学可以会后一起聊聊。让我们正式开始。
这次，我们主要讨论两个话题，一个是卡通渲染的技巧，另一个是NPR和PBR的结合。这是一份详细的目录。
动画中的卡通渲染不同于游戏中的。在动画中，相机经常处于固定角度，瑕疵可以手动纠正。但在游戏中，卡通渲染会更加注重不同环境和角度下效果表现的合理性。
由于2D图片在3D图片中不完全成立，所以在卡通渲染中不可避免地会出现各种各样的诡计。前半部分我先概述一下卡通渲染的基本内容，会比较简单。
此外，由于基于PBR的可能性现在仍然是大方向之一，所以在内容的后半部分，我们将讨论卡通渲染和PBR的结合，以及目录中这些着色模型中存在的技巧。
让我们开始第一个话题，基于诡计的卡通世界。
从2015年心虚齿轮在GDC上分享卡通渲染的方法开始，卡通渲染发展非常迅速，包括基于pbdcc的动画还原，如《罪恶装备》、《赛马娘》，基于PBR的风格化，如《鹿鸣》、《奇迹暖暖》，以及少了PBR，但使用PBR制作，如《碧兰幻想》 01030。
卡通渲染风格越来越有表现力。对于卡通渲染，不像PBR，没有标准的流程和度量标准。卡片底纹将很大程度上取决于艺术的形状和颜色，因此在漫画宣传中对艺术风格的处理更为重要。
另外，卡通渲染是人的主观审美与现实环境抽象的结合。不同的人对卡通渲染的概念有不同的理解，导致了各种各样的制作过程，但其中还是有一些固定的想法。那我们就来看看游戏开发者为了渲染出漂亮的卡通形象做了哪些努力。
首先，列出概念。卡通渲染有两个常见的名称，即Cel Shading和Toon Shading。Cell是pbdcc赛璐珞的缩写，香椿是卡通的缩写。最简单的方法，我们只需要阴影、笔触和高光，就可以组合成卡通般的画面。
但正如我刚才所说，这些是没有必要的。随着卡通渲染的发展，卡通渲染的概念逐渐被泛化。如果艺术上有对应的形状和颜色，就能感受到卡通风格。
首先是卡通渲染的基本表现。接下来，我们快速复习一下漫画宣传的基本功。这一段会比较简单。
卡通渲染的第一步是修改光照模型，修改NDotL计算的Lambert光照。常用的方法有阶跃函数和RampMap映射。
第一步是阶跃函数。光是Step就很简单，就是给另一个A值，大于这个值的值是1，小于这个值的值是0，Smoohstep就是一个光滑的step函数。图中的紫色曲线是Smoohstep的函数图像，右侧是对应的光照结果。在给定的A值和B值之间会有一个平滑的过渡。兰伯特的计算结果，通过Step重新映射兰伯特的计算结果，可以控制阴影的边界硬度和位置。
然后，以类似于阶跃函数的方式修改光照的rampMap可以通过使用Rambert光照作为映射值来获得相应的风格化光照。中间的图形是斜坡图(也称为LUT查找表)。阴影的软、硬、变色可以通过坡道图的色彩过渡来实现。
/origin/tos-cn-i-tjoges91tu/Snicu2P4TZJ4VI?from=pc">然后是边缘光，这是常见的效果之一，动画中的边缘光更偏向软硬两层边缘光混合的情况。常见的实现方式主要有两种，菲涅尔和深度偏移，也有使用边缘检测的方式，不过不太常见。
基础的边缘光可以由法线和视角方向点积获得，基于 NDotV，同时这也是 Shader Graph 中 Fresnel 节点的计算。
对于深度偏移的边缘光可以获得等宽的硬边缘。这对于一些转折比较少的模型，比如立方体的支持会更好一点。原理就是将模型顶点偏移，重新采样深度，然后与原模型的深度进行比较，深度差大于某一值域，那么就是边缘。《原神》中的人物边缘的亮边应该就是使用了这种方式。
明暗交界线是动画中经常会出现的特征，这是绘画中常见的处理。基于这些特征，不少画师会在明暗交界线上做特殊的偏色处理，动画中也都有体现，在物理的渲染中比较接近这些效果的是 SSS 表面散射，这一表现可以看作是对 SSS 的夸张。
那么对于明暗交界线的计算，我们只需要找到明暗交界线区域的亮度范围就可以了。
如果使用 ramp 图来计算光照，就可以直接将交界区域在 ramp 图中画出来。另外也可以使用数学的方法，比如之前的阶跃函数用两个 Smoohstep，一正一反相乘，就可以求得中间明暗交界的位置，然后填充颜色。或者也可以使用高斯函数，也叫正态分布函数来选中明暗交界线区域过渡的位置。
最后是描边，描边也叫轮廓边，早期描边主要的作用是补充动画中色块的细节，把转折的结构表现出来，所以这个时候描边叫做轮廓边会更合适一点。另外轮廓边并不一定是黑色的，在动画的场景中轮廓边大多以亮线的高光形态来表示，就像右图中的亮线勾边一样，人物上则一般是以黑色的轮廓线偏多一点。
然后到现在的描边除了强调主体这样的用途之外，更多的就是承载风格化表现的特征了。像《无主之地》这种就是直接将描边作为自身的风格。
常见的描边方式有这几种，前面说的边缘光，RimLight 也是可以作为内描边的一种，而 Backface 和边缘检测是游戏中最常应用的描边，基于轮廓边的检测是离线渲染中经常会使用到的方式，本村氏线是一种特殊的描边，我也一起加到描边方式里面了。
先说一下 Backface。这种描边方式是将物体渲染两遍，一次正面，一次背面，背面渲染时向外挤出就可以获得边缘描边了，值得一提的是法线是否合并会影响这种描边的连续性，所以经常要去存一份平滑的法线数据来计算描边。
边缘检测是图像处理的操作，通过算子对图像卷积就可以获得描边，常见的 Sobel 算子是行动卷积和，这种方式在不同场景下的消耗比较统一。
另外对于卡通渲染来说，我们会想要整洁的边缘线，对整个图像进行边缘检测就会出现多余的描边信息，所以常见的技巧就是会在边缘检测区域做不同色块的纯色填充，这样在进行边缘处理时，就可以得到右图中这样一个比较干净的结果，就像右边这个图中，上面的图是对应区域的色块填充，下面的图是边缘检测的结果。
基于模型拓扑的轮廓边检测是离线渲染中经常使用到的方式，这种方式的消耗比较高，但是可以获得一些很风格化的表现。
最后就是本村线了，这个装备中分享的角色表面描边的方法，并不是外描边，它是将模型的 UV 打直，只绘制于垂直于 U 轴或者 V 轴的直线，避免斜线线条的采样问题，从而获得锐利的线条表现，就像左图中对比一样，不过这种方式对模型的制作要求很高，它的制作周期会比较长。
现在我们已经快速过了一遍卡通渲染的基础知识了，那么运用这些知识，我们就可以轻松的做出一个卡通渲染的角色了。不过想要提升角色的质感，还需要另外一块拼图，那就是 PBR，这张图是我在 Unity 中测试的效果，使用的是《少女前线二》闪电姐的 MMD 模型。
我们来开始进行第二个话题，就是基于 PBR 的卡通表现，基于物理的光照，PBR 是对现实的还原，而 NPR 则是非真实感渲染。虽然它们名称上是对立的，不过为了效果的提升，我们可以各取相关的特征缝合起来表现效果。使用 PBR 的优势在于 PBR 是艺术导向的，它能让美术同学用直观的参数，标准化的工作流，快速的实现大量材质的真实感渲染，把 NPR 的特征迁移到 PPR 中，并且保留这种易用性就是我们的目标。
但实际操作中由于卡通渲染的特征涉及非物理属性的方面太多，这种易用性是比较难以保持的，需要根据项目对不同的特征的参数进行取舍。不过 PBR 所带来的环境光照和 PBR 的质感是比较容易保留的。
左图是 Unlit 的材质，右图是基于 PBR 魔改的 NPR，混合 PBR 的 NPR 就可有一部分卡通效果，同时也具有 PBR 的质感了。
PBR 中存在的间接光照计算可以比较方便的适配不同环境下的光照表现。不管是夜晚、白天、森林或者是在其他的一些环境下，在不同的环境中都可以有对应的光照反馈，这对角色与环境的适配是十分有利的。
我用 Shader Graph 做了一个典型的 PBR 材质。
众所周知，PBR 是由直接光照与间接光照组成，这里的黄色和橙色区域就是直接光的镜面反射与漫反射，绿色区域是间接光的镜面反射与漫反射，蓝色区域就是数据初始化的计算。比如 NdotL 、NDotV 这些。
这是这个典型的 PBR 是在不同的粗糙度与金属度下的表现。
将 PBR 与卡通表现混合在一起的思路并不复杂，简单的来说将之前讲述的特征插入到 PBR 的计算流程中就可以了。但是怎么混合两者的特征，在什么节点去插入计算，这是一个见仁见智的事情，对于不同的风格，不同的管线流程都会有不同的结论。
我将对应的卡通特征插入到 PBR 流程中，大概长这个样子，稍微有点凶残。当然了这个 shader 只是为了讲解做的测试，项目制作中不会这样用 ShaderGraph 直接做 PBR。
首先是魔改 NPR 特征后 PBR 整体计算流程并没有改变，依旧是直接光与间接光的镜面反射和漫反射叠加。下面就简单来讲述一下需要修改的部分。
首先是蓝色区域中数据初始化阶段的处理，最主要的是对法线N进行的操作，NDotL 和相关的应用计算都可以在这里进行重新映射和合并，比如二值化阴影，面部阴影、头发投影、影贴图之类的阴影相关的操作，然后把它们合入到 NDotL 的结果之中。同时 NDotV 的控制也可以改变一部分wmdxy的效果。
之后来看黄色区域的 DFG 项，这里效果比较明显的更改项就是法线分布函数 D 项，比如对 GGX 高光的范围进行重新映射，或者更改计算各项异性高光，并且加入遮罩偏移之类的操作，然后是橙色区域的 diffuse 计算，这个地方进行的操作，基本上可以当做 emission 自发光来添加。
对于卡通渲染来说，一些色彩混合操作需要在这里加入，比如头发、高光，如果要使用颜色叠加的方式加入到计算结果中，就像柔光、线性光这些操作就需要在这里加入了，虽然不那么物理，但是可以保证效果。
之后就是绿色区域的间接光部分了，间接光的加入会显著提高模型的质感与立体感，但是对于卡通渲染来说，立体感的提升并不一定是好事，所以最直接的修改方式就是按照不同部分减少间接光的权重，比如对皮肤、面部这些需要平面表现的部分去减少间接光的比例。其他还有蓝色协议使用了整体向上的法线，计算统一颜色的间接光也是一种方式。
最后就是紫色区域了，这里的计算是直接当作自发光来添加的，比如说眼睛的高光，Matcap 反射，边缘光之类的。经过对 PBR 整体架构的模改，我们就可以得到混合了 PBR 的卡通表现。这里它长这个样子，这是 PBR 魔改后在不同粗糙度和金属度下的表现（下图中右图）。
和默认的 PBR 的对比，因为自定义了阴影颜色和一些自发光的原因，它整体会更加明亮一点，卡通渲染插入到 PBR 中，并不会完全能量守恒。
不过对于卡通渲染来说，很多不守恒的表现是可以接受的。所以虽然并不完全能量守恒，但是也适合于卡通渲染的表现。
这样我们就有了混合 PBR 的 NPR 表现，之后就要为不同区域去定制对应特征的 Shading Model 了，比如头发、眼睛、皮肤这些。
最新一期的「Unity大咖作客」分享会上，Unity 邀请到了来自网易的 TA 大咖wxdkh，为大家带来《走近卡通渲染-关于 Trick 的两三事》。
本文节选「Unity大咖作客」，分享内容为网易 TA 大咖wxdkh的《走近卡通渲染-关于 Trick 的两三事》，完整内容请查看：
https://developer.unity.cn/projects/cel-shading-trick
游戏葡萄招聘产业记者/内容编辑，
点击「阅读原文」可了解详情
上海人才战｜成都人才战｜广深人才战
天美工业化｜中日二次元美术对比｜防沉迷困局
黑神话合适的楼房｜最终幻想14｜哈利波特