前言
假期期间正好听了机核会员节目的《工作汇报 EP4》，里面重轻老师的分享又给了我很多启发，其中一部分想法其实和我写这个系列的初衷很像。由于图形学和游戏引擎是一个庞杂的迭代了几十年的科目，当然没有人能完全掌握，但凭兴趣一点一点了解确实也是可能的；我把本来懂的和查资料才懂的知识或兴趣点汇总到一起，只要不是特别忙就可以一直更下去。
如果用音乐来比方，《罪恶装备》系列就是我游戏历程中的重金属音乐，那里面有味最冲的二次元刻板角色形象（不用说后面的《苍翼默示录》系列我也很喜欢）。在2015年发现这个沉寂了多年的系列以3D卡通渲染游戏的方式重生时，我是非常惊喜的。
但是深入了解了他们的制作方式后，我的感觉是这很像十二平均律没有推出以前的音乐，有很多限制。下面我会以节选加翻译的方式，来为大家展现当时的ArcSystemWorks是如何用“笨办法”来为大家带来还原度极高、极富表现力的风格化画面的。
*这次由于原文英语的篇幅较大，后面我就不列出全部英文原文了，文末照例会附链接。后面的章节中除了加星号的是我的备注，其它均为我翻译的原文（主要是结合原文配的解说词，而不是PPT内容）。
1 美术设计目标
*分享人是当时他们的技术美术本村纯也。这个项目中他提出了“本村线”以解决勾线过程中的抗锯齿问题，后面会提到。
GGXrd的美术风格
——虽然使用了大量3D特性，但游戏仍在2D平面上战斗
——这种视觉效果是依靠自定义的Cel着色器结合定制化的3D模型来实现的。（Cel是Celluloid 赛璐璐的缩写，是一种以动画制作技法来指代一类动画风格的词语，通常就是指日式卡通渲染）
——由于采用了3D，意味着可以不受分辨率限制了。
*定制3D模型意味着有一些不同于传统写实渲染模型的配置指标，后面会提到。
*如果2D版是480P的游戏分辨率，其实角色精灵图往往是200像素左右的，这对角色像素制作其实有很高要求（看着完全不像只有200像素的）；另一个问题就是如果移植到高分辨率的设备上就显得不够看了，所有的像素图都要重新修而不能简单放大。而3D只要基础精度够高则没有这个顾虑。
GGXrd的美术风格
——摄像机能在3D空间移动可以带来更具戏剧张力的演出效果，还可以用于转场动画和故事叙事
*这一点也确实极大提升了终结技的观感，有一种打破第三面墙的感觉
为什么用3D而不是2D
——高精度的2D动画风格已经在《苍翼默示录》中做得足够好了，需要在新作中有所突破
为什么用3D而不是2D
——我们也考虑过其它制作方式如矢量艺术风格、高精度精灵图等
——分享人当时曾着手做过一个内部预研项目（图中），有了部分技术积累，看到了这一风格的潜力
——如果能如预期实现前文所述的效果，在当时来说会是很超前的（Chance of becoming the best），这也会极大提升市场竞争力。
*后来看来，这么做的一个trade off就是初版人物非常少，后面一直在以DLC的方式出人物。毕竟2D年代的人物资源都是积累下来的，改改就能用；进入3D之后全部要新做，外加人工制作的流程很多。例如本期封面是后期才推出的新Testament（角色名）。
*另外能感受到这是一套2D动画美术导向的解题思路。后面分享者也会反复提到，如果通用方式效果不好，就纯手工来做。
2 着色相关
开发这种风格的渲染
——引擎选择是虚幻3（选择的原因不翻译了，比较范式化）
——美术资源制作选择的是Autodesk SoftImage。最重要的点就是内置了一款实时的shader编辑器，可以直接调整和预览Cel着色器的效果。
*在建模工具中做主要的着色开发，最大的问题就是无法很好的做实时光照预览。实际上这游戏由于颜色偏固定，想要的效果就是不动态变颜色，所以这么做还在可接受的范围内。
角色视觉的开发
——角色必须尽量看起来像平面的，如果有哪里看起来像3D，就需要调整以消除其影响。
——让艺术家决定，而不是（shader中的）数学公式。所有视觉必须是经过设计得到的。*这里说的已经比较露骨了，我摘一段原文：
This often boiled down to hand crafting by the artists, because while the math within the shader is always “correct”, “correct” is just not good enough. To get a convincing 2D look, every thing on screen has to be an intentional choice, not just a result of a calculation.
——得益于项目中有实时的shader预览工具，我们通过快速反馈、及时调整的方式最终实现了预期的效果。
角色视觉的开发
——由于会有靠的很近的特写，因此角色的三角面数需要能hold住这种需求（原文 so the models had to hold up even at an extremely close distance）。实际使用的大约是4万个三角面，所有细节都是通过几何多边形来表现的。
——减少对纹理的依赖。没有使用法线贴图，相反的则是使用了顶点数据例如顶点颜色、顶点法线、UV坐标。之所以这么做的原因也是因为这样得到的结果是与分辨率（理解成渲染精度）无关的，也不用考虑纹理缩放策略及相关的问题。
——顶点之间的参数是通过对顶点上参数的线性插值来得到的。
*后面会提到他们角色的主纹理基本也是没过渡色的，偏向于就是纯色，规避了各种由于纹理映射带来的误差。
角色视觉的开发
——在Cel风格着色中，颜色要么是亮的要么是暗的，没有中间状态。
In a drawing, the artist will choose the most convincing distribution of light and darkness. But in a shader, it’s all math, where unforgiving thresholds, mercilessly splits between light and dark. In Cel-shading, every little noise on the surface will become extremely distracting. The slightest difference in the surface normal may end up as a huge blotch .
——在绘画中，艺术家会选择最能让人信服的明暗分布；但在一个着色器中，由于它是基于数学公式的，只能很生硬的通过阈值来控制明暗分布。因此在Cel着色中，任何小的平面噪点都会变得非常难调——模型表面轻微的法线变化都可能导致预期外的一大片斑点。
*实际上现在很多卡通渲染的明暗也不是硬切边而是有渐变或多层过渡的了，有些甚至是基于物理渲染（PBR）的改良版。不过他们提出的这个阈值问题确实一直存在。
角色视觉的开发
——主要的着色计算非常简单，通过一个step函数，输入某个阈值，用来判断光线与法线的夹角点乘（点乘得到的是一个系数，所谓的NdotL）来判断某一个着色点是亮还是暗。（学过shader的可能知道除了step还有一个smoothstep）
——可以看出制作过程中主要就要控制三个值：明暗阈值、光线向量、法线向量。
*手动调万物就开始了。其实后续更先进的卡通渲染还引入了很多额外的项，例如高光、粗糙度、眼睛多重反射、头发高光、皮肤次表面散射等，但在他们提出来的这个阶段都还是没有的；可以想象这些如果都要实现进去，是不可能再全部手调的。
角色视觉的开发——分别展示了关闭阈值、开启阈值、纹理作为阈值的情况
——我们采用了顶点颜色中的一个通道用来存储明暗阈值。艺术家可以手动定义某一个顶点的受遮蔽程度，即这个值越大就会有越小的几率被照亮；反过来艺术家也可以设置这个值为0，即无论如何这个点都会被照亮。
——某些场合我们也使用了纹理来存储明暗阈值，但更多时候还是顶点颜色达到的效果更好。因为纹理通过纹理映射后还是会受到分辨率的影响。
角色视觉的开发——图片分别展示了传统全局光照和角色定制光照的效果
——GGxrd没有采用传统3D游戏的全局光照系统，每个角色的光照是完全为单个角色服务的
——每个角色的光照参数都尽量保证其在待机动作下有最好的视觉效果
——在转场动画时，这个灯光参数甚至需要随动画动态改动来配合达到不同角度最好的视觉效果。（原文是 but in cut scenes, it animated along with the character to get the best result each and every frame. ）
*到这里我感觉已经万物皆手调了。也是因为后面提到的法线是优先正面效果的，因此转视角后法线不能动，只能调灯光了。
角色视觉的开发——图中展示了法线不调整与调整的对比
——表面法线是Cel着色难以调好的主要原因，微小的不一致或不合适都会带来很明显的视觉穿帮。
——模型默认的法线是工具自动生成的，但在2D风格渲染中这往往不能符合要求。所幸 Softimage提供了强大的工具供人为调整法线的方向。
Although editing normals is nothing new to game graphics, we took it even further, To get rid of unintentional shading, we modified the normals on every major feature of the model. The faces of the Characters especially needed to be hand crafted to get a clean anime look.
——虽然编辑法线对于游戏图形来说不是新事了，但为了解决不符合预期的着色，我们更进一步修改了角色模型主要特征相关的法线。尤其是角色的脸部需要手动调整来保持一个“干净的脸”。
*批量修改法线在卡通渲染中很普遍，如果看过很多卡通渲染的“白模”就知道，普通光照下那会很奇怪。但是这种针对2D的修脸，只能适用于固定角度，其实是有其局限性的；一般自由视角的游戏法线调整的目标是只沿着角色的鼻子和脸颊出阴影，中间的区域尽量别有阴影。
角色的视觉开发——动画中颜色对材质的表现逻辑
Color selection in anime is vital. Every color is carefully chosen to express not just the material, but the character it self. It is not as simple as just multiplying the shaded area with an ambient color.
——动画中的颜色选取是很重要的。每种颜色都是被精挑细选出来，不仅表达对应的材质，更是角色本身特性的代表。因此不能简单的把暗部颜色和环境颜色叠加起来就完事了。
角色视觉开发——图中展示了用多纹理实现颜色修正的策略
In order to implement this in the shader, we used two textures. The base texture defines the color of the surface when it’s lit. While the Tint texture defines how dark it gets when shaded. Multiplying the two textures, we get the shaded color. This way, the choice of color is completely up to the artist. The artist can choose what ever color he or she may see fit, for the lit area and the shaded area of that material.
*这一段之前还讲解了一下动画中是如何利用暗处颜色来表现材质的，例如可以用不同颜色来表达物体的坚硬程度或透光程度等。
——为了实现这个shader，我们使用了2张纹理。基础纹理定义了模型表面在受光时的基础颜色，同时调色纹理定义了它在暗处的颜色。把两张纹理中的颜色相乘得到的就是最终的着色颜色。这样，颜色的选择就被完全交给了艺术家，可以为每个着色区域自由选择合适的受光颜色和暗处颜色。
On a side note. As you can see, both of these textures are just square areas consisting of single colors. This is because we simply use them as color lookups, and do not draw-in any details to the textures as images. As stated before, most meaningful information is stored in the mesh it self, rather than in textures.
——顺带一提，如大家可见，两个纹理中的区域都是矩形单色的。这是因为我们只把纹理用来做颜色查找而不去映射纹理上的细节；如前文所述，大部分有用的信息都是保存在模型网格上，而不是纹理中。
3 勾线相关
角色视觉开发——角色外部勾线
——我们使用传统的被称为“Inverted Hull”的方式来做角色勾线。此方法在渲染时生成了一组暗色的多边形，将其沿着法线方向扩张若干像素就可以得到角色的轮廓线。
——我们在此方法基础上增加了一些tricks来使得到的结果更可控。
——现在基于后处理的勾线使很普遍的了，但我们发现这尤其适合我们的方案。首先，我们可以在模型视角直接预览结果，这使我们可以在制作时（所见即所得）准确控制勾线效果；其次，我们得以引入基于距离的线宽系数（甚至某些位置完全不显示勾线），在存储这些参数时我们使用了顶点色的一个通道。（名字虽然叫顶点色，但其实是4维向量结构，里面可以存4个通道的数值，不止是颜色）
角色视觉开发——角色内部勾线
——对于内勾线， “Inverted hull” 方法不适用，因此我们需要另一套方案。
——最简单的方案是直接把线画在纹理上，但这会有很大局限；同时最大的挑战还是分辨率。我们需要角色能hold住很近距离的视角的同时减少边缘像素化或锯齿感觉。为此纹理的精度需要很高，这显然不现实。
——所以我们找到一个更好的方案，采用了一种通过特殊的UV映射来得到无锯齿的内勾线的方案。这（图中方形纹理）就是方案的原理，所有线都是轴向的，而模型的UV沿着这些线来映射；模型UV贴合这些线条的程度定义了内购线表现出来的粗度。
——缺点就是这样得到的UV非常失真，不过由于我们不依赖纹理的细节，所以这反倒不是一个问题。
*这一段就是本村线的由来了，无锯齿的原因是轴向的线不存在纹理映射过程中缩放导致失真的问题。不过由于现在往往不可能不依赖纹理去表现细节，所以也没有普适性。
4 动画相关
动画——用2D的方法使它看起来像2D
——旧的《罪恶装备》系列采用的动画方案在日本被称为 “Limited Animation”，与类似迪士尼的那种帧数很足的动画不同，日系的动画力求用较少的帧数来达到足够抓眼球的效果。
——我们想以同样的原则来做这个项目中的动画（使其保持2D风格），但由于关键帧之间的插值平滑机制，使其反而失去了这种特性而显得更3D了。因此我们禁用了插值并采用定帧动画的方式来制作动画。
动画——动画绑定
——由于使用了较少的帧数，因此我们需要为每帧添加更多信息。为此我们为模型的动画状态机添加了很多骨骼（平均每个角色500根）。
——我们也禁用了基于物理的动作模拟（Simulation），因为这会使动作看起来不像2D。
——我们采用了大量缩放形变动画来表现夸张的动作、物体的显示隐藏、拉伸或粉碎等视觉效果。由于这不是引擎自带的特性，因此我们需要自己实现，感谢我们天才的程序员最终实现了这一效果。这一点是非常值得的。
*原文是It was difficult task, but thanks to our talented programmers, it was done. 前面虽然反复说不相信数学公式，但这里是高情商环节。
动画——使动画看起来像2D
——仅仅关闭关键帧插值还不够，我们还需要另一个能模仿2D动画的trick。秘密就在于每帧都把模型网格做形变，以添加视觉瑕疵。
——人的眼睛和脑对透视很敏感，如果一个3D模型在移动时保持它的形状，人脑就会把它识别成一个坚固的3D物体。为了避免这一点，添加视觉瑕疵是必要的。
Nature is imperfect, the artist is imperfect, therefor perfection looks ‘too artificial’.
——自然是不完美的，艺术家也是不完美的，因此完美的东西反而看起来“过于人工”。
——“你需要以2D的方式思考”是我们团队的口头禅。在这个工作流中3D的精确性不是最优先的，我们往往牺牲这种精确性来得到更动态的效果。我们为四肢、手臂、腿部加入了很多形变动画来表现夸张的透视，人物的面部也不是一直保持自然的位置结构。
——这其实和2D动画一样，精确性需要让位于表达。我们在3D项目中也延续了这一原则。
*这一段能看出精于2D制作的团队考虑问题的方方面面。这些讲抽帧动画的部分都很有启发性，是做3D项目出发的人不会有的视角。
结语
分享人的感悟
分享人的感悟
最后摘了两页分享人的感悟，具体就不翻译了，大家可以感受下他们骨子里的那股2D动画之魂以及作为艺术家的自尊与骄傲。（在我们这很少称美术人员为艺术家，一方面确实很多人达不到标准，不过我觉得ArcSystemWorks这公司里的他们值得这个称号）
这篇分享由于其里程碑地位，中文互联网上也有一些不错的翻译分析了，但我的关注点还是不太一样的。有兴趣的可以从文末的链接去看GDC原视频，或看看解说稿全文。
几年前我能完全看懂他们在做什么的时候，最大的感受是这里面纯人工的比重太高了。不过由于艺术家的勤劳和精通，最终还是得到了非常好的效果。尽管情绪上我非常推崇这家公司，不过我也必须说，现在是无法在模仿其方式来制作一款好的卡通渲染游戏的。
这个方案中有很多方面的局限性：一方面它的出发点主要是基于固定视角的，转场动画的过程则需要大量手动K帧来人工修正，这完全不适用于自由视角的游戏；另一方面它的着色方案也仅适合模型精度高，纹理偏纯色的美术风格，进一步想表现更动态的光照和更细节的材质就都不行了；最后就是，太费美术的人力了，人工干预项多到完全不工业的程度，放弃了几乎所有引擎自动化的内容。
尽管如此，这篇分享也算开启了商业化的卡通渲染项目之门，让外行和普通从业者能窥见其中非常细节的问题与取舍。
*另外说一个题外话，就是我发现中文互联网有大幅混用“三渲二”和“卡通渲染”的趋势。如果只是多音字这么弄没问题，但中文词语这么弄有一个问题，就是被替换的那个原词指代的功能就没有词来用了，属于一种鸠占鹊巢的行为。我个人还是觉得，三渲二还是指代美术制作上先制作3D模型，再用渲染工具导出图片的制作方式；而卡通渲染则是风格化渲染的一个分支，用来指代在渲染过程中呈现类似动画风格的一种图形技术方向。
最后是资料链接：
Arc官网上这篇分享的地址，Movie和PDF