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

一、本篇文章分为三部分

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 


猜你喜欢

转载自blog.csdn.net/goodboystrong/article/details/79994666