二次元角色卡通渲染—面部篇
原文地址：https://zhuanlan.zhihu.com/p/411188212作者：MIZI这个系列我会整理一下卡通渲染中使用到的各种Trick，目前卡通渲染网上的资料很全，这部分内容技术上难点不多，不过trick的部分很多，解决方案也五花八门，整理起来挺有意思的。卡通渲染这部分内容国内外开发者已经研究的较为完整，我作为后来者更多的是记录与总结，一些内容会直接放入传送链接。个人能力有限，难免会有疏漏，如有恳请指出。本篇是卡通渲染概论系列的第二篇，上一篇写了眼睛的特征，这一篇来写面部的特征，封面图即为预览效果。卡通模型的面部处理上与写实角色有很多不同之处，阴影、高光、模型制作等方面都有对应的Trick。其中阴影是首要的问题，所以本篇主要内容是阴影相关的分析与制作方式，在扩展部分会提及高光以及模型制作相关的内容。一、面部光影1.1 写实光照的软阴影与二分光照的硬阴影
对于写实光照是没有面部阴影修正这一问题的，物理的阴影表现符合我们日常的习惯，面部阴影的问题只出现在强调边缘刻画的二分光影上。
最终幻想VII 重制版
所以对面部阴影做处理的原因非常简单，二分光的情况下不做干预的面部阴影形态过于凌乱，对于高度概括的卡通表现来说显得很违和。下图中是罪恶装备对面部法线做处理的前后对比，可以明显的展示出对阴影修改的必要性。
「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密1.2 阴影概括
在做阴影修正之前，第一步先来确定什么样的光影符合卡通的表现特征，下面从动画和现实表现入手，盘点一下常规的面部阴影表现。1.2.1 简化的阴影
“解决不了问题就解决提出问题的人”，在动画中可以选择直接干掉阴影（除了头发投影），这种方式在光比相对较弱的环境中被广泛应用，不过这样面部就太平，一般会添加鼻尖线条、红晕之类的细节，下图中第一行的图片具有这种特征。而对于光比较大或者展示角色受光的情况下，会去画脸部边缘的阴影或高光，这种阴影的特征就是边缘平滑，贴合面部边缘形状。下图中第二行的图片体现了这种特征。
简化的阴影特征1.2.3 特征区域
特殊区域的光影表达，面部主要集中在鼻尖，眼底，唇低，眉头，这些区域是面部高光与阴影的表现的密集区，常常会画上高光或阴影等细节，有时也用于情绪的表现。下图也列举了部分动画中的表现。
特征区域图示1.2.2 伦勃朗光（Rembrandt lighting）
先提一下伦勃朗光，这是一种常见于肖像摄影的照明布局方式。最主要的特征是强调面部明暗对比，即高反差的光比。而卡通表现中经常使用到的是这种布光方式产生的阴影轮廓，这种轮廓最典型的特征就是一侧脸颊上产生的三角形的亮区。下图中即是这种布光的面部表现。补充一下：在渲染中实际上这种三角光是由面部的自阴影与自投影组合形成的，引擎中不采用直接打光的方式形成这种阴影的原因，一是阴影精度的问题，二是阴影的动态变化依旧不可控，在其他光照角度下很难有理想的阴影形状。
用光入门 浅谈摄影中伦勃朗光及布光方式
面部的这种光影特征也是在动画中对三角区域做处理的依据，侧光下很多角色面部都会出现类似的特征。
面部三角区1.2.3 其他形状
当然面部光影的表现形式有很多，对于类似下图的特殊形状，这里就不做过多的展开了。
特殊形态展开
1.2.4 动态变化
在3D中还原面部阴影最麻烦的地方在于光照的动态变化。动画中的阴影是逐帧调整的，可以为了画面不讲道理，而在模型上的计算是要遵循规则的，所以需要概括出通用的变化特征，再为了达成目的使用各种Trick。下面两张图展示出大多数动画中的动态变化。
12958奇蛋物语12959Re：从零开始的异世界生活 第二季 后半
另外也有画师做了不同角度面部光照的研究，挺有参考价值的，在这里一并贴出。光学核心写的《动画阴影化简》中不仅概括了面部特征，同时也有动画角色的整体阴影特征，十分推荐读一下。
JaneMere - ライティングいろいろ
光学核心-动画阴影化简二、渲染制作
为解决3D中面部阴影问题而提出的方案十分丰富。因为法线和阴影计算直接相关，所以最常见的方式就是修改法线，这种方式的资料比较容易查找，除此之外还有SDF记录光照数据、Matcap等方式，这里会逐一分析这三种方式。首先是不做调整的阴影效果：
12970
未修改的面部阴影
2.1 基于法线的修改2.1.1 包裹体法线
这种方式主要使用球包裹体或结构简单的包裹体法线去映射到面部法线上，使面部显示出对应包裹体的阴影形状。下图中就是将球包裹体的法线传递到面部模型上的过程，基本上每个DCC软件都支持类似的功能，传递法线这一操作就不写具体步骤了。
球体法线传递
传递之后的效果如下，由于是球形法线，所以阴影形状与球的阴影也很类似，这种方式操作简单，效果也简单就是包裹体的阴影，支持的场景比较有限。以面部模型为基础简化的包裹体也很难有理想的效果，所以应用上不算广泛。
12967
球形包裹体法线阴影
2.1.2 模型拓扑+法线修改
罪恶装备中分享的方法，法线修改的plus版，是应用比较广泛的修正方式。即把模型拓扑也改成对应阴影形状的拓扑，在此基础上调整法线，从而得到拓扑结构中的阴影形状。
GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS
蓝色协议也使用了这种方式去调整面部阴影，对应的模型拓扑结构如下图。
BLUE PROTOCOLにおけるキャラクタークリエーション
拓扑的方式可以调整出理想的形状，不过法线的调整是非常繁琐与耗时的，并且这种方式会导致阴影产生跳变，即在两种阴影形态之间会快速切换。罪恶装备因为是固定视角可以忽略这个问题，不过蓝色协议中还是能明显的感知到的，阴影切换的效果如下图。掰法线是一个很耗时的操作，下图应该能感受到效果了，这里就不做人物演示了ヾ(￣▽····
12962BLUE PROTOCOL
2.1.3 其他方式的修改
也有一些类似的法线修改方式在此一并贴出，不过由于修改后的法线不具有连续性，基本都会有上述阴影形态跳变的问题。拉平的法线，与上述拓扑+修改的方式类似，不过是将法线向几个方向拉平，以此来调整阴影。
https://twitter.com/Yoolies/status/1232345380991438855
法线贴图，以绘制贴图的方式修改法线。
https://note.com/sfna32121/n/n8d46090005d1
2.2 距离场阴影
https://twitter.com/madumpa/status/1093736946419916805
Signed Distance Field（有向距离场）的应用十分广泛，常见于字体渲染与RayMarching中。在面部阴影上应用的最早来源未知，疑似来自mihoyo做的技术分享，原神中也有应用。这种方法的思路就是使用距离场记录光照数据，之后在根据光源方向取出对应的阴影形状，它的优势很明显可以完全自定义阴影形态，同时在不同形态之间拥有自然的过渡。不过也存在一些问题：
[*]为了保证边缘信息准确，这张图不建议压缩；
[*]在一些情况下对软阴影支持比较差（一是会有色阶感，二在曲率不同与UV拉伸的区域会存在软硬交接的边缘）
[*]缺少光照方向Y轴的变化（魔改一下是可以多张拟合全向光照的，不过大多数情况下一张就已经够用了）
知乎上关于面部距离场阴影的讨论也有很多，下面的一些内容会直接上链接。关于有向距离场解释与应用：欧克欧克：Signed Distance Field364 赞同 · 22 评论文章
2.2.1 距离场阴影原理
12960
距离场阴影效果
有了距离场贴图之后，计算时主要需要三个数据，面部向前的向量(forward)，面部向左的向量(left)和光照向量(L)。距离场贴图实际记录了单方向光照，所以计算另一方向的光照时需要翻转采样。下述是相关代码，首先屏蔽掉方向光的Y轴获得lightDirH，lightDirH与forward点积计算出step的阈值lightAtten，lightAtten确定了当前光照在距离场贴图中的位置。而left与L点积确定光照方向在面部左边还是右边（sign是一个用于获取当前正负符号的函数），用于翻转距离场贴图。float3 lightDirH = normalize(float3(L.x, 0, L.z));float lightAtten = 1 - (dot(lightDirH, forward) * 0.5 + 0.5);float filpU = sign(dot(lightDirH, left));float3 shaodwRamp = tex2D(_ShaodwRamp, input.uv * flaot2(filpU, 1));float faceShadow = step(lightAtten, shaodwRamp.r);
还有一些细节，指路链接：黑魔姬：神作面部阴影渲染还原171 赞同 · 21 评论文章
2.2.2 制作方式
整合一下目前已知的制作方式，会先放出相关链接，然后简要概述。帧间插值法雪涛：卡通脸部阴影贴图生成 渲染原理34 赞同 · 5 评论文章
大概过程是先绘制出不同光照角度的面部阴影形状，之后使用算法生成每张光照图的SDF，插值混合生成最终图像。
单帧SDF生成
等高线填充法【教程】使用csp等高线填充工具制作三渲二面部阴影贴图_哔哩哔哩_bilibiliwww.bilibili.com/video/BV16y4y1x7J1
与上述方式本质上相似，不过是利用了已有软件的功能。过程是先绘制出不同光照角度下面部阴影的边界线条，之后利用CSP的等高线填充功能，生成SDF。CLIP STUDIO PAINT
曲线融合变形五行精灵：三渲二脸部阴影曲线，曲线融合变形算法 curve morph algorithm 开源41 赞同 · 6 评论文章
自动化的胜利，在houdini中拟合等高线的变化过程，同时生成高度图，获得SDF。曲线变形
2.2.3 效果
简单制作不包括三角区域的SDF如下：SDF
应用效果如下：
12969距离场面部阴影
2.3 Matcap
又到了万能的Matcap出场了，《七つの大罪 光と闇の交戦 : グラクロ》的技术分享中讲述了这种方式，作者在分享中讲到使用这种方式的原因：「根据（动画）演出中非现实的阴影设定，比起物理事实更重视感情的传达」在大部分情况下卡通画面不需要保证光照的正确性，只要画面中的效果是感观舒适，就是可行的。所以在非动态光照的下，使用Matcap表现角色的光影结构切分是非常简单并且效果还不错的方式。〈七つの大罪〉をゲームで！高品質グラフィックを具現化するための技法と開発最適化のご紹介
下图是ppt中贴出的matcap相关的代码（最简版的Matcap），同时也使用了顶点色对一部分不需要的效果进行屏蔽。〈七つの大罪〉をゲームで！高品質グラフィックを具現化するための技法と開発最適化のご紹介
这里补充一下顶点色，用顶点色做面部的阴影修正的补充是一种常见的方式。比如崩三分享中，使用顶点色屏蔽AO。『崩壊3rd』開発者が語るアニメ風レンダリングの極意
新樱花大战中使用顶点色用于记录轮廓粗细，曲率与阴影Mask。新サクラ大戦のキャラクター作成事例三、扩展3.1 头发投影
卡通角色不管面部的阴影如何，头发在面部的投影基本是不会缺的，不过因为还原起来比较复杂，这个细节又比较不明显，所以大多数游戏中都是忽略这个效果的。たんもし
相关内容已经有人分析并且实践的非常全面了，这里同样也是给出跳转链接。流朔：【Unity URP】以Render Feature实现卡通渲染中的刘海投影794 赞同 · 38 评论文章
3.2 SDF扩展
有了距离场的思路实际上可以扩展出很多内容，下面用距离场实践一下鼻尖的高光。3.2.1 鼻尖高光
鼻尖高光通常的应用范围是鼻尖左右两侧，所以根据鼻尖高光的变化区域，在对应的UV位置上制作出下图的距离场。鼻子高光SDF
有了贴图之后就是类似于取面部距离场的操作，只需要修改添加一些简单的数学运算就可以了。代码如下：
float filpU = saturate(sign(dot(lightDirH, left)));float cutU = step(0.5, input.uv.x);float uvMask = lerp(cutU, 1 - cutU, filpU);float3 lightDirH = normalize(float3(L.x, 0, L.z));float lightAtten = abs((dot(lightDirH, forward) * 0.5 + 0.5) - 0.5) * 2;float3 noseSDF = tex2D(_NoseSDF, input.uv);float noseSpecular = step(lightAtten, uvMask * noseSDF.r);
简述一下思路：重点在于uvMask与lightAtten的计算。由于同一时刻只会有一侧高光，所以uvMask用于屏蔽掉另一侧的高光。而对于Step的取值lightAtten，可以先假设光在面部正侧方的时候鼻尖高光最大，所以需要lightAtten在侧光时为0，正光与背光时为1，这样就需要将[-1, 1]的变化区间改为 1 到 0 到 1，代码中的计算就是进行的这个操作。另外一般还需要修改高光变化的速度与过渡边缘的软硬，给lightAtten加个pow改变灰阶的变化速度，再将step改为smoothstep让过渡软下去就可以了。效果如下，注意鼻部（其实上面视频中也有）：
12971鼻尖高光
3.3 面部造型3.3.1 视场(Field of View)的影响
先来解释一下视场，视场即FOV，在摄影中指相机可以接收影像的角度范围，也可以称为视野。由于显示比例的原因，FOV在水平与垂直方向上的数值不同，以下未作说明的情况下默认为水平FOV。FOV越大视野越宽，透视的变形就越大，下图可以很好的展示这种特征。How Focal Length Affects Viewing Angle
下图是人眼的水平视场的范围示意，±30°是中央视野区域，±60°是双眼水平视场。所以游戏中的FOV也遵循这个规则，能够修改的范围通常都在60 - 120之间。
12961人眼的水平视场能力(Horizontal Field of View, FOV)
而FOV的高低会很大程度上的会影响角色表现，特别是特写时的面部区域。卡通角色更适用于在较低的FOV中表现效果，而第三人称视角中通常使用到的FOV数值要远大于适合卡通表现的FOV。下面的视频中是 5 - 60 之间的 FOV (Vertical) 变换，可以明显的看出FOV变化时面部轮廓的变形。5 - 60的 FOV (Vertical)，在16 : 9的显示比例下，换算成水平FOV是 8.88 - 91.52 之间很多卡通角色的模型在制作时面部正面会选择做扁，一部分原因就是为了抵消高FOV带来的面部轮廓变形。
129685 - 60 FOV (Vertical) 变换
3.3.2 模型制作
介绍完FOV的影响，然后来探讨下模型的制作。卡通角色为了画面表现的常常会有夸张的形变，同时也有上述FOV的问题，所以在卡通角色头部时会有不同于写实角色头部的制作技巧。罪恶装备也有分享相关的内容，不过并没有翻到有写这部分的解析文章。这里我就摘抄和转述其中一部分面部的内容吧，这部分内容很好的解释了，为什么我们见到的卡通面部模型是现在的特征。小忍
PPT名称是「GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS」摘抄部分的标题是「破錠しにくい顔形状の作り方」Ⅰ. 为什么动画风格的脸会不成立?
说到底动画人物的脸在三维上是不成立的。“夸张”和“省略”提升了角色的表现力，不如说，很多情况下不成立的部分正是魅力所在。
动漫风格的脸 = 极端和“超现实”的变形。因此，很难将其完全还原为立体形象。应当认清无法还原是不可避免的，使用变形器或骨骼修正是比较现实的方式。不过在模型层面上尽可能的接近理想的外观，能做的事情有很多。
Ⅱ. 以斜脸作为制作时的参考视角
这种方式的逻辑是，在正面与侧面上还原外观都是可行的，但是如果想要各个方向的外观都成立，难度就瞬间飙升。所以就不能继续使用三视图的制作方式了，这里非常考验模型师的能力。而斜面是展示频率最高的角度，真正使用到正面与侧面的构图反而是很少的。另外也有很多从正面与侧面看不出来的表现点。并且作为中间角度的斜面脸型成立的话，正面与侧面之间的其他角度也很容易成立。「让斜脸造型成立 = 打造有立体感的脸，兼顾动画变形与立体感的脸才能最大程度的减少违和感」Ⅲ. 斜脸时制作的注意点
① 脸颊的线条（粉紫线） ② 嘴部的收缩（蓝线） ③ 眉眼的立体感（黄线） ④ 下巴的线条（绿线）
① 脸颊的线条正面和侧面看不到的线条，很大程度上决定了角色尖锐、柔软、粗略的印象，可以看作制作美型、美少女角色时候的生命线。
② 嘴部的收缩动画中常见的情况，在斜脸的时候把嘴部画的偏后，可以使用变形或骨骼修正，不过在模型阶段也能做一些努力。将嘴角向后收缩，可以一定程度表现出这种纵深感。
③ 眉眼的立体感人们常说的眉清目秀的重要要素，特别是眼睛周围容易吸引视线，即使有一点错误也容易产生违和感。眼角到眉间的高度落差就是所谓的周边深度，虽然容易被”额头是平的“先入为主的观念影响，但只有中间的部分才是平坦的。越靠近脸中间，额头与眼睛的落差是越深的。（这里的意思应该是，眼角区域与眉间的落差是很大的）
动画中，通常会夸张两个眼睛之间的宽度差距，以此来营造立体感。把眼睛整部分倾斜，会在侧面获得一个还不错的效果，但是在其他方向上会导致各种问题。所以只让眼角向后倾斜，既可以获得立体感，得到侧面两个眼睛之间具有比较大宽度差距的效果，也能不影响其他角度的面部形态。
④. 下巴的线条和脸颊的线条一起形成了面部的轮廓，和脸颊的线条一样很大程度上也左右着尖锐、生硬等形象。在制作中的一个常见问题，模型的正面与侧面是符合三视图特征的，但是在斜面就会显得脸横向拉长。
解决这个问题的方式不是压平面部减少横向宽度，而是要向内收窄下巴轮廓，这样就可以在不改变正面脸和侧脸的外观的情况下，调整斜脸的面部轮廓。
Ⅳ. 总结
既然以“超越现实的表现”为目标，一定程度的违和就不可避免。通过变形器或骨骼变形的目前最好的方式。但是通过模型制作时的努力可以在一定程度上缓解。重点在于变形与立体感的兼容性，在不影响变形效果的范围内，在立体感上下功夫。这里简略了很多内容，细节部分建议去看原PPT，链接见文后引用。3.3.3 基于视角的面部形态修正
所以只靠模型制作是很难达到理想效果的，这个时候就需要辅助手段，根据视角去修正面部形态，保证面部在镜头中的形态是好看的。可以使用BS或骨骼根据摄像机位置混合对应的变形。变形方式也可以有多种，比如基于视角的微调、压扁变形模拟低FOV。以下列出一些应用的效果：12963「IDOLY_PRIDE」の3D美少女キャラクターを魅力的かつ効率的に制作する手法
12966@MuRo_CG12965百舌谷 @mozuya_12964ぽぷりか @POPREQ
3.4 其他特征
还有一些小的特征，不过这篇写的太长了，就简单的提一下，有缘再细写。（咕了）3.4.1 红晕与点光
面部表现的常见效果。红晕与点光3.4.2 颈部阴影
下巴处或者说脖子上部区域的阴影一般会做影贴图，作为恒暗区域处理，不过在动画中这一部分的表现变化其实挺丰富的，在不同画风的动画中的处理方式不同。通常会配合人物的硬朗与柔软的外观做更改，有层数与明暗的变化，对于外形硬朗的角色塑造通常会使用较深的阴影或双层阴影，而对于一些着重表现柔软的角色则会忽略部分阴影与轮廓线。颈部阴影3.4.3 边缘高光
面部边缘高光主要有两种，侧视时的边缘以及正视时的左右两侧边缘，可以使用SDF或深度边缘光或边缘检测的方式来制作。边缘高光引用
[*]「GUILTY GEAR Xrd -SIGN-」で実現された「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密
[*]用光入门 浅谈摄影中伦勃朗光及布光方式
[*]动画阴影化简
[*]GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS
[*]BLUE PROTOCOLにおけるキャラクタークリエーション
[*]Signed Distance Field
[*]神作面部阴影渲染还原
[*]卡通脸部阴影贴图生成 渲染原理
[*]【教程】使用csp等高线填充工具制作三渲二面部阴影贴图
[*]三渲二脸部阴影曲线，曲线融合变形算法 curve morph algorithm 开源
[*]〈七つの大罪〉をゲームで！高品質グラフィックを具現化するための技法と開発最適化のご紹介
[*]【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
[*]『新サクラ大戦』目指したのはアニメのデフォルメとリアルな質感の両立。アニメ調のキャラモデルはいかにして生まれたか【CEDEC 2020】
[*]【Unity URP】以Render Feature实现卡通渲染中的刘海投影
[*]How Focal Length Affects Viewing Angle
[*]VRUI Library
[*]「IDOLY_PRIDE」の3D美少女キャラクターを魅力的かつ効率的に制作する手法
大佬流弊！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 帅气~~~~~~~~~~~~真得是大佬~~~~~~~~~~~~~ 1111
页:
[1]