TGDC | 腾讯互娱谢海天:二次元游戏高品质卡通渲染怎么做?
ashkeling报道/2020年12月7日- 10日,由腾讯游戏学院举办的第四届腾讯游戏开发者大会(Tencent Game Developers Conference,简称TGDC)在线上举行。
TGDC自 2017年创办以来,一直坚持以开发者视角与需求为出发点,结合行业发展趋势,对大会内容进行不断升级和扩充,旨在为国内外游戏专业人士打造开放的交流分享平台,推动游戏行业良性发展、探索游戏更多可能。
在第三日(12月9日)的活动中,来自腾讯互娱魔方工作室群《ob电竞》项目的主美谢海天进行了精彩的演讲分享,从色彩、造型、还有动画特效的角度,为我们盘点了二次元游戏里面的那些黑科技。他表示“你要理解它的整个二次元,或者说这种品类游戏的审美,提炼出一些东西来,同时你还需要一些技术的积累,来去实现黑科技”
以下是演讲实录:
谢海天:大家好,我是谢海天,我很高兴能够在这个平台,跟大家一起分享一下我近期的一些工作。
我这次分享的主题叫从画皮到画骨,盘点二次元游戏里面那些黑科技,我会从三个角度,色彩、造型、还有动画特效的角度,来跟大家一起讲一下什么叫黑科技。
我现在大家放一段动画,这段动画是2000年的,一个日本的动漫电影《ob电竞》。之所以放这段动画,是因为我们在做《ob电竞》的这个项目中,有很多参考于这个片子,这个片子有一些它比较有意思的地方。
因为第一它是日本动画电影,同时在美国播放,美国院线上映,所以说它代表了欧美和日本两方的一些审美的倾向。其次呢,它是一个逐帧的2D动画电影。
说到了什么叫黑科技,我这次分享的主题黑科技。一句话来说的话,就叫用3D技术来还原2D卡通效果。里面有两个关键点,一个是3D技术,一个是2D卡通效果。为什么?3D技术就是因为刚才我们看到电影,它是在赛璐璐的画面上用逐帧的手绘方式来画的,这次因为我们要做的都是在游戏的范畴,来讨论这个问题。所以说我一定会用3D的技术来去做2D卡通效果。
为什么要说是黑科技呢?因为我们通常看到的游戏,基本上是用PBR的技术来做一些比较写实的效果。刚才那个片子的电影,它是有一些艺术加工的效果,我也想用3D的角度,来还原这种2D手绘的加工效果。
我们先从色彩部分来看,这个剧照也是刚才影片里面的。我们从色彩的角度来看,先从亮部、暗部、色彩对比关系来说。你可以看到左边是剧照,右边是我从上面取出来的颜色,一眼看上去,首先右边色板的左边的那一条是亮部色,右边是暗部色。其实你一眼看上去,能大概感觉到它的色彩有一些变化,但是其实变化不是太大,这个就是日本传统动漫角度的一个实现方式。
但是你从皮肤的角度来看,亮部的颜色、暗部的颜色,暗部会相对偏暖一点。从它的盔甲的颜色上来看,盔甲的颜色又会受到环境色的影响,所以说它有点偏冷,如果你是用一个3D的角度,去直接做一个3D游戏的话,你是不需要考虑这些东西,因为有很多现成的光线追踪,或者说有些反弹就可以做这件事情。这个是我们后面会讲到如何去处理的一个东西。
这个是色彩角度,从亮部和暗部的色彩对比关系来讲,这张图你可以看到,这个是从整体和局部色彩对比关系。如果同一个角色,在雨天、晴天和雪天,他也有他不同的色彩变化。这个也很好理解,因为当你在哪怕是一个正常的电影,你看到的时候也是一个人会有很多色彩变化。
这个里面雨天和晴天,雨天和雪天会有点接近,因为它都是属于一个漫反射的环境。晴天由于受到阳光的照射比较强烈,它整体看起来颜色会跟另外两个对比度会强一些。
这是扳机社的《ob电竞》电影,到了现在日本发展的动画颜色来看的话,已经开始非常地强烈了,这个片子如果大家有兴趣,可以找一些它的剧照和花絮来看,非常地华丽,华丽度已经是比刚才那个要强烈很多,但是它也容易看久了会视觉疲劳。
你看到这边你很明显能看到,我现在用线连出来的也是亮部色和暗部色,从色板上明显就能看出来,一个是偏黄、偏绿,然后偏橘色和偏粉红色,它把这个颜色的饱和度的层级拉开得非常过。你可以看到有一些颜色,它顶得非常高,是RGB色,用打印机的颜色有可能会打印不出来,所以说这个如果是印刷的话,有可能会偏色的。这就是他们要追求的非常强烈的一个视觉效果。我们是怎么样去参考它们,我们理解了这种受众和审美以后,我们是如何把它用到游戏里面的。
这两个就是我们游戏里面的角色卡洛琳,左边是她的原生状态,右边是她的其中一个皮肤。你看到左边这个角色,她全身都是一个非常冷的颜色,包括像暗部,暗部我们也故意把她调的是一个偏冷的紫色,就是为了让她的色彩能够统一,但是她色彩统一就会显得容易变得比较生硬。
从色彩的角度来讲,我们从暗部色,虽然说她是黄色的头发,但是我给她加了非常重的一个粉红色,其实是用了一个紫色,这是暗部做衬托。然后她的皮肤,就身上衣服的暗部,是用的冷色来衬托,达到一个统一。
另外一个,这是校园教练,他的头发你对比一下能够看出来,其实我们头发、皮肤和身体衣服的着装的暗部,都是一个统一的颜色。他看起来像是沐浴在阳光中的一个状态,其实你对应刚才我讲的亮部和暗部要有一个色彩的对比,是人为去处理的,同时它整体要有一个色彩的饱和度的对比,这个就是一个简单的技术说明,我就不说非常细节的内容了。
左边第一张图是实现出的效果,第二张图是我们在暗部色去做的一个处理。你可以看到头发的颜色、饱和度和色彩的倾向是非常重的,最右边的那张图,你可以认为是个shader。其中一个过程把黑色和白色作为阴影来分离开,在黑色区域把中间这张图,跟我们的亮部色去做一个叠加混合,就得到了最终的效果。我在每一个主题也都会给它加一个进阶的内容,这个进阶的内容,我们现在在做的过程中,我们会在这个基础上,留一些空间,做一些净化,是为了以后也要有一些技能会提升,我们的审美要有追求就会把它做一些尝试。
右边这张图是《ob电竞》里面的一个静帧截图,这个是偏一点美式的一个画面效果。你可以看到角色白色的衬衣,往上有一个反射光,看起来是一个暖色的,如果你要是在正常的一个电影,或者说一个稍微写实一点的画面里面,你不会看到这么强烈的一个反光,这个是故意强调他的裤子,或者说整个环境对他白衬衣暗部的一个反射影响。
左边是我做的一个模拟,这个我可以把它称为一个卡通渲染的光线追踪,为什么叫卡通渲染的光线追踪呢,因为它的光线追踪的关系,并不是基于一个特别物理或者基于一个特别写实度的范围,而是我给它直接指定了一个渐变。
还是看左边那张球下面的图,灯光颜色我是给了一个暖黄色,模拟一个大概太阳的颜色,暗部的颜色是做了一个从蓝到粉红的渐变。这是什么意思呢?就是在它的暗部给它罩一层蓝色,就相当于罩一层冷色,这个冷色是用来跟亮部的暖黄色做对比的。粉红色它会产生什么效果呢?光线追踪它会不停地反弹,这个球的深色区域,让这个粉红色慢慢地渗透到暗部,包括它的投影,包括它的明暗交界线后面的区域,你会看到一个比较强烈的效果。这个工作我们现在也正在放在我们的角色实验当中。
这是一段视频,左边是我们现在的《ob电竞》的角色效果,右边是我们正在尝试中的一个画面效果。可以对比看出来,之前的赛璐璐的效果是很有他的特点和风格的,但是如果我们要继续往下走的话,我们想要更多的细节或者说技能提升以后,我们想要更多的表现力的话,我们需要做出很多尝试,也去找到它的一个平衡点。
你可以看到我们现在,正在进化中的就是一些明暗交界线的色彩关系,包括高光区域的一些处理,现在这个角色的色彩里面,就已经包含了我刚才说的光线追踪的效果。但是因为我们要在游戏里面实时地跑的话,我们会用到一些其他的技术来做,这是一个隐含的黑科技,这个东西是要做到很多。
我们首先要用一个非实时渲染的效果,来去给他做一个预演,然后再把它在引擎中去实现,但是这两个也是相辅相成的。为什么呢?因为我们有很多游戏出来以后。我们需要做很多宣传片也好,去做一些海报也好,我们都要在这个基础上去给它处理。这就代表了两种方向,一个是赛璐璐非常传统的一个做法,有一个是我们如果未来想要进化他的一个思路和效果。
我再跳到造型的部分,我还是从这张图的角度来讲。首先看右边那张图,这个角色是我们游戏内的渲染效果,从这边看的话,右脸颊有一个小的倒三角形,这个效果也不是说随便就能出来的,如果稍微懂一点打光的朋友,都能了解这是一个比较经典的伦勃朗的三点光源,产生的一个明中有暗,暗中有明的效果。
如果卡通渲染想要达到这个效果的话,就要谈到布线的问题。可以看到这个布线图,这个小的三角形是一定要切出来布线,去卡住这个光影的轮廓,你才能看到这个三角形,至于这个造型是什么样子,可能针对不同的角色有不同的情况,男性就要硬朗一点,女性就要小一点,但是这个小的桃心形,是一定要切出来的。
其次你可以看眼睛部分,眼睛应该不用多说,肯定是个球嘛,但是它是有一个像凸透镜的效果,如果你用卡通的效果去做的话,你要去模拟玻璃晶状体的效果,那是非常消耗性能的一件事情,而且从赛璐璐的一个卡通效果来讲的话,它不需要做得那么的物理。
所以说你看这眼球,其实我们是做了一个内凹的效果,它其实是一个凹陷的面。这个时候你再看它的光影,它看起来像是那个光被凸透镜,被一个玻璃球给折射进去了一样,其实人的眼睛还有一个很重要的东西,就是瞳孔。瞳孔是非常传神的东西,这个是不能被遮掉的,所以说这个瞳孔,我们是单独做的一个片放在前面的。
提到瞳孔,还有一个非常非常重要的点。瞳孔前面还有一个非常明显的高光点,这个高光点是非常能够表达人的心情,是心灵的窗口。那个小的高光点,你如果仔细看的话,我们也是做了一个模型在上面,可以用骨骼驱动,可以用Blend Shape来驱动,可以让它晃动起来,这个人显得水汪汪的眼睛。
再往下看嘴巴,嘴巴是有什么黑科技,或者说不一样的点呢?嘴巴的布线,如果稍微懂一点的话,大家也能知道嘴巴和眼球,都是有一圈一圈的口轮匝肌,眼轮匝肌的布线,这样的话它动起来会看起来更自然一点,就是光影会比较自然。
如果你要看我们现在这个卡通渲染布线的话,其实从鼻底到嘴唇的诊断是没有loop的,没有圈线的。为什么要这么做呢?就是因为卡通角色他在做一些表情,在做一些说话动作的时候,有时候那个动作是非常夸张的,这是第一。第二个就是我们的这种渲染方式,不像传统的那种渲染方式,它的光影非常明确,你可以看到右边就是亮部,左边是暗部,中间只有一条线过渡,它没有一个明显的光滑过渡,当这个人在做表情的时候,如果你的loop的圈线太多的话,它会产生很多不必要的瑕疵,那个会很影响表现,所以说这个嘴巴需要这么去做。
还有一些比较小的点就是头发下面,你可以看到我们每一个头发的下缘,都有一个小切角,因为如果这个角色从正面打光的话,你必须要给这个头发的底部一个暗部,否则头发就会像一个
薄薄的纸片贴在头上。有了这种小的一个切角,我可以给它人为的做一个假的光影,因为我默认这个角色不会经常做一些倒立,或者说一个非常奇怪的光影姿势,90%的状态就是站在那儿看着你,它这个光影在正常状态下,都会有一个看起来比较自然的明暗关系。
这个造型刚才讲的就是一个比较基础的黑科技的处理方式。还有一些更进阶的,为什么这就提到一个进阶的标题,因为涉及到修型和增强光影,特别是如果你还要想在游戏中呈现需要用到的技术,我们是蹚过很多坑才实现的。
先看一下这段,这个是我们角色五星的一个出场,但这是个视频我还得说一下,视频和真正游戏内的处理方式还略有不同。视频的自由度可能更大一点,因为它相对来说,我只需要在这个镜头看起来对,就OK了,没必要是360度转着看。如果是游戏内的话,就需要的更严格一些,如果你现在看这样,感觉还比较正常的话,我给大家看一下,没有处理过的一个状态。
初始状态就是左边这样,调整完是右边那样。首先你看炮筒,炮筒我们肯定不会单纯从这个镜头来讲,整个炮口性价比最高,同时表现效果最好的状态一个处理方式,就是直接画一张贴图,给它贴到炮口就可以了,匹配现在的光影处理就OK了。这个是视频里边,做得是最经济,最划算,而且效果最好的方式。
其次角色的处理,一对比就能看出来,为什么要做这个处理呢。
因为我们其实还是在用一个3D来去还原一个2D的效果,2D的效果是完全可以去画的,你觉得不好看就完全可以去画,但我们在3D中,如果这个角色动起来,还要转起来,我不可能保证它所有3D的光影都是非常完美的。
你可以看到,我并没有开模型之间的一个自身投影,我是用的面片去做了遮挡,包括胳膊,包括袖子,都在用一些处理方式来让它变得更好看。其实默认状态下的确看起来,有一些效果不够好,所以这个需要我们进行收尾。这个收尾的过程是有很多工作要做的。
这里我借用了一张日本杂志的一个图片来说明。这个增强透视呢,我们游戏中其实也用到了,但我们那个游戏其实是比较偏热血的,就不会有这么强烈的变形。这种动画片就属于比较夸张的动作幅度,而且变形力度都比较大,这个比较能说明问题。
你可以看到左边打了一拳,脸上肿起来了,其实直接放了一个mash在这儿,它天生有一个好处。因为它的光影比较简单,它的造型比较简单,我直接把这个mash贴到脸上,你看起来就像是脸上肿起来一块,我们在游戏中也是经常会用到这种,后面也会再提到。
左边那张也是非常经典的用法,你看把手,有时没做这种项目的时候,你也会纳闷,就为什么,有这个必要吗?非要把这个手拉成这样拍,有什么意义吗?你如果自己拍过照片,拍过合影,你能感受到,当大家都站在一排拍的时候,远处有人拿相机拍在两边的那个人,已经被拉伸得没法看了,就胖得不行,中间的人稍稍往后靠一点点,他脸就显得很小,就感觉比较消瘦一点,当镜头放到这么近,你再去拍的话,那个镜头透视大到非常夸张了,回去你可以自己拿3D相机试一下。
你看到右边那张,其实他的人物,就是站在前面的脸和手,还有后面的人脸,都没有特别大的透视变形,我目测的话,这个镜头FOV也就是50到60左右,就是正常的一个透视状态,所以说必须得把它做一个空间上的处理,你才能让它透视。如果你现在只是单纯地调相机FOV的话,看起来效果就非常不好了,这个也是用在视频里面的,或者说游戏里面也可以,但镜头一定要固定,这个是镜头固定的话就没问题。
我再跳到动画特效的部分,这整个部分都是属于进阶的一个内容,就是因为我刚才说的,用到的那个技术是比较复杂,我们花了很多时间去做。如果在游戏中用的话的确是比较难的一个点。
动画中间帧,我们传统一些游戏的,我不说黑科技了,就是正常的一个做法,动画中间帧都是直接用差值来算,或者说也是动画师去做。但如果我们要做这种二次元,或者说有一点性格的动画的话,它的动画中间帧,就有很多的处理方式了。
这个是《ob电竞》里边的一段追逐戏,一闪而过,如果你看过这个片子的话,可能这一下过去,你都没有意识到它中间发生什么。但是你能感觉到,他的情感的表达比较强烈。这个是发生了什么事情呢?
你可以看这图片,第一张还是正常的一个状态,这个人在跑,但是他在追的时候,他非常着急的想要追过去,面目狰狞,这后面三张图都是直接给它夸张化了。动画中间帧如果插入这种效果,一闪而过的话,表现力非常地强,但是它用的时候也要很控制才行,因为它是一个整体调性的表达,就是看你是否要加这种动画中间帧。我们游戏中也用到一部分,但是没有用到它这么强烈,后面也会提到一点黑白闪,跟刚才的动画中间帧蛮像的。
黑白闪可以认为是整个镜头的一个中间帧,黑白闪这个叫法是日本的叫法,但是我觉得用这个片段来跟大家讲的话更清楚一点。这个是《ob电竞》的中间一段,这个比较明显了,往那闪动的时候那一瞬间,它也是强化那一瞬间动作的一个夸张度,这个夸张度并不是说他动作幅度有多大,而是说那一瞬间的情感表达要够强烈,你看它直接就是用了一张。
其实这个电影里边用到了很多如果有兴趣大家回头再翻翻看的话,它插入了很多美漫的表达方式,美漫在处理很强烈的性格的时候,会用一些比较潦草的线条来表现强烈的情感,这个就被用到电影里边。
我们在《ob电竞》的时候,是用得比较少黑白闪,我们另外一个项目,《ob电竞》在做表演的时候,比如说有在龙虎山打斗,就是那种下雨天突然间来一个闪电,整个画面都是变成了黑白,但那个黑白可能就只有三四帧,那一瞬间,啪,一个黑白闪,感觉那个味道马上就出来了。这个我就把它归到特效里面,因为我们是特效同学来去做这件事情的。
还有一个叫法,可能没有做过这一类的同学就不知道,这个词叫帧内,帧内你可以认为是卡通版的一个动态模糊。如果现在你在PhotoShop,或者说你如果是在游戏里面,如果可以打开这个动态模糊的话,它其实就是一个功能,开开以后就自带动态模糊,它会让他在运动的时候,看起来有一些模糊的效果,但你要回到我们刚才看的动画片里边来说,那个时候在胶片上画一个模糊的感觉是比较难的,所以他们创造了一个词,就叫帧内。就是在两个帧之间,由于这个手的摆动,形成了一个视觉残留,那它就不在这个过程中把这个手整个画成一个整体。
我选了蜘蛛侠的平行宇宙,正好有个特别合适的例子,因为这个小孩在这个平行宇宙里面。有一个二次元的你认为这个是蜘蛛侠的一个精神集成。这个电影里边对他的表达,都是一个卡通的做法。可能一晃而过,没有注意。
我截了几张图,这个相当于是它的二维动画版的一个动态模糊效果,它是把整条线都给非常具体地给它呈现出来了,当这种帧内充斥在这个项目当中的时候,你会能明显地感觉到跟写实游戏的一个很不一样的地方,我刚才提到的所有的动画,就是从中间帧到黑白闪到帧内,它都用到了我刚才说的那个技术,后面我会提到这个。
在最后有一个特效,比较好玩的效果,大家应该也会非常熟悉了,就是表情线。脸上滴一滴汗,一头黑线,有点小红晕都是可以做的。你看左边就是表现出来效果就比较含蓄了,我们这个游戏做得是比较含蓄的,你看右边那个不起眼的几条线,有红线,有黑线,还有一些面部皮肤颜色的线,这个是还挺重要的一个东西。
我的这个线可以把它放大,把它放在屏幕的周围,它就变成了速度线,你仔细看他的嘴角的话,就是左边咧开嘴的嘴角,那嘴角的线,其实也是用我们的线摆上去的。
还是回到刚才那个你用3D模拟的时候,它不可能在所有视角看起来都是那么的自然,我们需要有一些工具去修补它的瑕疵。比如说他咧开嘴以后,他嘴巴的边缘就缺少一些黑色的区域,来跟他白色的牙齿来做区分,我们只能用这种方式去弥补它。包括像刚才说的帧内,也可以用这个东西去做。
最后总结一下说,这个黑科技到底是什么呢,其实我做了这么久的项目以后,这种品类的项目我发现一点,首先你要理解它的整个二次元也好,或者说这种品类游戏的审美,你能提炼出一些东西来,同时你还需要一些技术的积累,来去表达,来去实现这些东西。我后面提到的动画和特效的一些做法,都涉及到用一个Blend Shape的技术,那个也是我们自己花了很长时间,去研究,去打磨,最后实现出来这些效果。
有时候你在做的时候,你有时候也会迷茫,所谓的黑科技,就是因为我们在做的时候,并没有一个前人走过的。当然也有一些,我们能够看到行业中,有很多人在去研究这些,已经开始越来越多的人去研究这个技术了。但其实它并没有成型,相对PBR的一个制作思路来说,其实我们这种卡通的做法是充满了一个未知的变数,我说这是黑科技,其实就是我们自己尝试,在寻找各种各样的工具,各种各样的道路来去实现我们想要达到的效果。
我们想要达到的效果是什么样的,回到一开始的那个效果,就是我们现在魔方在做的很多项目,也是有国漫的动画IP,有日本的动画IP,他们都有一整套传统动画的审美,这跟写实的游戏和电影都是不一样的。我们就想能够通过这种,我们研究出来的工具,能够把一个非常好的画面效果呈现给大家,这个基本上就是我今天想要跟大家分享的一个内容。
刚才我在做演讲的过程中,后面也有很多人提一些问题,我这边挑了两个问题,我来回答一下。
问题一就是卡通渲染在画面表现力上有什么优势,OB欧宝体育电竞官网为什么会认可这种表现形式?
你还可以把它类比成影视行业,卡通渲染现在在做的事情,就是在还原一个我们影视行业有过的一个表现形式,比如说我们看过
皮克斯的动画片,也看过梦工厂的一些动画片,它跟传统的,写实的或者更加写实一点的动画是不一样的,因为它有更强烈的表现力,或者说它有更夸张的一些表现手法,而且色彩感也会比较强烈,会有很强烈的个人风格,如果你对这种表现非常有兴趣的话,你会体会到一种跟传统,或者跟写实的题材的作品,不一样的一个感受,我们想做到的也是这么一件事情。
OB欧宝体育电竞官网现在认可这种表现形式,其实也是现在市场上可以很明显能够看到,你在做一个作品的时候,你会有自己的态度,同时你会有自己的表达,如果这种态度和表达是能够获得很好的效果的话,OB欧宝体育电竞官网是会认可这种表现形式的。
还有一个问题是非写实渲染的研发难度高吗?要运用到哪些技术或工具?
其实非写实渲染的研发绝对难度并不高,就是它用到的技术不是
现在我在做的,可能仅限于PC和手机平台的研发,它其实都是一个实时渲染的,一个非现实渲染的框架里边。因为我们这边TA的同学,我也跟他们有很多交流,其实真正用到的shader的复杂度,就是单纯从复杂度来讲并不是太高,但是有一点,它需要你把技术和艺术做一些结合,或者说两边都要懂一些。
用到的技术和工具,刚才我也提到了一些,我们大部分的技术和工具是靠自己的团队来搭建的。这套整个的工具流和技术流都是我们自己研发的。这个难度高可能高在这,就是没有很多现成的工具可用,我们都是要基于我们想要的效果,包括我自己。我现在跟过两三款这种有风格化的项目之后,我也感觉到每一个项目的技术,它有一个叫work flow工作流和工具流。工作流和工具流都有些不一样,是针对不同项目的不同要求,它有些区别。
好的,我的分享今天就到这里结束了,非常感谢大家的聆听,希望大家过一个愉快的夜晚。
如若转载,请注明出处:http://www.ashkeling.com/2020/12/407497