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

工程下载地址：

价格：1000 元素币 百度网盘 收益：125000元素币 销量：125

尊敬的游客 ,本内容需要支付后可见.
您可以[充值][发帖] [悬赏] [任务]来赚取积分。

元素币支付微金支付余额支付

提醒使用【余额支付】需要： ￥100 余额

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

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




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. 模型：

更多精彩图片 请登录

可以看到，仅一个角色模型面数高大3.4W，由于本次分享不涉及人物其他用于制造Shadow和Glow的模型，以及武器模型，仅使用这些模型即可。面数之所以这么高的原因前面也提到了，是为了特写镜头，人物的细节能更好地表现。同时，每个顶点数据之间是进行线性插值的，有利于最终细节的效果。b. 贴图：

更多精彩图片 请登录

每个角色一共有三张贴图，BaseTex 基本的颜色贴图， SSSTex 是ASW组内的叫法（SubSurface Scattering ），用于模拟次表面散射颜色效果，ILMTex 用于控制照明的贴图。这些贴图看起来似乎和我们平时看到的贴图不太一样，后面会详细介绍。2、实现核心    赛璐珞风格的特点是，明暗分界明显，非明即暗，没有中间的过度。所以我们很容易想到一种实现方法，就是step函数（注：step(a,b)，当a小于b时，返回0，否则返回1），step ( Threshold , dot ( Light , Normal ) )  这句代码就能满足上面的需求了，只要控制 Threshold、Light、Normal  这三个参数即可。1、控制ThresholdThreshold 其实就是用来控制哪些地方倾向于是暗部，哪些地方应该是亮部，主要通过两个参数控制：顶点颜色的R通道，下图可以看到它们的影响作用：

更多精彩图片 请登录

注：网上获取的模型并没有顶点颜色的信息，所有的顶点颜色均是我自己修改的，目的是为了演示其作用，效果不好还请见谅。    这两个参数再配合一个外部输入的变量_ShadowContrast，就实现了对Threshold的控制：     代码如下：

更多精彩图片 请登录

2、控制Light    GGXrd中每一个角色有不同的灯光方向，甚至每一帧动画的灯光方向都不同，目的是为了达到最好的效果。这个实现起来很简单，就是每帧调整这个事情比较麻烦，不过ASW他们为了效果，这种事情根本不在乎！

更多精彩图片 请登录

不过在Unity中使用这种方法不是很直观，不方便调整，虽然可以写代码控制，但是还是用Unity自带的比较方便。3、控制Normal    当模型面数非常多的时候，那么顶点法线信息也就非常多，如果直接使用的话，就会有很复杂的明暗变化，而这点又和2D效果有很大的差别，所以ASW决定手动调整和控制模型法线。    他们调整和控制法线的方法是使用Softimage工具，鉴于这个工具国内并不流行，而且2015年Autodesk宣布不再维护更新，这里给大家提供两种调整的方法：    a. 普通的调整可以使用 3DMax 里的 "编辑法线" 的修改器

更多精彩图片 请登录

更多精彩图片 请登录

b.参考文档[1]中还提到了另一种映射法线的做法

更多精彩图片 请登录

这个可以使用Maya中的 “传递属性” 来实现，传递设置如下：

更多精彩图片 请登录

两个物体，一个是被传递的物体（下图中的球体），一个是用于传递的物体（下图中的圆柱体）

更多精彩图片 请登录

被传递物体的被包裹，首先选择传递的物体（圆柱体），按住shift 加选被传递的物体（球体），然后执行传递属性的命令：

更多精彩图片 请登录

调整效果对比：

更多精彩图片 请登录

通过这两种方法对法线进行控制和调整，好处是最终的明暗阴影会呈大面积分布，不会有很细碎的阴影，画面会非常整洁。缺点是：面数很多的情况下，调整起来并不容易，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通道控制，为了说明问题，我将效果放大十倍之后的结果，注意右手和左肩的外轮廓线的粗细变化：

更多精彩图片 请登录

B通道，轮廓线在摄像机空间的Z深度值，目的是为了避免出现一些不想要的锯齿轮廓线，主要处理头发和鼻子下面不想要的锯齿轮廓线：

更多精彩图片 请登录

实现方法是，将摄像机空间的顶点沿着从摄像机到顶点位置的方向（即，normalize(viewPos.xyz)）偏移。    A通道，很容易理解主要用于处理轮廓线的粗细。注意下图的脸颊和下巴处轮廓线的区别。

更多精彩图片 请登录

具体实现代码：

更多精彩图片 请登录

关于顶点颜色的绘制，我是直接在Max中使用 “顶点颜色绘制” 的修改器来绘制的，可能有些不太直观，文末的下载中，我会附上两个在Unity 绘制顶点颜色的工具，大家可以自行尝试使用。2、内部线    外轮廓的线是可以通过 “Inverted Hull” 来处理，但是模型内部的线就只能手绘上去了，同样是为了分辨率和特写镜头的问题，内部的线也必须保证在很近的距离时也保持清晰，ASW的实现方法是将，UV横平竖直地分割，将需要划线的地方全都分开，这种UV分割的方式称为“本村式线”，内部线是画在ilmTex的A通道上的：

更多精彩图片 请登录

为什么要这么做呢，当显示的像素大于纹素的大小时，就会产生锯齿，如果周围的纹素是不同的颜色就会出现很明显的锯齿，一般的抗锯齿处理方法是多重采样，根据实际线占每个像素格的大小比例进行灰度插值处理。如下图所示

更多精彩图片 请登录

（白色的线是实际的线，红点是每个像素的中心，青色的点是多重采样的位置，判断每个像素中有多少个青色的点在三角形内部，从而以0%，25%，50%，75%，100%四个数值进行两侧颜色插值计算，图片来自文档[3]）    如果线是横平竖直的，那么线之间的锯齿就会明显减少。这样就算放到很近也很难有锯齿感，如果再加上纹理的Bilinear或Trilinear的过滤模式，效果则更好。然后通过UV的轻微调整来达到线的粗细效果。

更多精彩图片 请登录

这种做法的弊端是，不能在贴图上绘制任何细节，会出现拉伸，所以在人物身上的字或者标志，他们都是用单独的面和单独的贴图+材质球实现的。    美术同学看到这里一定有点懵，我建议手动实践一下，你才能真正理解，给我的直观感受，这种效果，有点像手绘贴图每个UV区域在铺底色时没有把边缘扩展几个像素出现的问题。    最终的线的效果：

更多精彩图片 请登录

（图片来自文档[2]）    这里的sssTex其实并不是次表面散射的贴图效果，而是用来表示 “这个材质有多少光透过” ，这张图是以正片叠底的方式叠加在原贴图上的，那么这张图越亮，结果就越接近原图效果，叠上去最终的效果就是暗部颜色效果，亮部就是原贴图的效果，所以最终的效果就是：

更多精彩图片 请登录

5、高光    高光效果，采用的是依赖视线的手绘高光效果，跟ILMTex的R和B通道有关系：

更多精彩图片 请登录

        R通道是光泽度，B通道是高光强度，使用的是Blinn-Phong的计算高光的方法。同样为了得到明显的过度边界，需要加上step函数，就有下面的实现：

更多精彩图片 请登录

这一部分的内容在GGXrd相关的文章中并没有明确提及，Unite2017 Tokyo上有相关的实现介绍，我就拿来用了，感觉效果还不错：

更多精彩图片 请登录

6、环境光和灯光    最后再加上环境光颜色和灯光颜色的影响：

更多精彩图片 请登录

不过在上面展示的效果中灯光的颜色为纯白，我也没有开启环境光，所以这一部分就看不到效果。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

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

666666666666

元素帖子强，满满正能量！

买不起路过看看。

谢谢分享

想要成大触，天天上元素！

支持一下

非常棒

66666666666666666666

赞

天一早上元素，挖矿撩妹两不误！

哇哇哇

实打实大苏打撒大苏打

这个还行

赞一个

赞一个

不错，多谢分享

学习了，作为美术确实一脸蒙蔽

666666666666666