从《罪恶装备Xrd》看卡通渲染游戏中使用的技术——《角色渲染篇》

从《罪恶装备Xrd》看卡通渲染游戏中使用的技术——《角色渲染篇》

前言

《罪恶装备》系列是由Arc System Works开发的格斗游戏。最早于1998年发行,在这之后一直是传统的横板2D格斗的方式。直至2015年《罪恶装备Xrd -SIGN-》这一部开始进行3D化,以横空出世、独特的三渲二远近闻名 [1] 。基本上可以说是三渲二的顶峰。

Arc桑,你好强大!

本文属于总结性质的文章。虽然内容都来自网上能够找到的分享(包括官方、非官方的),但是在这中间会进行适当的扩展延申。内容大致包含以下方面:

  1. 角色渲染
  2. 特效制作
  3. 关于场景和过程动画
  4. 其他等

不过出于篇幅的原因,本文先介绍角色渲染的部分、后面的会慢慢填坑。


其他备注:

  • 内容包括《罪恶装备Xrd -SIGN-》 [2] [3] [4] [5] [6] [7] 与《罪恶装备Xrd -Revelator-》 [8] [9]
  • SIGN由UE3开发 [1] 、Revelator应该也是(因为是在SIGN基础上制作的)
  • 关于Cel Shading(赛璐璐上色),是一种常见的三渲二渲染方式
  • 文章不全是分享的原内容、会夹带私货(指其他游戏的分享和个人理解)。如果有疑问或错误的地方,欢迎讨论!



基本渲染

场景总面数为80万面。具体地,两个角色加起来25万,背景约55万。


Diffuse/ SSS/ AO

Diffuse方面,判断明暗上采用的是Cel Shading经典的二分法。简单来说就是判断法线N与光线V的点乘结果是否超过某个阈值、如果是则为明面(涂上BaseColor)、否则则是暗面(涂上ShadowColor)。并且根据放出的材质截图来看,采用的还是半条命中经典的half lambert计算公式 [10]

示意数学公式如下:
NdotL = dot( N, L ) * 0.5 + 0.5\\ IsShadow = step( NdotL, 0.5 )\\ Diffuse = LightColor * lerp( ShadowColor, BaseColor, IsShadow )

其中BaseColor通过采样纹理贴图得到,ShadowColor则是通过计算得出来的。最简单的ShadowColor可以是通过BaseColor乘以一个恒定的系数得到,但实际上根据部位、以及所处环境的不同,ShadowColor应该是不一样的。为了达到这个效果,《罪恶装备》引入了一张(内部称作)SSS Texture(SubSurface Scattering,次表面散射,常用以渲染皮肤、佩玉等材质)的贴图。

分享里举的例子是日本动画制作现场中会有专门的色彩设计师“这个角色的这个部分、当阳光照射时,暗面的颜色应该是这样的”。

以角色AXL为例,左边的ShadowColor通过乘以恒定系数(的贴图)得到、右边的则乘算了一张SSS Texture。

另外为了让角色与环境更好的融合,《罪恶装备》还通过光源颜色(LightColor)和环境光颜色(SceneColor)来进一步对比BaseColor、ShadowColor。最终的BaseColor和ShadowColor的示意数学公式如下:

$$
BaseColor = BaseColor * LightColor\\ \\ SSSColor = SSSTexture.Sample(UV)\\ ShadowColor = BaseColor * SSSColor * SceneColor
$$


下图是角色Sol在调整LightColor(上)和SceneColor(下)得到的不同的渲染结果。

虽然叫做SSS Texture,但其实并不是真正的SSS效果(这个分享的人也有吐槽)。这张帖图更像是“当处于阴影时,这部分更容易变成什么颜色”的感觉,具体的制作规则是皮肤的SSSColor更偏向红色的感觉、衣服的SSSColor更偏向衣服洗掉色的感觉。


最后是AO(Ambient Occlusion,自遮掩)部分。正如名字所表示的一样,AO的目的是为了在Diffuse计算中加上环境的遮挡考虑,而不应该是单纯的NdotL。最显而易见的例子是脖子、袖子下的皮肤等部分。脖子下的AO在动画/漫画中尤其明显,基本上脖子都处于阴影当中。

《罪恶装备》的AO计算和上面判断明暗类似,当数值小于某个阈值时,则将该像素也当作暗面处理。示意数学公式如下:

$$
IsShadow = step(NdotL, 0.5)\ ||\ step( AO, 0.5 )\\
$$

这个AO的数值同样来自于贴图,内部称其为ilm Texture。其中AO存储在贴图的G通道中(RBA通道分别用在Specular、Outline上,后面讲到的时候再解释)。

需要补充的是关于AO这里,在分享1有一个模棱两可的点是先是说AO保存在顶点色R通道中、后面又说保存在ilm Texture的G通道中。看了几遍可以确定的是这里说的都是同一个东西(原文的比喻都是「陰となりやすい重みパラメータ」,即“容易变成阴影的参数”)。

还有一个补充点,上面的图可以看到脖子处在加上AO之后实际上有两种阴影颜色、一种是上面所说的ShadowColor、另外一种似乎是“更深”的ShadowColor。原文中并没有提到“更深”的ShadowColor是怎么产生的。个人猜测有可能实际上是“三分法”而不是二分法,即其实阈值除了0.5以外还有一档。当低于这个档次之后会乘上一个系数以得到更深的颜色。


  • 扩展1:《蓝色协议》中的ShadowColor计算

关于ShadowColor的计算,《蓝色协议》在CEDEC2021也有相关的分享 [11] 。与《罪恶装备》采用SSSTexture不同,《蓝色协议》是根据原来的BaseColor计算得出的:

具体的计算公式如下:

  1. 转换成HSV和Luminace:从BaseColor的RGB转换
  2. 计算新的H:判断原来的Hue处于R、YR、Y、GY、G、BG、B、PB、P、RP的哪一个,加上对应的值得到新的H
  3. 计算新的S:将0~255划为为8个等分区间,判断Luminance处于哪个区间,加上对应的值得到新的S
  4. 计算新的V:将0~255划为为8个等分区间,判断Luminance处于哪个区间,加上对应的值得到新的V

《蓝色协议》从BaseColor计算ShadowColor整体是一个修正的过程:通过RGB的Luminance来判断应该如何对Saturation(饱和度)、Value(明度)、Hue(色相)进行补正。Value的补正是为了压低颜色,并且如果Luminace本身就比较小、则压低的幅度也会下降。Saturation的补正则是为了防止画面变脏变浑浊,并且因为Luminace越低越难看出效果,所以饱和度增加的幅度需要跟着变大:

Hue的修正看起来是根据冷暖色划分的,例如BaseColor偏暖色系的阴影偏红、冷色系的阴影颜色偏蓝或偏紫。下图数值是Hue处于该区间时的修正值:

其实《蓝色协议》和《罪恶装备》在计算ShadowColor的思路是类似的,都是通过BaseColor->ShadowColor的映射,以得到风格化的带有SSS效果的阴影颜色。只是后者映射关系是SSS Texture、前者则是实时计算。


  • 扩展2:Ramp贴图代替step

前面二分法判断明暗用的是shader函数step。除此以外、由于从NdotL到明暗1/0是一个映射关系,因此可以使用一张一维贴图代替,此时采样贴图的坐标就是NdotL:

这样的贴图称为Ramp贴图。当然如果只是这样的话就太无趣了,毕竟现在的Ramp贴图仍然和原来的step结果一样。刊登于《2020 CGWORLD特别編集版》的《龙珠Z 卡卡罗特》分享中 [12] 就有提到他们在二分边缘中间加入了介于0~1的梯度值(階調,Gradient),以达到模糊二分边缘的画面感觉:

虽然龙珠Z的分享中没有明确提到做法,但是Ramp贴图确实能够做到这样的事情。下图是模糊边缘的示意Ramp图:

除了上面灰度图Ramp图以外,Ramp图还能制作成RGB的。RGB的Ramp图能够用来表示不同阴影程度下的透光程度,某种意义上也能够用来做假的SSS效果。示意RGB的Ramp图如下:

既然有一维的Ramp,自然就会有二维的Ramp贴图,2006年Barla等人发表的论文《X-Toon: An Extended Toon Shader》 [13] 就有提到相关的内容。其中y轴存储的信息是软硬的区分,采样依据是屏幕深度:距离摄像机越近边缘越硬、距离摄像机越远边缘越软(如下图所示)。

另外在米哈游的分享《移动端高品质卡通渲染的实现与优化方案》 [14] 也有提到他们使用的多通道、多张2DRamp贴图来渲染仿SSS效果的皮肤。其中y轴同样存储了软硬区分的信息,不过采样依据似乎与深度无关、是一个可以随时调整的数值:

左图是示意的计算Diffuse和Specular时使用的2DRamp图,可以发现米哈游计算高光时也采用了Ramp图。右边则是多张不同的Diffuse Ramp图叠加渲染的结果,能够做到仿SSS的效果


法线的处理

二分法虽然很能表现出赛璐璐的上色风格,但是这在常规制作的模型上并不完全能直接工作,原因就是二分法对模型的法线的要求比较高。如果直接用模型原来的法线的话,会因为step的原因、往往不能达到满意的二分效果:

为了得到满意的明暗效果(指类似低模那种大块的阴影,原文是低ポリゴンモデルのような大ざっぱな陰影),《罪恶装备》对脸部的法线进行了自定义的编辑。整体思路是将法线平面化。

而对于衣服或头发这些部分,使用的方法是将简单模型的法线映射到复杂模型上。以角色Sol的裤子为例,由于原模型褶皱等原因会有较为复杂的法线分布。为了得到希望的明暗效果,他们的做法是将简模的裤子模型的法线转移到了角色Sol裤子上。这个转移的过程借助的是Softimage2013中Gator的功能。

同理发型也是一个非常复杂的模型,直接渲染的话会得到凹凸不平的明暗效果。《罪恶装备》通过法线编辑+简模法线映射的方式,来达到他们所希望的表现效果。

这发型一看就很会打牌


  • 扩展1:不修改模型法线的方式

修改原模型法线的方式固然有效,但是一些情况仍然会需要使用到原来的模型法线。例如在《蓝色协议》的后效描边中为了处理手指与手指之间的描边时就有使用到。另外一方面是现在NPR的一个主流方向是与PBR的结合,PBR中也有大量法线参与的计算。存储两套法线不仅会增加Vertex Fetch的负荷、也会给GBuffer的管理和传输带宽带来苦恼。

描边、后效描边将会在后面详细介绍

除了修改模型法线以外,还有一种做法是使用一张阴影阈值贴图。让我们看回之前判断二分法的公式:

$$
NdotL = dot( N, L ) * 0.5 + 0.5\\ IsShadow = step( NdotL, 0.5 )\\
$$


很明显修改法线的目的是为了控制NdotL的结果。那么我们是不是可以直接将NdotL的结果写出到贴图上,计算的时候直接采样呢?答案是肯定的。下面两张图分别是阴影阈值贴图和在Photoshop中用【图像-调整-阈值】模拟使用过程的gif图。注意这张阴影阈值只能描述光源在其中一边的情况,当光源处于另外一边时需要进行一个水平翻转。

阴影阈值贴图的原理很简单,实际上我们更关心的是这张帖图是如何生成的。自《原神》分享之后已经很多相关的资料 [15] 了,这里简单说一下流程:

  1. 准备多张不同光源角度的阴影阈值贴图作为关键帧,例如0°、15°、30°、45°、60°、75°、90°
  2. 对关键帧生成SDF图后,对相邻角度的SDF图做线性插值得到中间帧的SDF图。补帧得到足够多的SDF图后,step还原回阴影阈值图
  3. 对得到的阴影阈值图一一叠加,最后除以阴影阈值图的数量即可

如果关键帧足够多(例如0~90°每隔1°各绘制一张),第二步也是可选的。但是这样工作量就太大了,所以这里很巧妙地利用了SDF图的数学性质来对中间结果进行插值得到中间帧。


  • 扩展2:修改模型法线、阴影阈值贴图各自的优劣

阴影阈值贴图的好处是非常直观、美术能够所见即所得地绘制明暗区域。但是缺点一是多采样一张贴图,二则是贴图的通病、对分辨率要求较高,否则就会在边界出现难看的锯齿,这在二分明暗中更为明显。修改模型法线能得到更加平滑的效果,但是缺点一是破坏了模型原来的法线结果、二是美术在建模软件中修改法线后需要在游戏引擎中二次确认效果。除非能够保证材质效果在建模软件和游戏引擎中保持保证一致,否则就会增大美术返工的风险。


Specular

接下来是《罪恶装备》的高光计算。虽然分享中没有明确说是如何计算的,但是从截图的材质来看,应该是经典Blinn-Phong高光模型。关于该光照模型网上已经有大量的资料了 [16] ,因此这里不作过多的解释。


下面是一个示意的数学公式。为了能够对各部位有更精确的高光效果控制,《罪恶装备》将强度Intensity和高光系数G保存在(内部称作)ilm Texture的R跟B通道上。

Intensity的原文为【スペキュラハイライトの強度】,直译为SpecularLight的强度。高光系数G的原文为【ハイライトの入りやすさ】,直译为高光进入的容易程度。
需要注意的是,原文1对于高光系数G的描述是:数值越小会容易衰减得到小区域的高光、反过来数值越大则得到越大片的高光。所以并不能直接套用下面的公式,原因是下面的G越大越容易得到小区域的高光、越小则反光来 [16] 。可能《罪恶装备》在这里做了其他操作,具体就不得而知了。

$$
HalfVector = normalize( V + L )\\ Specular = Intensity * (dot( HalfVector, N ))^G
$$


  • 扩展1:天使环?风格化的头发高光!

可能《罪恶装备》中对于头发的高光处理没那么突出,实际上二次元高光渲染中一个比较难处理的点是头发高光(俗称天使环)。其中一个比较通用(甚至现在都还能看到其影子)的渲染模型是2004年提出的Kajiya-Kay模型 [17] [18] 。Kajiya-Kay由于比较工业化,这里就不过多解释了。而放到风格各异的三渲二当中就会有各种各样有趣的解法,这里列出部分并作简单介绍。

首先是刊登在2022年1月号的《CGWORLD》对《偶像大师 星耀季节》(アイドルマスター スターリットシーズン)中偶像头发高光的分享 [19] 。大体上,《偶像大师》采用的是高光Mask图的方式,当且仅当并总是在Mask图上标记为白色的区域进行高光的计算、形成光点。

为了达到各向异性的特性,《偶像大师》的做法:根据摄像机与头部的相对位置关系,水平、垂直移动Mask图。但是为了让光点能够按照预想中移动到对应的位置(例如垂直移动Mask图时,光点需要沿着发根<=>发尾的方向移动),需要对UV进行特殊的处理。《偶像大师》中就专门为头发高光单独分配了一套UV通道。最终做到各向异性头发高光的效果。

关于头发高光Mask图的使用,同样是偶像游戏(大嘘)的《赛马娘》分享 [20] 中也有如出一辙的做法。只是《赛马娘》中直接将高光结果乘上Mask图以绘制出天使环的形状,但并没有做各向异性的处理。

米浴太可爱了,快过来让叔叔抱抱.jpg
注意:分享中并没有头发、头发以外高光的区分,赛马娘的高光是同一套做法。

另外一个各向异性头发高光的例子是《蓝色协议》的做法,分享于CEDEC202021。首先SpecularMask贴图R通道存储了普通的Mask,GB通道存储了离高光重心的距离x和y,在还原时做下面的计算:

  1. 以自身UV采样SpecularMask贴图,将UV减去GB通道的数值,得到重心UV
  2. 将重心UV加上GB通道数值乘以若干倍数之后的结果,得到按照重心放大/缩小过后的自身UV
  3. 以放大/缩小过后的自身UV采样R通道即可

简单来说,蓝色协议通过这种方式达到了每个高光都以自身的重心坐标为中心放大/缩小、而不是以整张贴图的中心,从而保证能够在不破坏原有形状的前提下放缩。虽然说是比较巧妙的做法,但总觉有点邪道甚至是反面例子的意思了。



Rimlight

接下来的部分是角色的Rimlight也就是边缘光,这是新作REVELATOR中加入的、在《CGWORLD》上进行的分享 [8] 。分享中着重点讲的是《罪恶装备》是如何通过Mask图剔除掉那些不需要的Rimlight,并没有说Rimlight如何进行计算。如下图是应用Mask图前后渲染图对比:

由于REVELATOR采用的基本是前向渲染的思路,结合上面的黑白RimlightMask图、猜测Rimlight是通过判断视线方向与法线方向的角度(也就是点乘的结果)计算得到的。属于是比较常见的做法,就不作过多解释了。


  • 扩展1:《蓝色协议》的Rimlight

简单提提《蓝色协议》中边缘光的做法 [11] 。《蓝色协议》的边缘光区域是由一个单独的后处理Pass处理得到的、有点类似于描边。如下图所示,通过在SceneDepth上卷积得到Rimlight的区域。其中RimLightWidth用来控制描边的粗细。

蓝色协议这种边缘光的做法没有把光源考虑进去,相当于一个虚造的、永远处于摄像机空间下像素背面的光源。


描边

描边向来是卡通渲染中一个重要的部分,其中一个让美术头疼的普遍问题是失真。由于描边往往只占据贴图、画面的很少一部分像素,这种情况就非常容易出现描边断裂、模糊与锯齿等问题。下面是《罪恶装备》给出的高质量描边的解决方案。总的来说,有下面三种方式的描边:

  1. 绘制在贴图上的描边
  2. 法线外扩法
  3. 独创的本村线


未被提及的ilm Texture的A通道

首先是绘制在贴图上的描边。虽然分享 [2] 中没有提及,但是回想上面的ilm Texture,仅有R通道的高光强度、G通道的AO、B通道的高光系数,剩下的A通道仅有图片展示却没有解释(也不知道是哪位角色的)。


不过在另外一篇文章 [7] 中能看到A通道贴在模型上的结果。经过我在实机上的观察,图上的表现就是角色May鞋子上的描边。换句话说,ilm Texture的A通道是《罪恶装备》中绘制在贴图上的描边。

图出处见视频标题。忘记从实机画面里截图了.jpg

可能战斗时看着表现还不错,但是从特写里就明显能看到描边糊掉了。这也是直接画在贴图上的描边最大的缺点:受限于贴图分辨率大小以及描边太细的原因,这种描边导致特别容易在实际表现上出现失真。

前者并无法避免、这是纹理贴图的通病,只能通过增大描边贴图的分辨率来解决。后者可以通过下面两种方式来减缓:

  1. 把描边分配到另外一套UV上,使得描边更好地利用贴图空间
  2. 尽量让描边在贴图上保持水平和垂直的布局,根源上减少锯齿和模糊感

可以看到《罪恶装备》就有遵循第2点,使得描边虽然略有模糊但整体上还是很规整的。

虽然说缺点很大,但是优点却也是最明显的对美术最友好。因为可控度最高并且绝对的所见即所得。


法线外扩法

然后是法线外扩法(RTR4th中称为Procedural Geometry Silhouetting,中文通常称为“法线外扩法”,日文资料为「背面法」)。由于法线外扩法在业界上已经是非常成熟的做法、并且网上也有非常多的资料 [21] [22] ,因此这里不作过多介绍。下面是《罪恶装备》中自定义法线外扩法的部分。为了能够对外扩出来的描边进行控制,《罪恶装备》在(1)描边的粗细(2)描边的Z方向偏移这两个角度上下了功夫。

首先是描边的粗细,是为了还原动漫描边的感觉(分享中的例子是脸颊是较粗的,到下巴则越来越细):

不知道怎么描述,但是大概就是线条语言x

在《罪恶装备》中这是通过两个参数进行控制的,分别是:

  1. 描边粗细系数。0.5是标准大小、1表示最粗、0表示没有描边
  2. 根据摄像机距离调整外扩程度的系数

第2条也是法线外扩法老生常谈的问题。由于法线外扩法往往是在世界坐标系上外扩的,因此当摄像机拉远以后描边就会出现看不清、锯齿等各种问题。为了修复这个问题、除了根据摄像机调整外扩程度以外,还可以是在NDC坐标系上进行外扩。

然后是描边的Z方向偏移(原文为「輪郭線のZオフセット値」)。该参数的作用是在摄像机空间将顶点在Z轴方向偏移,其结果是将某些不受欢迎的描边(例如头发、鼻子等部位)埋在模型后边(主要看发尖部分):

顺带一提,控制法线外扩法的这些参数保存在模型的顶点色当中:

  • G:根据摄像机距离调整外扩程度的系数
  • B:描边的Z方向偏移
  • A:描边的粗细系数


本村线


最后是大名鼎鼎的本村线,主要用在肌肉等部位的内描边。本村线正如其名字展示的一样,出自本村·C·纯也之手。虽然都基于贴图,但本村线的特点是即便摄像机靠的非常近,本村线描边仍然能够保持一个非常高的分辨率。其做法如下:

  1. 首先在贴图上绘制有水平、垂直轴对齐的黑色边界线
  2. 对需要进行描边的地方的顶点处创建在同一个位置上的重复顶点。假设原顶点为OriginalVertex、重复创建的位置相同的顶点为DummyVertex
  3. 将DummyVertex的UV埋进黑色边界线内
  4. 通过调整DummyVertex与OriginalVertex之间的UV分布关系,从而让OriginalVertex所在的三角面片能够被黑色边界线所覆盖得到
文字不太好描述,建议结合下图的动图静图解释来理解。GDC2015的视频分享 [23] 也是很好的参考资料。

下面是对动图的解释:图中选中了四个顶点(分别两个OriginalVertex、两个DummyVertex,从模型上也印证了DummyVertex与OrignalVertex位置相同的这一个说法)。接着调整DummyVertex与OrignalVertex的UV坐标,从而让更多/更少的区域被黑色边界所覆盖。

下面是对静图的文字描述。关注下图中的白色线框部分,左下角的UV分布中实际上选中了四个顶点、其中的两个汇聚在同一个uv上。右边的模型虽然表面只有两个顶点,实际上也是四个顶点、它们在同一个位置上。

本村线主要解决的是线条粗细的问题。如果是直接绘制在纹理贴图上的粗细线条,那么就会不可避免的出现斜向的像素,一旦将贴图放大就会出现明显的锯齿、要减少锯齿需要使用更高分辨率的贴图。而本村线使用的是等粗细且水平、垂直对齐的黑色边界,本身无论怎么放大都不会有锯齿。线条的粗细是通过调整uv来做到的,与贴图无关。

效果确实非常好看,但是背后是纯人工的美术成本。包括但不限于前期的本村线预布局、制作中的uv重新排布、后期的反复调整等。一旦返工不仅需要重新排版贴图还要重新排版uv。因此一旦确定好以后最好少更改,并且要由美术主导。

虽说属于是优点与缺点都非常极端的技术,但是本村桑能够想到如此魔法的方案也是非常厉害的了。


  • 扩展1:基于后处理的描边

补充另外一类经常使用到的描边方法,那就是基于后处理的描边。有比较多的后处理可以得到描边,其中一种常用的技术是检测是否有不连续的数据。举简单的例子是角色和背景间的描边就可以判断深度上是否不连续。一般会使用Sobel算子(也叫卷积核)来得到这个“差异”:

除了深度以外、还可以判断世界法线的突变程度,《蓝色协议》的分享里 [11] 就有通过判断世界法线来得到手指间的描边。

另外还可以人为地创造不连续的数据,《二之国》 [24] 跟《龙珠Z KAKAROT》 [12] 都有使用这种技术。他们在模型和模型之间(例如吊带和背心)上刷上不同的颜色后,利用Sobel算子检测这个颜色的差异来判断是否需要生成描边。

同样的,关于后处理描边网上已经有大量的资料了,这里不过多介绍。


  • 扩展2:类本村线

最后说一个类本村线的内描边方式。最早从《赛马娘》中观察得到,这类内描边的特点跟本村线一样即使放大至非常大也非常清晰。其基本思路是将描边的形状直接建模在模型上,然后将这部分的描边UV单独指向一块纯色色块中:

个人认为是较为便宜的本村线。缺点在于因为需要直接做在模型上,会稍微增加模型制作的难度。适合用于对内描边精度较高且数量较少的情况。


打光与“多光源”

在SIGN的分享 [2] 中有提到,2D格斗游戏中一个很关键的部分是避免“看起来的错误”(原文为「見映えの違い」)。

举的一个例子是假设角色从某个地方走过来时,如果脸的明暗关系变化非常剧烈、一会明一会暗的话,这是绝对不行的。
个人理解是2D格斗游戏这种即时策略非常强的类型、对手的一举一动都会影响接下来自己的策略。作为开发者,应该尽可能地去掉那些无效且可能会影响判断的表现,其中之一就是角色的渲染。

为此《罪恶装备》的对策是每个角色都有自己专属的虚拟光源。这个虚拟光源的用处非常广,为了得到最佳的视觉表现、不仅是正常的战斗还有过场动画,都会一帧一帧地进行调整。下图是虚拟专属光源的对比图,可以看到角色May(左)和Slayer(右)的光照方向与地上的阴影不完全一致。

从这里也能间接看到《罪恶装备》在UE上实现NPR的大概思路,那就是不改引擎也不改shader、直接使用Unlit材质并虚构光源进行光照计算。
↑个人猜测
分享没有说虚拟光源的类型。结合下文,应该是点光源。
↑同样是个人猜测

然后是多光源的处理。SIGN中没有对多光源进行处理,导致场景光源(如背景烟花)、特效都不会对角色的渲染产生影响,一直都只有上面所说的虚拟光源。到了REVELATOR [8] 似乎加入了模拟出来的“多光源”,但还是让角色更好地融入了场景当中。

首先是特效光源。这是根据角色与光源的距离,来判断是否使用该光源来替换上面所说的虚拟光源:

然后是场景光源对角色的影响。前面介绍Diffuse时候有说过,为了让角色更好地融入环境、SIGN引入了全局的LightColor(光源颜色)和SceneLight(环境光颜色)。在REVELATOR中则区分地更加细致,通过在场景上摆放LightColor和SceneLight来让角色在场景上有更丰富的颜色表现:

为什么不是正常思路加算多光源?分享里给的解释还是跟上面一样:“加算的多光源会让角色变得过曝,从而使辨识度降低。需要综合考虑渲染变现以及游戏性。”


  • 扩展1:《蓝色协议》的多光源/间接光处理

由于《蓝色协议》全面拥抱延迟渲染、并且是UE4开发,所以稍微提提其中的多光源跟间接光处理 [25]

对于多光源,则是正常地进行光照计算并进行加算。不过需要注意的是,由于LightingPass时GBuffer只有模型原本的法线。如果继续用这个法线的话会得到非常模型的光照结果。为了得到纸片人(?)的效果,《蓝色协议》这里无视了法线、仅仅是根据与光源的距离计算强度。

然后是天光跟间接光。他们的采样需要用到法线,《蓝色协议》的做法是统一用垂直向上的法线进行采样:

需要注意的是,UE4计算天光跟间接光是在BasePass中进行的。换句话说能够取到美术调整过的平面化的模型法线,但这里并没有使用到、仍然用的垂直向上的法线。意⭐义⭐不⭐明哒。


  • 扩展2:《街霸5》中的LUT色调修正

同样作为横版格斗游戏的《街霸5》也有相关的角色融入环境的问题,这里提一个他们分享中提到的利用LUT来修正画面色调的技术 [26] 。主要就是一张LUT,横轴采样的是摄像机的位置、竖轴采样的是场景深度。通过这张LUT来让画面变得具有辨识度。




表情、伤口、装饰?

在RELEVATOR分享 [8] 中对于表情、伤口、装饰等有比较多的内容,这里挑部分总结一下。

首先是格斗游戏中喜闻乐见的受伤程度的表现(图为角色JAM)。《罪恶装备》中的受伤表现出现的位置(应该)是固定的,其做法为两个层面(1)贴图(2)模型。贴图很好解释,就是用特殊的一套UV来采样受伤贴图:

模型就更简单了,直接将“受伤”做成模型(原文称作「パーツ」,即英文单词Part)然后贴在角色身上:

这种做法不仅用在表现受伤上,还用在了表情上:

差不多得了.jpg

甚至用来当作假阴影:


  • 扩展1:《龙珠Z》的受伤程度表现

同样是格斗游戏的《龙珠Z》也有类似的做法,但是因为要还原原作+多形态(如赛亚人)等、会需要更加复杂的受伤程度 [12] 。不过总的来看还是(1)贴图(2)模型。贴图跟《罪恶装备》一样,通过排布特殊的UV去采样受伤贴图:


模型上由于会出现爆衣(?)、赛亚人之类的差异,因此《龙珠Z》采用的是替换模型的思路:

因此会产生很多的变体(原文为「バリエーション」,即英文单词Variation):


  • 扩展2:《赛马娘》的临场感

最后再来提一嘴俺の愛馬《赛马娘》吧,分享 [20] 里有提到他们在临场感上面下的功夫。关于临场感,就是下雨天要被淋湿、剧烈运动(跑步、live)要流汗、泥地上跑步身上会变脏等。

首先是淋湿。《赛马娘》的做法很简单,那就是直接更换贴图。具体地说,《赛马娘》中有一张图的R通道会影响AO,淋湿时就是更换这张帖图、达到淋湿的效果(其实就是颜色变得更暗)。

顺带一提,这个AO的数值是直接乘在Diffuse的计算上的


除了颜色会变暗以外、高光也会发生变化,具体是变得更加聚焦(更亮、区域更小)。《赛马娘》的做法是利用环境贴图再进行一次高光计算,以模拟光线反射环境的效果。

无——声——铃——鹿——

然后是在泥地上跑的污渍,随着赛跑的进行这种污渍会越来越多。《赛马娘》的做法是通过一张多通道的Mask贴图来标记那些污渍的位置、随着时间的进行开放更多的通道来产生更多的污渍。

最后是流汗,这个跟《罪恶装备》一样、直接贴的汗的模型在脸上。




总结

总的来看,《罪恶装备》中角色渲染并没有用到太高级的技术、都是非常淳朴甚至是很老的方法,但是却能做到如此好的效果。这其中的原因,除了堆出来的美术人工以外、扎实的美术基础才是更重要的。

简简单单才是真.jpg
插个题外话,《赛马娘》的技术也非常淳朴,但是个人认为最终效果不亚于《罪恶装备》。尤其是Live中的舞台表现远远超出了技术本身,Cygames也是大魔鬼。有时间后面也想写一篇文章来总结一下。

当然一个作品美术的成功不止体现在他们的角色渲染上,场景、特效、动作等都是有许多细节可以扣的。可惜篇幅有限,剩下的部分就等之后再说吧!

希望大家喜欢!


参考

  1. ^ a b 0 https://baike.baidu.com/item/%E7%BD%AA%E6%81%B6%E8%A3%85%E5%A4%87/466576?fr=aladdin
  2. ^ a b c 1 https://www.4gamer.net/games/216/G021678/20140703095/
  3. ^ 2 https://www.4gamer.net/games/216/G021678/20140714079/
  4. ^ 3 https://www.cnblogs.com/TracePlus/p/4205798.html
  5. ^ 4 https://www.cnblogs.com/TracePlus/p/4205834.html
  6. ^ 5 https://www.cnblogs.com/TracePlus/p/4205978.html
  7. ^ a b 9 https://zhuanlan.zhihu.com/p/240763959
  8. ^ a b c d 6 https://cgworld.jp/feature/201607-cgw215t2-guilty.html
  9. ^ 7 https://www.cnblogs.com/TracePlus/p/5697705.html
  10. ^ 10 https://developer.valvesoftware.com/wiki/Half_Lambert
  11. ^ a b c 11 https://cedil.cesa.or.jp/cedil_sessions/view/2389
  12. ^ a b c 12 https://cgworld.jp/feature/202003-cgw260t1-dbzkkrt.html
  13. ^ 14 https://maverick.inria.fr/Publications/2006/BTM06a/x-toon.pdf
  14. ^ 13 https://zhuanlan.zhihu.com/p/37001473
  15. ^ 15 https://zhuanlan.zhihu.com/p/389668800
  16. ^ a b 16 https://zhuanlan.zhihu.com/p/352209183
  17. ^ 17 http://amd-dev.wpengine.netdna-cdn.com/wordpress/media/2012/10/Scheuermann_HairRendering.pdf
  18. ^ 18 https://zhuanlan.zhihu.com/p/135910659
  19. ^ 19 https://cgworld.jp/article/202204-imas-ss02.html
  20. ^ a b 20 https://game.watch.impress.co.jp/docs/kikaku/1366154.html
  21. ^ 22 https://zhuanlan.zhihu.com/p/109101851
  22. ^ 23 https://zhuanlan.zhihu.com/p/446473650
  23. ^ 8 https://www.youtube.com/watch?v=yhGjCzxJV3E
  24. ^ 24 https://blog.thomaspoulet.fr/ninokuni2-frame/
  25. ^ 25 https://www.famitsu.com/news/202108/25231530.html
  26. ^ 26 https://www.amazon.co.jp/%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9-2016-CGWORLD%E7%89%B9%E5%88%A5%E7%B7%A8%E9%9B%86%E7%89%88-CGWORLD%E7%B7%A8%E9%9B%86%E9%83%A8/dp/4862463525/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2RPFAWC4ZEF69&keywords=2016+CGWORLD%E7%89%B9%E5%88%A5%E7%B7%A8%E9%9B%86%E7%89%88&qid=1651572933&sprefix=2016+cgworld%E7%89%B9%E5%88%A5%E7%B7%A8%E9%9B%86%E7%89%88%2Caps%2C211&sr=8-1
编辑于 2022-05-03 18:23