题图来自战双霸Chy000°
写在前面
本着作为一个喜欢2D的宅男的初衷，我花了很多时间收集资料来学习卡牌渲染。 我看到了很多新奇有趣的知识，也有了一些自己的想法。 知乎上很多高手都写了相关文章，但我还是想做一下总结，记录一下收获，顺便也算是回馈知识。
根据wiki的定义，卡通渲染，也称为cel shading，一般是指用较少的阴影颜色来代替阴影之间的过渡。 21世纪初，多用于渲染赛璐珞风格，故以cel shading命名。 现在从性能上来说，可以分为两种。 一种是日本动画的赛璐珞风格，其主要特点是鲜艳的色块。 另一种则更美式，颜色之间的过渡有渐变，看起来更真实。 两者的主要区别在于Ramp贴图的选择，它具有更平滑的颜色过渡。 类似的技术包括绘画、油画或水墨画风格。
作为NPR的一个小分支，纯卡通渲染并没有多大发展。 例如，GDC2015上著名的《罪恶装备》中使用的技术在过去几年中一直在使用。 他们所做的是一套以艺术体验为主导的技术流程，实现了动画中很多“反物理”的灯光表现。 ，我吃的还是艺术技能。
您对渲染了解得越多，您就越会发现其技术限制。 近年来越来越流行的一个方向是将卡牌渲染与PBR相结合，例如《战争双倍》、《噬血代码》、《异形链》等。 看似是两个完全不同的方向，但结合起来效果却相当不错。
1. 角色
角色是卡牌渲染的核心，代表着整个游戏的渲染风格。 每场比赛都付出了很大的努力。
1.1 光与影
在UTS中，光影分为三种颜色：浅色、一阶深色和二阶深色。 像素的颜色是基于法线n和照明方向l的点积dotNL来控制的。 当dotNL大于阈值时，为亮色，当小于阈值时，为暗色。 根据dotNL值的大小，深色可进一步细分为一阶深色和二阶深色。
点积结果控制光影
uts中的光与影
还有许多游戏使用斜坡图来进行查找表颜色选择。 两种方法没有本质区别。 使用Ramp贴图的唯一好处是颜色之间的过渡控制得更好，更适合表达细腻柔和的插画风格。
硬转换斜坡图和软转换斜坡图
在计算中，光和阴影仅受阈值、光照方向和法线方向三个参数的影响。 要实现理想可控的光影，最合适的方法就是从这三点入手。
1.1.1 门槛
Guilty Gear（以下简称ggxx）使用顶点属性通道来存储阈值的偏移量来控制哪些区域更容易成为阴影。 例如下图中的黑色表示它始终是阴影。 但这种使用方法对艺术水平的依赖很大，需要他们对灯光点积的理解和驾驭。
Unity现在提供PolyBrush，这是一个3D笔刷雕刻软件。 有了它，您可以在编辑器中实时刷顶点颜色。 与dcc软件中的效果相比，优点是可以在游戏中看到实际效果。 ，有一个缺陷是PolyBrush只能导出.asset文件，所以我们要么直接在Unity中将这些.assets打包成Prefab，要么需要另一个官方包FBX Export导出为fbx。
ggxx 字符阈值 offsetggxx 为什么使用顶点属性而不是纹理来存储数据？
虽然使用纹理很常见，但这也是一种消除像素精度影响的优化思路。 因为采样极其依赖分辨率，除非是超高分辨率，否则在特写镜头中很容易出现锯齿。 使用顶点属性会根据屏幕分辨率进行插值，以达到更清晰的表现。
1.1.2 照明
如今，许多游戏中的角色材质都有单独的照明方向。 这是一种常见的做法。 ggxx甚至逐帧改变角色的光照方向，以达到过场动画的最佳效果。
充分贯彻了日本动画“镜头后面的正确就是正义”的理念。
动画和游戏中的照明方向其实不止一种
手游一般都有专门的人物展示场景。 为了保持最好的光影，让角色始终看起来可爱，这个场景其实还有一些细节。以战双为例
人物身上的阴影由两部分组成，一是基于nl点积的光影（比如腿的侧面），二是来自定向光的投影（图中两个红色箭头）。
先说光影，指的是根据法线和光照方向计算出的阴影。 光影方向会随着角色的旋转而改变。 根据我自己的观察，这是一个分段函数：
1.在0-90和270-360之间，总是从x角度拍摄
2. 90-180时，lerp(90, 0, (x-90)/90)
3. 180-270时，lerp(0, -90, (x-180)/90)
x指的是角色旋转的角度，当时间在角色正前方时x=0。 这不仅可以让玩家感受到光影方向的变化，还可以让光线始终照在玩家能看到的地方。
另一个是投影。 这显然分为两个方向。 可以看到投射到地面的光线是从右边来的，裙子、刀和额头是从上面投射的。 对于这种做法，有一个办法可以平衡性能和性能，就是用ShadowMap进行裙子、小刀等自投影，用平面阴影进行地面投影。 毕竟地面大部分情况都是平坦的表面，所以不需要考虑模具磨损，这对于高性能来说是完美的。 平影，不知道战双是不是这样用的，我没有拆包。 （我第一个想到的是用两个ShadowMap，但是这样会多消耗一个RT，而且放在手机上性能其实有点勉强）
1.1.3 法线
法线也是控制光照的主要手段。 某些角度的灯光让脸部看起来又丑又乱，就像被虫子咬过一样，比如侧面的灯光。
一种解决方案是手动调整法线：Twitter上的一位作者提到了他最常用的一些方法，（下面三张图）。 简单来说，这是通过复制粘贴来对齐某个区域的法线来实现的。 像 lowpoly 这样的粗糙阴影在面部和手部的正常调整中很常见。 Yoolies面部正常调整教程
另一种是利用Maya等DCC软件中的数据传输功能，将圆柱体或胶囊体的法线映射到模型上，以获得平滑的光照效果。 它经常用于衣服和头发上。 是一个简单高效的小技能。
ggxx 圆柱体法线映射到头发
我自己在搅拌机中尝试过。
理想效果
尝试结果：原始（左）、手动调整（中）、椭球映射（右）
中间那个是试图做出现在的三角形的感觉，但是效果并不理想。 看来这个型号的接线有点差。
除了法线之外，还有一种更简单粗暴的调整方法：mask。 例如，使用顶点颜色通道来存储遮罩可以达到“鼻子和嘴巴没有阴影”的效果。
遮罩调整光影
这可以理解为前面提到的阈值调整。 这种方法比普通调整直观得多，门槛也低。 原神和战双都用这个。
然而，这种方法也有一些局限性。 一是网本身，它的眼睛和嘴周围应该有向外扩展的布线； 另一种是法线，根据HalfLambert值调整，HalfLambert本身就是NdotL。 如果线条本身是平滑的，调整起来会容易得多。
对具体实现感兴趣的同学可以阅读我另一篇关于面部光影调整的文章。
1.1.4 PBR与渲染
我们先来说说一开始提到的渲染和PBR。 这种做法对于霓虹国的业界来说已经很熟悉了。 至少《异度神剑2》和《噬魂师3》已经有了这个做法，并且被传承到了《噬血者》。 在代码中卡通渲染软件，MiHoYo一直在探索这个方向，未来这可能会成为主流。 虽然有PBR，但皮肤实际上保持了卡通渲染（最多添加次表面散射），而服装和装备则使用PBR元素来表达纹理。 它并不完全是PBR，而是通过一个权重值与卡片渲染集成在一起。
下图是《嗜血代码》的渲染过程。 他们使用延迟渲染。 除了GBuffer之外，它们还扩展了专门用于存储数据的单独纹理。
（翻译软件+个人理解，可能存在误解）
A：没有后处理的PBR性能
B：底图
C：后处理布隆图
D：GBuffer扩展图的R通道：表示PBR程度的掩码。 颜色越白，PBR程度越强。
E：后处理计算出的光影图如图A所示，已经包含在内。
F：后处理中计算的投影和AO。 顺便说一下GBuffer展开图的A通道：投影的下落距离（偏移值）。 另外，G通道是投影的优先级，B通道用于区分人物、背景等。 ID
G：E和F最小值合成的阴影图
H：PBR高光和后处理高光的合成
I：最终的效果是，将图片B中的baseMap和图片G中的阴影相乘，根据参数添加到图片H和图片C中，然后根据图片D的权重与图片A的PBR混合。
从D图中可以看到，皮肤光影没有PBR权重，是纯卡渲染，颜色有渐变过渡； 该投影是硬投影； 眼睛里有一些 PBR 重量。
衣服和装备是卡牌渲染和PBR的加权混合。 噬血代码和异形链PBR都使用三个通道来控制：金属度、AO和粗糙度/平滑度。 间接光部分就不解释了，但是提到贴图中有很多探针，猜测是lightProbe和reflectProbe。
这个就比较复杂了。 其实要表现出PBR的感觉，最明显的就是PBR高光：直接高光和间接高光。 对于直接高光，选择普通的GGX，对于间接高光，使用采样的reflectprobe来表达。 事实上，Unity的默认材质集非常好。 至于间接漫反射光，可以根据情况选择采样lightprobe，但漫反射相对不明显，可以根据实际情况决定是否使用。
1.2 亮点
大多数高光型号都是blinn-phone。
spec = pow(dot(n, h) * 0.5 + 0.5, exp2(power));不过头发的高光算法一般是kajiya-kai模型，俗称KK，一层高频，一层低频，加上切线扰动图，实现各向异性效果。 但为了让高光沿着每根发丝移动，艺术家还需要在头发模型的垂直方向上进行UV扩展。
其他不太硬核的解决方案，比如使用UTS中的视线空间法线采样matcap贴图来制作虚假高光，使法线贴图各向异性，以及添加遮罩贴图来调整某些位置的淡入淡出，也可以实现。 效果不错。
uts头发各向异性亮点
新樱花大战中也采用了类似的做法，只不过他们的遮罩贴图是通过UV采样，这样可以精确控制每根毛发。
E图是uv采样的mask
一般除了高光之外，人们还会选择在法线n和视线v的基础上叠加一个菲涅尔边缘光，即
用于模拟反射的感觉，这种灯光首次在《军团要塞2》中被提及。它们被用作黑暗中的补光方法卡通渲染软件，并用于区分敌方和友方阵营。
然而……动画中的边缘光和这个边缘光有点不同。 动画中需要的一般是单向硬边缘光，而不是后者中的全向菲涅尔边缘光。 当然我们可以通过一些手段让后者成为一种硬性过渡，并且在UTS中单向完成，但这感觉有点大材小用。 这种边缘光一般更多用于特效。
要实现动画中的边缘光，一个比较棘手的方法是使用NDotL来计算。 这里的L并不是场景中的光线方向，而是自定义的定向光。 以雄雄的图片为例，光线方向是从左上射向右下的方式，相当于将边缘光计算为一般的直射光漫反射。 效果相当还原，更重要的是更可控。
1.3 颜色
ggxx 使用两个贴图 base Tex 和 Tine Tex 来控制颜色。
base Tex：暴露在光线下的颜色
Tine Tex：阴影有多暗
将两者相乘得到深色。 （如果只控制深色，直接在纹理上绘制深色可能会更方便？我一直没有弄清楚这里使用乘法的好处）
ggxx 颜色
在《七大罪》中，basemap和matcap用于控制角色颜色。 缺点是你得到相对固定的光照表现（如果相机不旋转），但优点是你可以通过改变matcap贴图轻松实现不同缓冲区下的角色特效。
替换matcap实现缓冲效果
由于这是一款手游，牺牲一些光效来使用matcap确实是一个更实惠的选择，前提是美术能够接受。
另外，在一些需要玩家染色衣服颜色的游戏中，颜色不能再存储在baseMap中，而应该在shader中计算。 baseMap只存储阴影，例如衣服的褶皱。
CodeVein的baseMap1.4行程
1.4.1 外行程
一般有两种方法：背面和后处理笔画。
背面听起来不太容易发音。 一般称为外扩法。 其优点是：高效、可控。 一般用于人物、物体的轮廓。 原则是通过两个Pass进行绘制。 第一个Pass消除正面，并将顶点沿法线方向扩大一个小圆圈； 第二遍消除背面并正常绘制。 这是一个经典的技术。
ggxx 中还使用了三个顶点属性通道来控制笔画。
G：根据相机距离控制笔划宽度的系数；
B：笔画的z偏移值一般很大，可以使一些不需要的笔画消失；
A：笔画粗细，0.5为标准，1为最大，0为无；
例如，在头发中的应用：调整描边的 z 偏移以删除不需要的描边
需要注意的是，backface方法需要连续的顶点法线，否则在具有硬边缘的模型上性能会很差。 法线连续法一般是对顶点的多个法线进行平均，即用点法线代替面。 普通的。
Unity法线的默认导入方式是表面法线。 解决这个问题的一种方法是在ddc软件中导出点法线贴图，或者直接使用平滑组来平滑法线。 另一种方法是使用脚本在导入Unity时计算一次点法线并将其存储在模型的顶点属性通道中。 后者相对更灵活，因为可以使用平滑法线进行描边，并且仍然使用法线贴图进行光源计算。
中间有一个问题：如何将平滑后的法线保存到fbx文件中？
因为Unity一般只能导出为.asset文件。 所以这里你可以选择直接在Unity外部使用FBX SDK编写一个平滑法线的工具，也可以选择平滑法线然后使用Unity官方的FBX Export插件。 这个插件目前还是预览版，但是已经足够了。 说实话，我觉得把工具放在项目里做美术会更舒服，而且我们还可以控制脚本，写一些批处理UI，所以我选择后者。
面法线笔划在立方体上分开
另一种是后处理笔画：通过检测场景图像中法线和深度的不连续性，效果非常好，而且计算消耗与场景的复杂程度无关。 但问题是无法单独控制笔画，内笔画也会被绘制。 出来了，消耗也不小。 当顶点数量较多时，它是 backface 的替代方案，适合描边场景。 例如，在《重力眩晕》中，角色使用背面笔划，背景使用后处理笔划。
其实……还有一种，就是高光描边，比如《生存》里的那种。 它的原理是用一个RT单独绘制一个纯色网格，然后对RT进行模糊处理，最后与原始颜色图混合。
然而，它通常用于选择效果而不是渲染笔画。 虽然效果很好，并且不绘制内部笔划，但它的问题仍然是难以独立控制笔划宽度。 还有色彩，而且真的是纯粹的外笔，根本没有内笔，非常适合表达轮廓。
一般来说，如果我们想要动画中的效果，网格堆叠在一起时应该有笔触。
扩张法，手臂放在腿上还是有一笔的
1.4.2 内行程
rtr中细分的笔画种类有很多种，但本文中的笔画仅指纹理表面上的线条，那么内部笔画是什么意思呢？ 主要原因是别名。 一般情况下，纹理上只要有对角线，就会出现锯齿现象。 当相机放大时尤其明显，因为内描边一般只有1-2个像素。
1、本村线：为了消除这种锯齿线，所有的线都沿着轴线对齐，通过改变UV画出清晰的线，因为线本身是直的，不会有锯齿状的边缘。 然而，这样做会导致 UV 非常扭曲，这不适合具有许多图案的纹理。 看来正常的项目都不会选择这样做，因为手工工作量非常大，而且有很多局限性限制了艺术表达。
2.基于sdf的内描边抗锯齿
他的做法是使用SDF预先计算出内行程，然后将其存储在单独的通道中。 即利用核运算预先计算出纹理上每个像素“最接近描边”的程度，并根据SDF的性质来使用这种方法。 该方法甚至可以控制“远”像素的处理方式。
3. 基于边缘度的后处理
Ni No Kuni中的方法选择在顶点属性通道中记录边缘度，然后在后处理中绘制内部笔画。
A：绘制外描边后的图像
B：顶点属性R通道中存储的边缘度值
C：存储在顶点属性G通道中，基于MeshID指定的面部单元
D：最终效果
1.5 特效
除了matcap之外，《七大罪》还增加了特效专用光源，让角色和特效有一致的表现。 随着手机性能的发展，附加光源的加入逐渐被主流机型所接受。 在战双中，你可以看到很多特效都有点光源。
特效光源 1.6 其他
1.6.1 眉毛
在动漫中，眉毛一般可以显示在头发上（反物理+1）。
UTS 的一种方法是使用模板测试，但这将使用额外的模板映射，这在手机上对带宽不友好。
另一种方法是使用RenderQueue按照头发-脸部-内眉毛-外眉毛的顺序绘制眉毛。 眉毛画了两次。 第一个使用ZTest LEqual画出没有被头发遮挡的眉毛，第二个使用ZTest GEqual画出被头发遮住的眉毛。 眉毛。 眉毛不需要太多的计算，所以这种方法会节省很多。
1.6.2 表达式
表情的制作涉及到改变模型或改变纹理。
如果对精度要求不高，数量又很有限的话，直接使用纹理其实是一种非常实惠的方法，比如>。
