崩三类卡通渲染解析及制作规范

一、本篇文章分为三部分

1，卡通材质解析。

2，优化方向。

3，制作规范。

二、正文部分

1，卡通材质解析

卡通渲染属于非真实感计算机图形学（NPR）的范畴，然而崩三的卡通渲染又在国内被称为行业的标杆，前段时候花了一些时间对此研究了一下，也算对最近的卡通渲染做一次总结。

本人原画，3D出身将从美术的角度，全面解析崩三的卡通渲染，并文章末尾提供必要的Unity2017的shader代码，和maya及max中卡通材质的节点网络，希望大家能做出更好的卡通渲染作品。

那么接下来我们开始进入正题，崩三角色单体模型主要分为三部分，头发，头部和身体，模型部分并不是行业难点，就不做多说明了，相信大部公司或者外包公司的美术都能解决这一部分问题。而真真存在技术壁垒是卡通材质的表现部分，那如何能在工作项目中表现这种材质呢？以及如何制定制作规范满足游戏引擎中的表现呢？

我们取崩三角色的身体部分来分析，如下其贴图构成要素：

可以从图中看出身体部分模型有2张贴图，一张颜色贴图（color）,一张灯光贴图（LightMap)。color贴图是采用颜色平铺模式，很干脆，而Lightmap的RGB三个通道分别存储三张灰度图，主要是为了减少贴图量，图中R通道角色皮肤部分为纯黑，其它部分为不同明度的灰色，不过本人觉得其它部分为纯白也可以，这张图的价值应该主要是为了区分皮肤部分和非皮肤部分，如果要表现其它各不同部分的材质，后面代码中要增加相应的条件算法，手游感觉应该没有这个必要，G通道是为了能产生类似AO的遮罩效果，B通道自然是高光区域。这就是崩三所用的表现卡通材质的所有素材。

为了让人更加全面的理解，崩三为什么要这么做，这种方式是他们创造的吗？显然不是的，接下来我们将对另一个游戏的卡通材质做解析，那就是真正的业界的卡通渲染的标杆——罪恶装备《GUILTY GEAR Xrd-SIGN-》，如下图：             

图一

《GUILTY GEAR Xrd-SIGN-》用到了三张贴图，基础颜色贴图color，含四通道RGBA，表现阴影区域的Sss贴图，含三通道RGB，表现光照细节及内边线的ILM贴图，含四通道RGBA。颜色贴图的A通道应该是遮罩用，主要分离手部，见图二，具体用处不详，可能用于一些特殊效果，用不到可以忽略，比如崩三没有用，表现阴影的Sss贴图，效果很直接，不过本人觉得应该不需要这么复杂，直接通过颜色贴图制作阴影部分的贴图就可以了，这个可能与制作工艺有关，可能他们有直接一键转换的动作或是方法，崩三没有这张贴图，直接用LightMap的R通道做遮罩，再利用颜色贴图，制作阴影部分，也算减少贴图适合移动平台吧。如图一所示，对于ILM贴图，因为有Sss贴图，他的R通道用处不太明显，而G通道用处也不明显，可能只是增加一点局部的微小细节，可以忽略，最重要的是BA两个通道，B通道是高光贴图，A通道是内轮廓线也就是内部描边有类似AO的感觉，当然他有粗细变化，这是采用了中村式线的UV展开方式，所有块都是方方正正的，这种UV展开方式太过麻烦，不推荐学习，崩三也舍弃了这种方法。

那么总结一下，将上面的贴图简化一下，崩三效果明显的贴图是颜色贴图，和LightMap的RB通道。《GUILTY GEAR Xrd-SIGN-》效果明显的贴图是颜色贴图，Sss贴图，ILM贴图的BA通道。

下面我们就来看看崩三的卡通材质算法部分，以Unity2017版本为例：

1、轮廓线的产生

    

2、表面材质部分

 

代码并不复杂，当然是做了简化去掉了效果不太好的G通道，用了一个条件语句来处理皮肤和非皮肤处的阴影效果。

Game视图中是加了后处理效果的，未加之前如下：

Maya2017中的实现方式是通过shaderfx的节点方式实现的，节点网络图，3ds Max2017的shaderfx同理,不过并没有表现轮廓线，轮廓线是用maya自带的Toon Outline表现的，如下：

Maya中效果如下：

2、优化方向

崩三LightMap的R通道中，区分皮肤和非皮肤就可以，黑白最好，如果有其它特别的要求可以额外增加，对于G通道感觉不是很好用，效果不是很好，所以上面的算法没有用到G通道，如果要做这种类型的贴图不适合对比过大，而且崩三的身体部分和头部感觉不是一个色调，做的很粗糙。对于B通道高光的表现可以参照《GUILTY GEAR Xrd-SIGN-》的高光表现，有提升空间。

对于代码部分可以通过渐变映射的方向来制作卡通效果，类似官方的卡通材质

3、制作规范

1、明确贴图用途来制作遮罩贴图

2、合理利用贴图的RGBA通道的灰度值，来表现各种材质的遮罩，以便代码中将其分别处理。

3、对于卡通材质的大范围受光面，有两种方式处理比较碎的受光面，一种是通过绘制VertexColor（顶点颜色），然后通过代码去处理，也是算是材质处理方式，第二种是通过编辑法线的方式从而调整受光面，如下图

最后附上Uinty2017的shader

本人学识有限，难免有些理解不当或是疏漏的地方，敬请谅解，如果大家什么好的建议或是好的想法欢迎来一起探讨研究............

引用

[1] 【NPR】卡通渲染

[2] 西川善司[GUILTY GEAR Xrd -SIGN-]的[纯卡通动画的实时3D图形]前篇

[3]西川善司[GUILTY GEAR Xrd -SIGN-]的[纯卡通动画的实时3D图形]后篇

[4] Cel Shading - Wikipedia