为什么要写这一篇？
知乎上已经有了很多卡通渲染的文章，但很多都在“术”的层面讲解技术，以及具体的shader实现，往往会使人陷入“不知道为什么要这么做”和“抄也抄不好看”的尴尬境地，而这也是我初学渲染时的写照。因此，我想用这一篇来聊聊我在学习过程中的思考与感悟，并帮助大家理解卡通渲染中各种操作的意义。当然，我目前也仅仅是刚入门，自知水平不够，可能贻笑大方，所以权当抛砖引玉。同时在此感谢 @flashyiyi @YivanLee @Jason Ma @MIZI 等大佬们分享的知识，并悼念 @毛星云 大佬的离世。
先来看一下最终效果吧，模型和贴图来自模之屋少女前线官方：
视频演示在B站
少女前线2 闪电姐 卡通渲染Demo（技术美术向）_哔哩哔哩_bilibiliwww.bilibili.com/video/BV1N14y147WU一 卡通渲染与真实感渲染的区别与联系
先来说说卡通渲染和真实感渲染
与传统的追求照片真实感的真实感渲染不同，非真实感渲染（Non-Photorealistic Rendering， NPR）旨在模拟艺术式的绘制风格，常用来对绘画风格和自然媒体（如铅笔、钢笔、墨水、 木炭、水彩画等）进行模拟。而卡通渲染（Toon Rendering）作为一种特殊形式的非真实感渲 染方法，近年来倍受关注。
上文提到，一直以来，有一种特殊形式的 NPR 倍受关注，且和我们的生活息息相关，那就是卡通渲染（Toon Rendering，又称 Cel Rendering）。这种渲染风格能够给人以独特的感染力与童趣。这种风格很受欢迎的原因之一是 McCloud 的经典著作《Understanding Comics》中所讲述到的“通过简化进行增强（Amplification Through Simplification）”。通过简化并剔除所包含的混杂部分，可以突出于主题相关的信息，而大部分观众都会认同那些用简单风格描绘出来的卡通形象。
NPR渲染与卡通渲染目前尚未有十分严谨的定义，或者换句话说，NPR渲染与卡通渲染本身就是一种概念宽泛的渲染风格及渲染手段。而关于真实感渲染，大家最为熟悉的应该是“PBR”的说法，然而，我并不想在本篇使用“PBR”的概念来指代我的研究对象，因为严谨地说，“PBR”即Physically-Based Rendering，本质上是一套极为严谨的基于光线追踪算法的研究真实感渲染的理论框架，包括基于物理的Bxdf、局部光照（Local Illumination）全局光照（Global Illumination）、体积散射、物理光源、物理相机等等等等大量的内容。
pbrt was designed and implemented with three main goals in mind: it should be complete, it should be illustrative, and it should be physically based.
因此，基于本篇文章只是粗浅地借鉴了部分PBR理论的内容的事实，我认为使用“真实感渲染”来指代本文的研究对象更为恰当。
接下来，我将使用通俗易懂的语言来谈论卡通渲染与真实感渲染的区别与联系。
区别：
目的不同，真实感渲染的目的是达到地球ol的渲染效果，其本质是对于现实世界的逼近。而卡通渲染的目的是达到基于美学的理想世界的渲染效果，其本质是对现实世界的抽象。显而易见，真实感渲染的研究必然是科学且客观的，但卡通渲染的研究方法尚且难以下定论，诚然，卡通渲染的研究不可避免地会涉及到客观的真实感渲染的理论，比如次表面散射、反射与折射等等，然而，这些真实感渲染的理论又往往只是作为参考，在卡通渲染中需要对其进行人为的主观设计。
联系：
卡通渲染与真实感渲染都需要参照真实世界，因此卡通渲染在研究时必然会运用到真实感渲染的各种理论，然后卡通渲染会基于这些理论形成一套自成一派的体系与规则。比如，日式卡通与美式卡通。
身体比例：往往是设计者有目的性地调整，为了突出某些人物特征，如身材健硕、娇小可爱等等。
面部结构：日式卡通渲染对于角色面部的抽象是系统且合理的，突出了脸部具有辨识度的部分，同时简化了不必要的细节。
如果你并不清楚面部结构抽象的原理，那么我推荐使用“眯眼观察法”，从概括性的角度去审视角色的面部，我们可以得到这样的结果：
从图中我们可以得到如下信息：
首先是在面部中，眼睛在“心理层面”的占比是最大的，或者说它的重要性是最强的，因为它具有与其它面部结构完全不同的材质，在颜色、结构上也有较大的差异，所以即使是在模糊之后，眼睛仍然具有极高的辨识度。
其次是模糊之后就辨识度就降低了不少的鼻子和嘴巴，以鼻子为例，在观察角色正面及正侧面时，其主要贡献只是形成一块面部阴影、一小片鼻尖高光及一道浅浅的轮廓。嘴巴的情况类似，嘴唇的颜色也会失去一定的辨识度。
因此，在卡通渲染的抽象流程中，重要的部分会被抽象得更加重要，不重要的部分也会被抽象得更加简化，其本质是对于“心理层面”重要性的显化。
从二值化光照到基于物理的bxdf、全局光照
试想这样的一个光照模型——被光线照到的地方就是统一的亮，物体直接显示其basemap，不被光线照到的地方就是统一的暗，只显示黑色。
显然，在这个最简单的光照模型中，光照反馈是有得到体现的，但是观感上不太舒服，其原因之一就是暗部太暗了，什么也看不到，或者使用更加专业的说法，没有考虑到间接光漫反射，而要修正这一结果，可以使用全局光照的不同算法计算这一区域的间接光，当然，也可以仅仅只是在这个区域给上一个灰色或者其他颜色的叠加；
其二就是亮部和暗部的过渡看起来太生硬了，为此，我们可以使用一些合理的bxdf算法，或者直接使用一些ramp过渡，或者加多一层中间阴影层；
其三是画面的“光感”不够强，或者说是画面不够“通透”，用以上方法渲染出来的模型都会看起来像石头，用专业的说法：只考虑了材质的反射，却没有考虑到材质的透射、散射、折射等效果，为此，我们可以使用bsdf、btdf等更加复杂的光照模型，也可以使用一些小trick来达到相似的效果，比如下一小节提到的特殊“sss”效果。
这一节中我花费大量篇幅讲的这些原理，到底有什么用呢？请看这张原神的ramp图：
如果你理解了我上文所提到的思想，那么你就能快速地get到这张图所蕴含的信息，包括直接光漫反射、间接光漫反射以及sss效果，这张ramp图的精妙之处就在于此，用极小的开销就抽象出了复杂的、高度可控的光照信息。
使用同样的思想，便可以找到更多真实感渲染在卡通渲染中的“替身”。比如模拟菲涅尔效果的边缘光、模拟金属质感的matcap……
除此之外，我们也能理解这些trick的精妙之处，比如为何可以使用matcap来模拟金属、眼球、玻璃，而不能模拟皮肤、石头？这是因为金属等材质不存在直接光漫反射，其光照反馈完全随视角变化，同样，我们能够在非金属表面看到因光照产生的NdotL光照反馈，但在金属表面是绝对不应该出现的。
“无处不在”的“sss”效果
次表面散射，Subsurface Scattering，简称 SSS(又简称 3S)，就是光射入半透明材质后在内部发生散射，最后射出物体并进入视野中产生的现象，是指光从表面进入物体经过内部散射，然后又通过物体表面的其他顶点出射的光线传递过程。
二次元画面（特别是使用赛璐璐画法的画面）往往饱和度偏高，而实际上某些饱和度高的色块就是在模拟sss效果，只是由于画风的限制，sss效果并未表现为渐变，而是被抽象成了色块。
而在具有复杂光照的场景中，卡通渲染中的“sss”效果（或者说是疑似sss的效果或者说是ramp效果）就会承载更多的功能。
首先声明一下，下文谈及的'sss’效果并非指代基于物理的次表面散射效果，而是一种使用ramp或者其他方式为画面局部增添颜色，从而让画面变得更加好看的一种方法，由于缺少指代的名词，故沿袭我发现的最早使用的这一命名指代。
原神的ramp图实际上为除了金属之外的所有材质都给上了“sss”效果，并为不同角色在不同光照环境下设置了不同的ramp图，因此，这些ramp效果也许在“次表面散射”的传统视角下是错误的，但在考虑全局光照的间接光漫反射时却是合理的。在这幅图中，皮肤上的ramp效果可以视为次表面散射效果，而使用同样方法制作的头发、衣服等的ramp效果则可以视为漫反射光感的显化，让画面变得更加通透。
其他sss效果：
sss效果本来就是薄的地方透射效果更强，可以此来类比丝袜，薄的地方透肉的效果更强（当然，肉薄的地方和丝袜薄的地方一般不是同一个地方，只是制作手法都可以使用ramp）。
当视线方向与光线方向相反时，我们看到的是经典的sss效果，当光线方向与视线方向没什么关系同时投射出阴影时，我们就可以看到这种sss阴影效果，即阴影的边缘是由较薄的物体投射出来的，其并不能完全地遮挡住光线，因此产生了这种阴影的sss效果。
综上，在亮暗渐变的明暗交界线处，都可以加上一抹颜色，只要看起来没有太大的问题。
不可或缺的描边效果
卡通渲染的描边可以追溯到赛璐璐动画的手绘制作流程，但在我看来，目前卡通渲染描边已超出了“画法继承”的范畴，其作用可分为以下几点：
强调模型重要性
这一点在某些特殊效果中较为明显，比如物体被选中、被攻击等等。一般而言，卡通渲染的平面化程度越高，模型的描边就越为明显，特别是在某些2D动画或2D插图中，描边的颜色和宽度都相当明显。
凸显层次感
在卡通渲染中，诸如头发、衣服层次等材质相同而具有丰富层次的结构难以仅仅使用色块来表达，此时就需要使用描边对结构层次进行刻画，因为这些结构一般都会产生一定的环境光遮蔽，而这些描边实际上是对AO的暗示。另外，两块区域的层次相差越大，描边越宽、颜色越深，例如，角色的外描边往往比内描边要宽和深。
平衡画面色彩
这一点是较为感性的认知。一般而言，卡通渲染画面效果的饱和度和明度都偏高，而使用明度偏暗、饱和度较低的描边可以把色彩很“跳”的画面给“压”下来。据此，后期的色调映射也能更好地发挥效果。
暗示光影关系
描边粗细、颜色的依据是模型的光影关系，而光影关系可以参考光照强度、模型结构等特征。下面通过一些案例进一步阐释：
由图可以看出：
在光照强度较高（或者说是背景色较亮）的区域，描边较细，颜色较淡；在光照强度较低（背景色较暗）的区域，描边较粗，颜色较深。在曲线区域描边，描边宽度应跟随曲线的走势变化（这个有点难以表达，看图吧）。
让角色融入背景
“你的背景太假了”
在这张图中，前景小伙黝黑的皮肤与背景鲜亮自然的美景形成了对比，让人感到人物与背景的光照反馈不同，同时，小伙的清晰度确实有点低，虽然背景的清晰度也不高，但由于背景在远处，有一点景深模糊的效果反而可以接受，所以相对而言显得小伙的精细程度和背景格格不入。而要使其变得和谐，我们就需要让角色与背景的光照反馈一致，并让整体画面的风格、颗粒度等一致。实际上，间接光的漫反射和镜面反射，甚至是后处理效果都有助于画面的协调。
下面就介绍一些方法。
1 特殊的bloom
一般的bloom是为了处理HDR图像中超出LDR范围的部分，使用模糊算法让超出范围的色彩能够影响到一定范围内的其他色彩，从而显化HDR图像的色彩以符合人的心理预期。
而在卡通渲染中，bloom效果被广泛用于制造画面的“光感”，而在统一的“光感”之中，就能够达到一定程度上的画面的和谐。因此，与一般的bloom后处理的设置方法不同，在卡通渲染中，如果想要营造场景的光感，我建议将bloom的阈值调低，再将intensity也调低，但是将scattering调高，以此让bloom效果从“处理超出范围的色彩，并使其合理表达”变为“处理大部分画面的色彩，营造整体的光感”。
2 特定区域颜色滤镜
在画面的上方和下方制作不同的颜色滤镜，以显化人对于自然环境光的感受。写到这时，发现自己很喜欢用“显化”这个词，的确，卡通渲染就是有很多显化的操作，就如同人们评价莫奈，仿佛能走进他的画面，感受到画面的光。这就是莫奈对他即时感受到的画面的光感的显化。
3 合适的ramp图
采样ramp图的操作在原神以及其他米哈游的游戏、影视作品中有很广泛的应用。除了前文提到的“sss”效果之外，ramp图的另一个作用就是模拟直接光和间接光漫反射，在卡通渲染中对间接光漫反射的准确度要求显然是不需要太高的，因此，原神为不同的角色制作了白天与黑夜两套不同的ramp图，配合上主光的染色，就可以模拟出清晨、正午、黄昏、午夜四个不同时段的环境光照反馈。
5 多光源
游戏场景中的一些局部光源能够营造很好的游戏氛围感，包括篝火、路灯、手电筒等等等等。为了让角色也能够融入这种氛围感中，我们需要为材质设计合理的次要光源反馈。在卡通渲染中，这部分的设计是比较灵活的，倘若是想让画面效果更加卡通，那么次要光源就可以在模型上打出一道漂亮的分界线，但想让画面效果往插画或者stylized PBR方向靠拢，那么次要光源就应在模型上产生渐变效果。
推荐阅读这几篇文章 ：
Lute Li：HDR,ToneMapping,Bloom之间的关系flashyiyi：PBR光照体系下的卡通渲染光照模型flashyiyi：到目前为止的二次元渲染总结flashyiyi：蓝色协议技术分享解读
结合我们前面介绍的内容，就可以分析一张少前2网图画面的一些问题
脸部与其它部分抽象程度不同：或者说颗粒度不同，有接头的感觉
头发质感没能很好地表达：没有使用描边，层次感一般，同时缺少了AO的效果；没有使用各向异性高光，质感表现不足，使头发整体看起来像手办
真实感渲染部分的贴图精度太高：比如枪托和衣服上的带子
再来分析一些相对优秀的画面，比如沿光-Horizon
首先说头发。头发的模型贴图质量很高；头发材质的各向异性有很好的表达；头发能够接收多光源，黑暗环境中存在的局部光源成功地营造了氛围，让头发与背景相统一。
脸部没有光源反馈，但是其对比度和饱和度都偏低，因此并不会让人因这个细节而产生违和感，同时，正因“对比度和饱和度都偏低”的这一特性，角色的五官感觉“融入”了脸部，提高了角色面部的合理性。
（P1-P3） “含蓄的五官”m.weibo.cn/6939372664/4633831904645749
最后是枪械材质的刻画。模型和贴图的精细程度都很恰当，虽然应该是使用了PBR的材质，但是整体看上去非常干净，没有多余的细节。
根据上文的个人思考，结合卡通渲染与真实感渲染、主观审美与客观规律制作出好看的画面效果。
充分利用真实感渲染的特性以及PBR的思想，补足卡通渲染在金属、皮革等材质上的不足，同时探索材质抽象方式在整体和局部的合理表达。
通用
basemap：basemap与mainlight构成最基本的直接光漫反射。
前向光：是一个使用NdotV构造的mask，用以改变模型的立体感。
描边：额外pass，模型背面法向偏移，随镜头远近改变粗细。（todo：顶点色控制描边粗细或显隐）
2D ramp图：用以模拟难以被准确定义的“sss”效果、为面部、皮肤等模拟间接光漫反射、统一画面色彩。
灵感来源于这篇文章
骨鱼子：厚涂风格实时二次元渲染(2)-厚涂风的皮肤渲染
多光源：只搭建了基本框架。（todo：继续观察与实验）
深度边缘光：本质是对材质菲涅尔效果的显化。具体实现可参考喵佬文章
Jason Ma：【JTRP】屏幕空间深度边缘光 Screen Space Depth Rimlight
（tips：深度贴图不需要采样两次，物体的初始深度贴图可用positionCS.w来代替）
ibl模拟间接光漫反射：相对于只使用ramp图，理应能够让角色与场景更加统一。（todo：用球谐光照优化性能）
环境反射贴图模拟间接光镜面反射：凸显光滑材质的质感。
后处理：低阈值高散射bloom，原理在上文；aces色调映射，把颜色映射到它该去的位置；以及其他杂七杂八的后处理。
皮肤（除脸部）
两层smoothstep：模拟直接光漫反射与sss效果。
图片看前面的就可以了。
脸部皮肤
面部法线传递：主要是让面部法线的x方向与z方向能够平滑过渡。
sdf面部阴影：可以理解为制作很多阴影分布的关键帧，通过主光角度与面部法线计算出面部阴影的中间帧。具体可参考
MIZI：二次元角色卡通渲染—面部篇
sdf面部阴影图的制作方法有很多，但我推荐这种使用SD制作的方法，可参考
如何控制三渲二中阴影分布的位置？
原因之一是流程较为程序化，制作中的每一个中间步骤都可以反复调节。原因之二是可以控制sdf图渐变的速度。有些特殊的主光角度可能会打出并不好看或者有瑕疵的阴影，为了减少出现这种阴影的概率，可以改变sdf图的渐变速度以实现。如果仔细观察原神中角色面部阴影随主光方向的改变速度也能发现这一特性，即阴影的过渡并非是线性的。不过我并不清楚他们是通过凹法线还是凹sdf图实现的。
鼻尖高光：这个细节是参考了原神，如果不仔细看的话有点难看出来，制作思路和面部阴影是一样的，都是使用sdf图。
鼻尖描边：在侧视面部的时候，由于有背面法线外扩描边，所以可以看出鼻子的轮廓，而在正视面部的时候，鼻子是有可能完全没有表达的，而在少前2的一些宣传片中，我们可以发现正视面部时鼻子也存在描边的效果，于是我参考了这个视频，放置了一个背面朝前的模型在鼻尖处。
眼睛
内凹法线计算漫反射，外凸法线计算镜面反射：参考真实的眼球结构，眼球中凹下去的结构漫反射较强，而凸出来的结构镜面反射较强，且是几乎透明的。
可旋转的环境反射贴图：使用了环境反射贴图来模拟眼球的镜面反射，在调节好粗糙度和旋转角度后，能够达到不错的效果，当然，使用matcap也可以，而且性能更好。
头发
flowmap修正切线：整体流程和原理可以参考这篇文章
YivanLee：虚幻4渲染编程（人物篇）【第一卷：Basic Human Hair - 上】
说一下踩过的坑。首先是关于笔刷角度究竟是设置为0度还是180度的问题，因为我看了很多人分享的文章，答案莫衷一是，实际上，这个角度与代码中的这个语句有关。
tangent.x = -tangent.x;//有这句时，sp中的画笔方向为180度，没有为0度代码参考：
马甲：丝绸效果的实现
其次是在SP中绘制flowmap的操作问题。如果你的模型的头发UV是经过特殊处理的话就会很方便，比如已经打直、展在同一个地方等等。但如果你的UV是像闪电姐一样的话，那么就建议先把头发拆分成多个物体，这样就可以确保一笔不会画到多个物体。另外，一片头发的绘制尽量用大笔刷一笔完成，否则绘制的flowmap会在画笔相接处产生接缝，进而让头发高光断裂。
两层kk各向异性高光：
一般的卡通渲染的头发可能是使用绘制高光作为mask，再通过NdotH或NdotV等经验高光公式来计算是否出现高光，但这种画风对本作的风格来说显得太卡通了，故参考了米哈游的这一头发各向异性方案，使用kk公式实现。
参考的方案如下
游戏葡萄：米哈游技术总监首次分享：移动端高品质卡通渲染的实现与优化方案
具体实现的参考
Time machine：Aniso Kajiya-Kay Flowmap
模板测试刘海阴影：如果单纯绘制阴影图的话，阴影无法随刘海飘动而变化（假如刘海有动画的话）。因此参考了这篇文章使用模板测试的方法，感觉比采样深度图的效果更好，几乎没有穿帮的地方。
流朔：【Unity URP】卡通渲染中的刘海投影·改
皮革 金属
这个部分算得上是本篇的重点，但实现的思路其实并不困难。首先我们需要在shader中实现一套pbs算法，我这里参考了这篇文章，实现了ggx brdf，这样素材中的rmo贴图就能派上用场了。接下来就是探索如何对这套算法框架进行魔改了。
URP管线的自学HLSL之路 第三十七篇 造一个PBR的轮子www.bilibili.com/read/cv7510082
啰嗦一句，在处理如本例中具有重叠UV的模型时，应注意模型的切线问题，如果不加以处理，在UV的对称接缝处就会出现一道明显的边界，边界两边的高光反馈方向相反。由于tangent.w的值与vertex的顺逆方向有关，所以负号使用与否取决于UV的对称方式。
v.tangent.xyz *= -v.tangent.w;首先，脑海中浮现的最直观的想法，就是使用一个参数来控制材质的卡通渲染及真实感渲染的比重。而要实现这个效果，我想到了两种方案——①暴力lerp，自由地控制材质效果在pbs框架和卡通渲染shader框架中的比重。②魔改FGD项的内容，或者为FGD项赋予强度控制的参数，可以达到相似的结果，但是调参过程并不直观。最后选择了第一种实现方案。
在前面提到的卡通渲染实现方式中，很多的参数都是可以高度自定义的，包括各种强度、颜色等等，因此，作为某些参数的抽象对象，在pbs中的间接光漫反射、镜面反射强度等也理应是可以自定义的，否则可能会出现不同材质之间的亮度相差过大的问题。
最后是实现各向异性高光。
代码实现：将ggx brdf的NDF方程中的NdotH项转换成NdotX和NdotY就可以了。
half D_Function(half NdotH,half roughnessSqr)
{
half a2=roughnessSqr*roughnessSqr;
half NdotH2=NdotH*NdotH;
half nom=a2;
half denom=NdotH2*(a2-1) 1;
denom=denom*denom*PI;
return nom/denom;
}
half GGXAnisotropicNormalDistribution(half anisotropic, half roughness, half NdotH, half HdotX, half HdotY)
{
half aspect = sqrt(1.0 - 0.9 * anisotropic);
half a2 = roughness*roughness;
half NdotH2=NdotH*NdotH;
half ax = roughness / aspect;
half ay = roughness * aspect;
half HdotX2 = HdotX * HdotX;
half HdotY2 = HdotY * HdotY;
half nom = ax * ay;
half denom = HdotX2 * ay/ax HdotY2 * ax/ay NdotH2 * ax*ay;
denom=denom*denom*PI;
return nom/denom;
}
不知不觉就写了好多好多，难免有疏漏或者啰嗦的地方，还请见谅，如果发现有明显谬误的地方，也欢迎大家在评论区指出。正如这篇文章的开篇所说，我希望大家能多多少少获得一些启发，变得“抄也抄得明白”，“抄也抄得好看”，当然，最好是能够形成一套属于自己的“观察、思考、设计、实践”的体系，而不是为了做而做。
最后，如果你是初学者，我推荐你把我文章中分享的文章和文献都认真看完，看完之后我相信你也能够制作出好的角色渲染效果。但如果你急着使用我的shader，或者单纯只是想知道我的参数是怎么调的，可以在我的partme主页：
H2O2的Partme-会员制订阅平台
https://partme.com/H2O2
购买工程包，就当做v我50吃顿疯狂星期四吧！
参考文献：
《<Real-Time Rendering 3rd> 提炼总结》
《Physically Based Rendering From Theory To Implementation (Third Edition)》
作者：过氧化氢
联系客服
