开启辅助访问

QQ登录

注册 找回密码
查看: 7058
回复: 178

GGXrd赛璐珞卡通渲染风格实现分析学习-罪恶装备

 

元素500强

元素币:NO. 169 名

发帖:暂未上榜

在线:暂未上榜

7万

元素币

3072

活跃度

18

贡献值

元素神

Rank: 5Rank: 5Rank: 5Rank: 5Rank: 5

积分
149939
主题
6
精华
2
扩散
0
首发
0
土豪金
5021
在线时间
269 小时
发表于 2018-4-3 23:29:42

马上注册成为元素者,获取海量元素资源,结识各路大神级人物

您需要 登录 才可以下载或查看,没有帐号?注册

x
工程下载地址:
价格:1000元素币 销售总额:44000元素币 购买人数:44

尊敬的游客 ,本内容需要支付 1000元素币 来下载,您可以 【充值】或者 【发帖】。也可使用【元素性扩散】获取 同等点击次数 ,来轻松下载。



之前有大佬,发过一篇对GGXr渲染的分析,点这里,这种卡通的效果很不错,我也在Unity中研究实现了一下,工程案例和Shader都在上面的链接可以下载,下面是分析实现的过程。
以下内容,首发于我的微信公众号,欢迎关注~
关注微信公众号,获取更多内容_512.jpg

GGXrd赛璐珞卡通渲染风格实现分析学习
声明:
​        1、要实现GGXrd的赛璐珞卡通渲染,并不是一个Shader或者屏幕后期就可以解决的,而是从建模到动画再到引擎中实现的一整套的美术制作流程的结果。本文的重点在于引擎中渲染效果的实现思路,而非探讨整个美术制作流程并完全还原GGXrd的效果;
​        2、以下所有效果使用的是Unity 2017.3.1f1版本实现;
​        3、模型和贴图来自互联网,我自己手动调整一部分内容,如有侵权,联系删除;
1、效果预览 SOL.gif


2、背景介绍
​        1、赛璐珞和赛璐璐都是音译 Celluloid,指的是一种合成树脂,是商业上最早生产的合成塑料。早期制作动画的时候,美国开始使用以赛璐珞制作的透明胶片,人物花在胶片上,背景画在纸上,拖动胶片层就能达到任务在背景上移动的效果。日本动画开始起步的时候就是采用这种做法,使用赛璐珞制作的动画也叫做 赛璐珞动画 ,很长一段时间,赛璐珞动画一直是手绘动画的代名词。这里赛璐珞卡通渲染风格指的就是手绘动画的渲染风格;
​        2、《GUILTY GEAR Xrd -SIGN-》是老牌格斗游戏 GuiltyGear 的3D版,使用游戏引擎为 Unreal Engine 3,2013年5月发售,开发和发行厂商均为Arc System Works(以下简称ASW),ASW同时也是该系列的拥有者,2D经典格斗游戏《苍翼默示录》也出自他们之手。ASW拥有丰厚的2D格斗游戏的制作经验,因此在这款3D的游戏时,他们的原则是游戏效果上尽可能地还原了2D的风格;
3、问题
​        在制作GGXrd时,ASW遇到的问题和相应的解决方案:
​        1、如何让3D渲染更像2D手绘效果?
​        尽可能地处理和避免任何看起来像3D的效果。使用数学方法进行的3D渲染着色,大多数情况都是为了“正确”的目的,在PBR中,“正确”性确实很重要,只有这样才能真正还原现实,但是在NPR中,或者说在游戏中,仅仅“正确”是不足的,游戏是一个艺术品,让艺术家去主导,往往比数学家和科学家更容易取得成功。ASW在应对这个问题时,选择了很笨的,确实很有效的办法,就是所有在游戏中出现的画面都是经过艺术家故意的调整,而非依赖数学公式的计算。
​        实现这种方法的关键在于“所见即所得”,即艺术家在制作的过程中,调整依赖于的效果就是游戏中最后看到的效果。听起来似乎很容易,但是并不是这样,在制作过程中,总是会有各种各样的问题,不同的游戏平台,不同的软件渲染,不同的显示器的结果,不同的显卡渲染差异都会造成不一致性,有时候解决这种不一致性是令人很头疼的事情。
​        幸运的是,ASW并没有这种烦恼,EPIC 的 Unreal Engine 3 和  Autodesk 的 Softimage (2015年停止更新) 起到很重要的作用。
​        2、游戏中有大量的特写镜头,如何保证分辨率?
​        在特写镜头下,一些图形学中常用的Trick就不起作用了,例如法线贴图。放大的时候,渲染的结果受限于图像的分辨率。ASW试了很多种解决方案,例如矢量图和超高分辨率的贴图。他们认为这种赛璐珞的渲染风格渲染的可行性更高,实现方案是使用高面数的模型(每个角色40000三角面左右)和顶点颜色(特点是顶点颜色之间是进行线性插值处理)来代替高分辨率贴图来保证游戏效果,会在下文中具体介绍。
​        3、3D动画比起2D动画更加流畅,如何处理让动画效果更接近2D风格?
​        在最近几年出现了很多3D渲染的动漫,例如《亚人》,这种效果有些人喜欢,也有些人不能接受。这些动漫出于效率的考虑,大多使用的是类似动作捕捉+手动调整的动画制作方式。但是结果是这种太“3D”了,太真实导致它并不像是2D手绘的,为了解决这个问题,ASW同样适用了简单粗暴的解决方案。
​        a. 每个角色400~600,所有有角色特征的部分,都可以进行任意的移动、旋转、缩放、压扁或拉伸。
​        b. 手动K帧,每一个关键帧都是动画师手动制作的,而且故意去掉3D动画中的插值处理,感觉动画结果是不连续的。
​        这一部分的内容,不在本次文章的讨论范围之内,有兴趣的读者可自行研究。
​        4、如此费尽心思地使用3D来模拟2D,为何不直接使用2D来制作呢?
​        一个原因是,3D的场景是动态可以旋转摄像机的,如同上面展示图一样,旋转摄像机所带来的镜头效果和视觉冲击力是2D不能实现的。
​        另一个很重要的原因是,ASW之前做的《苍翼默示录》就是采用2D的方法制作的,他们不能再制作一款一样的格斗游戏来和自己竞争,需要做一些创新和突破来吸引更多的玩家(这一点确实令人敬佩,国内的开发厂商如果能用这样的精神就太好了!)。
4、Unity实现1、准备好数据:
a. 模型: Model.jpg
可以看到,仅一个角色模型面数高大3.4W,由于本次分享不涉及人物其他用于制造Shadow和Glow的模型,以及武器模型,仅使用这些模型即可。
面数之所以这么高的原因前面也提到了,是为了特写镜头,人物的细节能更好地表现。同时,每个顶点数据之间是进行线性插值的,有利于最终细节的效果。
b. 贴图: SOL_Textures.jpg
每个角色一共有三张贴图,BaseTex 基本的颜色贴图, SSSTex 是ASW组内的叫法(SubSurface Scattering ),用于模拟次表面散射颜色效果,ILMTex 用于控制照明的贴图。这些贴图看起来似乎和我们平时看到的贴图不太一样,后面会详细介绍。
2、实现核心
​        赛璐珞风格的特点是,明暗分界明显,非明即暗,没有中间的过度。所以我们很容易想到一种实现方法,就是step函数(注:step(a,b),当a小于b时,返回0,否则返回1),step ( Threshold , dot ( Light , Normal ) )  这句代码就能满足上面的需求了,只要控制 Threshold、Light、Normal  这三个参数即可。
1、控制Threshold
Threshold 其实就是用来控制哪些地方倾向于是暗部,哪些地方应该是亮部,主要通过两个参数控制:顶点颜色的R通道,下图可以看到它们的影响作用: 1522578383386.jpg
注:网上获取的模型并没有顶点颜色的信息,所有的顶点颜色均是我自己修改的,目的是为了演示其作用,效果不好还请见谅。
​        这两个参数再配合一个外部输入的变量_ShadowContrast,就实现了对Threshold的控制:
​         代码如下: Code1.jpg
2、控制Light
​        GGXrd中每一个角色有不同的灯光方向,甚至每一帧动画的灯光方向都不同,目的是为了达到最好的效果。这个实现起来很简单,就是每帧调整这个事情比较麻烦,不过ASW他们为了效果,这种事情根本不在乎! Code2.jpg
不过在Unity中使用这种方法不是很直观,不方便调整,虽然可以写代码控制,但是还是用Unity自带的比较方便。
3、控制Normal
​        当模型面数非常多的时候,那么顶点法线信息也就非常多,如果直接使用的话,就会有很复杂的明暗变化,而这点又和2D效果有很大的差别,所以ASW决定手动调整和控制模型法线。
​        他们调整和控制法线的方法是使用Softimage工具,鉴于这个工具国内并不流行,而且2015年Autodesk宣布不再维护更新,这里给大家提供两种调整的方法:
​        a. 普通的调整可以使用 3DMax 里的 "编辑法线" 的修改器 201841-193300.jpg 201841-193348.jpg b.参考文档[1]中还提到了另一种映射法线的做法 061256170462276.jpg 这个可以使用Maya中的 “传递属性” 来实现,传递设置如下: 201841-173506.jpg 两个物体,一个是被传递的物体(下图中的球体),一个是用于传递的物体(下图中的圆柱体) 微信图片_20180401173528.png 被传递物体的被包裹,首先选择传递的物体(圆柱体),按住shift 加选被传递的物体(球体),然后执行传递属性的命令: 微信图片_20180401173539.png 调整效果对比: 201841-195045.jpg
通过这两种方法对法线进行控制和调整,好处是最终的明暗阴影会呈大面积分布,不会有很细碎的阴影,画面会非常整洁。缺点是:面数很多的情况下,调整起来并不容易,ASW使用的是Softimage中的一个插件来处理,我对Softimage 并不是很了解,所以只想到这两种处理方案,如果大家有更好的解决方案,欢迎在下方留言~
3、卡通渲染中的线条
​        提到卡通渲染,肯定离不开对线条的处理,之前的文章中有提到两种画漫画时使用的网点和影线的渲染效果,感兴趣可以再了解一下。不过这里用不上,这里主要是有两种线需要进行处理:1、外轮廓线;2、内部线;
1、外轮廓线
​        通常实现外轮廓线的方案有两种:“Inverted Hull” 倒壳法,膨胀模型顶点,剔除正面,输出纯色的方法 和 “Post Effect”  后处理法,屏幕后期处理,采样边缘检测的卷积核判断边缘进行处理的方法;ASW选择了前者,因为便于控制和“所见即所得”的原因。
​        传统的方法是,沿着法线方向膨胀模型顶点,然后输出一个纯色,后面再绘制一次正常顶点位置的模型,来覆盖之前中间的位置,这样就有一圈外轮廓的描边了。在此传统的实现方法的基础上,ASW添加了一些新的技巧,采用顶点颜色的GBA通道来进一步控制,外轮廓的描边,具体作用如下:
​        G:轮廓线根据 到Camera的距离膨胀的系数。
​        B:轮廓线的Z Offset 值。
​        A:轮廓线的粗细系数。0.5是标准,1是最粗,0的话就没有轮廓线。
​        G通道,随着摄像机距离的变化,描边的效果需要进行变化,摄像机过远的话,需要调整外轮廓的粗细,每个部位随着摄像机变化的系数就是通过G通道控制,为了说明问题,我将效果放大十倍之后的结果,注意右手和左肩的外轮廓线的粗细变化: SOL_CameraDepth.gif B通道,轮廓线在摄像机空间的Z深度值,目的是为了避免出现一些不想要的锯齿轮廓线,主要处理头发和鼻子下面不想要的锯齿轮廓线: 201841-202428.jpg
实现方法是,将摄像机空间的顶点沿着从摄像机到顶点位置的方向(即,normalize(viewPos.xyz))偏移。
​        A通道,很容易理解主要用于处理轮廓线的粗细。注意下图的脸颊和下巴处轮廓线的区别。 1522585874743.png 具体实现代码: Code3.jpg
关于顶点颜色的绘制,我是直接在Max中使用 “顶点颜色绘制” 的修改器来绘制的,可能有些不太直观,文末的下载中,我会附上两个在Unity 绘制顶点颜色的工具,大家可以自行尝试使用。
2、内部线
​        外轮廓的线是可以通过 “Inverted Hull” 来处理,但是模型内部的线就只能手绘上去了,同样是为了分辨率和特写镜头的问题,内部的线也必须保证在很近的距离时也保持清晰,ASW的实现方法是将,UV横平竖直地分割,将需要划线的地方全都分开,这种UV分割的方式称为“本村式线”,内部线是画在ilmTex的A通道上的: SOL_ilm1.jpg
为什么要这么做呢,当显示的像素大于纹素的大小时,就会产生锯齿,如果周围的纹素是不同的颜色就会出现很明显的锯齿,一般的抗锯齿处理方法是多重采样,根据实际线占每个像素格的大小比例进行灰度插值处理。如下图所示
8x8pixelgrid_triangle_rasterized_4xAA.png
(白色的线是实际的线,红点是每个像素的中心,青色的点是多重采样的位置,判断每个像素中有多少个青色的点在三角形内部,从而以0%,25%,50%,75%,100%四个数值进行两侧颜色插值计算,图片来自文档[3])
​        如果线是横平竖直的,那么线之间的锯齿就会明显减少。这样就算放到很近也很难有锯齿感,如果再加上纹理的Bilinear或Trilinear的过滤模式,效果则更好。然后通过UV的轻微调整来达到线的粗细效果。 061322555461059.jpg
这种做法的弊端是,不能在贴图上绘制任何细节,会出现拉伸,所以在人物身上的字或者标志,他们都是用单独的面和单独的贴图+材质球实现的。
​        美术同学看到这里一定有点懵,我建议手动实践一下,你才能真正理解,给我的直观感受,这种效果,有点像手绘贴图每个UV区域在铺底色时没有把边缘扩展几个像素出现的问题。
​        最终的线的效果: 201841-203655.jpg
(图片来自文档[2])
​        这里的sssTex其实并不是次表面散射的贴图效果,而是用来表示 “这个材质有多少光透过” ,这张图是以正片叠底的方式叠加在原贴图上的,那么这张图越亮,结果就越接近原图效果,叠上去最终的效果就是暗部颜色效果,亮部就是原贴图的效果,所以最终的效果就是: Code4.jpg
5、高光
​        高光效果,采用的是依赖视线的手绘高光效果,跟ILMTex的R和B通道有关系: 201841-220051.jpg         R通道是光泽度,B通道是高光强度,使用的是Blinn-Phong的计算高光的方法。同样为了得到明显的过度边界,需要加上step函数,就有下面的实现: Code4.5.jpg 这一部分的内容在GGXrd相关的文章中并没有明确提及,Unite2017 Tokyo上有相关的实现介绍,我就拿来用了,感觉效果还不错: 134144lpqqs4qdruxtqtbu.jpg
6、环境光和灯光
​        最后再加上环境光颜色和灯光颜色的影响: Code5.jpg
不过在上面展示的效果中灯光的颜色为纯白,我也没有开启环境光,所以这一部分就看不到效果。
7、总结
​        除了上面这些效果之外,GGXrd还使用很多屏幕后期来让画面更加"2D",这一次我并没有实现,后面专门用一篇文章来介绍各种常用的屏幕后期效果。
​        通过对GGXrd效果的学习,对我最大的启发不是 “这种卡通渲染效果是如何实现的?”,而是他们在做NPR效果时的理念:以还原“2D”效果为原则和标准进行渲染效果的研究,以及敢于打破常规的勇气!
​        近几年日本游戏很多卡通渲染效果越来越好,去年的《塞尔达传说:旷野之息》就证明了这一点。但是NPR不止有“立绘”这一个方向,期待我们的 “国风” 效果的NPR也能发展起来,一定能带来不一样的游戏体验,让更多人可以感受到这种东方艺术之美!
参考目录:
[1]【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密 前篇: http://www.cnblogs.com/TracePlus/p/4205798.html 中篇: http://www.cnblogs.com/TracePlus/p/4205834.html  后篇: http://www.cnblogs.com/TracePlus/p/4205978.html
[2] GDC : GuiltyGear Xrd`s Art Style : The X Factor Between 2D and 3D  http://www.gdcvault.com/play/1022031/GuiltyGearXrd-s-Art-Style-The
[3] Diving into Anti-Aliasing  http://www.beyond3d.com/content/articles/122





133527t6mm6zbmeyr9ei99.jpg
201841-214629.jpg
1522591992655.png
061256065002098.jpg
ILM_G.jpg
tittle.jpg
Vertex_R.jpg

评分

参与人数 6元素币 +91 活跃度 +137 贡献值 +1 收起 理由
沐语橙枫 + 20 + 30 + 1 学习了!
元素界王 + 65 + 55 牛B!
子桐 + 17 干货满满
Aimetu + 3 + 10 比我的分析更近一步,厉害!
林夕Ker + 15 厉害!学习了
Maxxie6418 + 3 + 10 感谢楼主的技术贴,已经关注了公众号,希望多多分享~感谢

查看全部评分

本帖被以下画板推荐:

还没有设置签名!您可以在此展示你的链接,或者个人主页!

使用道具 举报

回复 论坛版权
GGXrd赛璐珞卡通渲染风格实现分析学习-罪恶装备

使用道具 举报

回复
666666666666

使用道具 举报

回复
元素帖子强,满满正能量!

使用道具 举报

回复
买不起路过看看。

使用道具 举报

回复
谢谢分享

使用道具 举报

回复
想要成大触,天天上元素!

使用道具 举报

回复
支持一下

使用道具 举报

回复
非常棒

使用道具 举报

回复
66666666666666666666

使用道具 举报

回复

使用道具 举报

回复
天一早上元素,挖矿撩妹两不误!

使用道具 举报

回复
哇哇哇

使用道具 举报

回复
实打实大苏打撒大苏打

使用道具 举报

回复
这个还行

使用道具 举报

回复
赞一个

使用道具 举报

回复

赞一个

使用道具 举报

回复
不错,多谢分享

使用道具 举报

回复
学习了,作为美术确实一脸蒙蔽

使用道具 举报

回复
666666666666666

使用道具 举报

回复
66666666666666666666666666

使用道具 举报

回复
kankan

使用道具 举报

回复
赞一个~666

使用道具 举报

回复
666

使用道具 举报

回复

使用道具 举报

回复
GGXrd赛璐珞卡通渲染风格实现分析学习-罪恶装备

使用道具 举报

回复
GGXrd赛璐珞卡通渲染风格实现分析学习-罪恶装备

使用道具 举报

回复
66666666666666

使用道具 举报

回复

使用道具 举报

回复
高人,写的很辛苦。确实给了些启发

使用道具 举报

回复
很不错,感谢楼主的分享!!!

使用道具 举报

回复
谢谢大大的分享   有技术含量的好帖

使用道具 举报

回复
不错不错

使用道具 举报

回复
好厉害的技术贴

使用道具 举报

回复

使用道具 举报

回复
技术贴,给大佬跪了。

使用道具 举报

回复
厉害厉害不错的东西

使用道具 举报

回复
66666666666

使用道具 举报

回复

使用道具 举报

回复
十分感谢分享!

使用道具 举报

回复
12345下一页
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

元素推荐-友情提示上一条 /1 下一条

快速回复 返回顶部 返回列表