最新帮助摇奖举报
开启辅助访问

QQ登录

注册 找回密码
查看: 2554
回复: 114

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

 

元素500强

元素币:NO. 232 名

发帖:暂未上榜

在线:暂未上榜

4万

元素币

2442

活跃度

17

贡献值

元素神

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

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

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

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

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

尊敬的游客 ,本内容需要支付 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

评分

参与人数 5元素币 +61 活跃度 +107 收起 理由
元素界王 + 55 + 55
子桐 + 17 干货满满
Aimetu + 3 + 10 比我的分析更近一步,厉害!
林夕Ker + 15 厉害!学习了
Maxxie6418 + 3 + 10 感谢楼主的技术贴,已经关注了公众号,希望多多分享~感谢

查看全部评分

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

使用道具 举报

3324

元素币

1111

活跃度

4

贡献值

元素王

狠深Out

Rank: 3Rank: 3Rank: 3

积分
20397
主题
3
精华
0
扩散
7
首发
0
土豪金
401
在线时间
368 小时
发表于 2018-4-4 00:13:03
GGXrd赛璐珞卡通渲染风格实现分析学习-罪恶装备
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

2242

元素币

1418

活跃度

2

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
6514
主题
2
精华
0
扩散
0
首发
0
土豪金
92
在线时间
56 小时
发表于 2018-4-4 01:48:06
666666666666
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

1014

元素币

861

活跃度

0

贡献值

元素魔

Rank: 2Rank: 2

积分
4316
主题
0
精华
0
扩散
0
首发
0
土豪金
71
在线时间
53 小时
发表于 2018-4-4 02:52:51
元素帖子强,满满正能量!
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

670

元素币

984

活跃度

3

贡献值

元素魔

Rank: 2Rank: 2

积分
3709

短杖学徒法袍

主题
1
精华
0
扩散
0
首发
0
土豪金
65
在线时间
41 小时
发表于 2018-4-4 03:11:24
买不起路过看看。
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

56

元素币

937

活跃度

0

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
5979

短杖学徒法袍

主题
0
精华
0
扩散
0
首发
0
土豪金
83
在线时间
135 小时
发表于 2018-4-4 03:35:56
谢谢分享
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

930

元素币

406

活跃度

3

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
17227

学徒法袍

主题
1
精华
0
扩散
0
首发
0
土豪金
318
在线时间
401 小时
发表于 2018-4-4 05:39:06
想要成大触,天天上元素!
我们先定一个能达到的小目标,先赚它一个元素币
回复

使用道具 举报

324

元素币

609

活跃度

0

贡献值

元素魔

Rank: 2Rank: 2

积分
3741
主题
2
精华
0
扩散
0
首发
0
土豪金
79
在线时间
60 小时
发表于 2018-4-4 06:31:51
支持一下
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

930

元素币

406

活跃度

3

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
17227

学徒法袍

主题
1
精华
0
扩散
0
首发
0
土豪金
318
在线时间
401 小时
发表于 2018-4-4 07:05:47
非常棒
我们先定一个能达到的小目标,先赚它一个元素币
回复

使用道具 举报

455

元素币

1154

活跃度

15

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
17812

元素之钻

主题
6
精华
0
扩散
0
首发
0
土豪金
994
在线时间
134 小时
发表于 2018-4-4 08:16:43
66666666666666666666
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

元素500强

元素币:暂未上榜

发帖:NO. 50 名

在线:暂未上榜

3512

元素币

2919

活跃度

58

贡献值

元素王

小战士

Rank: 3Rank: 3Rank: 3

积分
18415

长剑铁剑钢剑元素铜币散夜对剑格林机关炮元素巨无霸守望者【猎空】元素银币

主题
196
精华
0
扩散
0
首发
0
土豪金
52
在线时间
173 小时
QQ
发表于 2018-4-4 08:24:46

慢慢来
回复

使用道具 举报

1905

元素币

2430

活跃度

0

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
17445

学徒法袍

主题
1
精华
0
扩散
0
首发
0
土豪金
260
在线时间
332 小时
发表于 2018-4-4 08:27:02
天一早上元素,挖矿撩妹两不误!
啊啊啊啊啊啊啊啊啊啊
回复

使用道具 举报

2722

元素币

1699

活跃度

1

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
10702

短杖

主题
1
精华
0
扩散
71
首发
0
土豪金
183
在线时间
135 小时
QQ
发表于 2018-4-4 08:40:36
哇哇哇
回复

使用道具 举报

21

元素币

635

活跃度

1

贡献值

元素魔

Rank: 2Rank: 2

积分
3565
主题
0
精华
0
扩散
0
首发
0
土豪金
72
在线时间
68 小时
发表于 2018-4-4 08:44:41
实打实大苏打撒大苏打
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

305

元素币

1039

活跃度

6

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
7050

短杖

主题
6
精华
0
扩散
0
首发
0
土豪金
263
在线时间
78 小时
发表于 2018-4-4 08:55:30
这个还行
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

1503

元素币

1017

活跃度

4

贡献值

元素魔

Rank: 2Rank: 2

积分
4160

短杖学徒法袍

主题
1
精华
0
扩散
0
首发
0
土豪金
10
在线时间
49 小时
发表于 2018-4-4 08:57:57
赞一个
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

1673

元素币

1015

活跃度

1

贡献值

元素魔

Rank: 2Rank: 2

积分
4511
主题
0
精华
0
扩散
0
首发
0
土豪金
14
在线时间
55 小时
发表于 2018-4-4 09:02:08

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

使用道具 举报

9568

元素币

6167

活跃度

92

贡献值

元素皇

Rank: 4Rank: 4Rank: 4Rank: 4

积分
31195
主题
1
精华
0
扩散
0
首发
0
土豪金
5
在线时间
497 小时
发表于 2018-4-4 09:16:28
不错,多谢分享
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

177

元素币

542

活跃度

0

贡献值

元素魔

Rank: 2Rank: 2

积分
3682
主题
0
精华
0
扩散
1
首发
0
土豪金
42
在线时间
83 小时
发表于 2018-4-4 09:24:30
学习了,作为美术确实一脸蒙蔽
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

1482

元素币

1033

活跃度

0

贡献值

元素王

Rank: 3Rank: 3Rank: 3

积分
6127

短杖

主题
1
精华
0
扩散
0
首发
0
土豪金
6
在线时间
119 小时
发表于 2018-4-4 09:26:49
666666666666666
还没有设置签名!您可以在此展示你的链接,或者个人主页!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

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

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