4

TGDC | 腾讯互娱谢海天:二次元游戏高品质卡通渲染怎么做?

 2 years ago
source link: http://www.gamelook.com.cn/2020/12/407497
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

TGDC | 腾讯互娱谢海天:二次元游戏高品质卡通渲染怎么做?

GameLook报道/2020年12月7日- 10日,由腾讯游戏学院举办的第四届腾讯游戏开发者大会(Tencent Game Developers Conference,简称TGDC)在线上举行。

TGDC自 2017年创办以来,一直坚持以开发者视角与需求为出发点,结合行业发展趋势,对大会内容进行不断升级和扩充,旨在为国内外游戏专业人士打造开放的交流分享平台,推动游戏行业良性发展、探索游戏更多可能。

在第三日(12月9日)的活动中,来自腾讯互娱魔方工作室群《王牌战士》项目的主美谢海天进行了精彩的演讲分享,从色彩、造型、还有动画特效的角度,为我们盘点了二次元游戏里面的那些黑科技。他表示“你要理解它的整个二次元,或者说这种品类游戏的审美,提炼出一些东西来,同时你还需要一些技术的积累,来去实现黑科技”

lazy.png

以下是演讲实录:

谢海天:大家好,我是谢海天,我很高兴能够在这个平台,跟大家一起分享一下我近期的一些工作。

我这次分享的主题叫从画皮到画骨,盘点二次元游戏里面那些黑科技,我会从三个角度,色彩、造型、还有动画特效的角度,来跟大家一起讲一下什么叫黑科技。

lazy.png

我现在大家放一段动画,这段动画是2000年的,一个日本的动漫电影《吸血鬼猎人D》。之所以放这段动画,是因为我们在做《王牌战士》的这个项目中,有很多参考于这个片子,这个片子有一些它比较有意思的地方。

因为第一它是日本动画电影,同时在美国播放,美国院线上映,所以说它代表了欧美和日本两方的一些审美的倾向。其次呢,它是一个逐帧的2D动画电影。

lazy.png

说到了什么叫黑科技,我这次分享的主题黑科技。一句话来说的话,就叫用3D技术来还原2D卡通效果。里面有两个关键点,一个是3D技术,一个是2D卡通效果。为什么?3D技术就是因为刚才我们看到电影,它是在赛璐璐的画面上用逐帧的手绘方式来画的,这次因为我们要做的都是在游戏的范畴,来讨论这个问题。所以说我一定会用3D的技术来去做2D卡通效果。

为什么要说是黑科技呢?因为我们通常看到的游戏,基本上是用PBR的技术来做一些比较写实的效果。刚才那个片子的电影,它是有一些艺术加工的效果,我也想用3D的角度,来还原这种2D手绘的加工效果。

lazy.png

我们先从色彩部分来看,这个剧照也是刚才影片里面的。我们从色彩的角度来看,先从亮部、暗部、色彩对比关系来说。你可以看到左边是剧照,右边是我从上面取出来的颜色,一眼看上去,首先右边色板的左边的那一条是亮部色,右边是暗部色。其实你一眼看上去,能大概感觉到它的色彩有一些变化,但是其实变化不是太大,这个就是日本传统动漫角度的一个实现方式。

但是你从皮肤的角度来看,亮部的颜色、暗部的颜色,暗部会相对偏暖一点。从它的盔甲的颜色上来看,盔甲的颜色又会受到环境色的影响,所以说它有点偏冷,如果你是用一个3D的角度,去直接做一个3D游戏的话,你是不需要考虑这些东西,因为有很多现成的光线追踪,或者说有些反弹就可以做这件事情。这个是我们后面会讲到如何去处理的一个东西。

lazy.png

这个是色彩角度,从亮部和暗部的色彩对比关系来讲,这张图你可以看到,这个是从整体和局部色彩对比关系。如果同一个角色,在雨天、晴天和雪天,他也有他不同的色彩变化。这个也很好理解,因为当你在哪怕是一个正常的电影,你看到的时候也是一个人会有很多色彩变化。

这个里面雨天和晴天,雨天和雪天会有点接近,因为它都是属于一个漫反射的环境。晴天由于受到阳光的照射比较强烈,它整体看起来颜色会跟另外两个对比度会强一些。

lazy.png

这是扳机社的《普罗米亚》电影,到了现在日本发展的动画颜色来看的话,已经开始非常地强烈了,这个片子如果大家有兴趣,可以找一些它的剧照和花絮来看,非常地华丽,华丽度已经是比刚才那个要强烈很多,但是它也容易看久了会视觉疲劳。

你看到这边你很明显能看到,我现在用线连出来的也是亮部色和暗部色,从色板上明显就能看出来,一个是偏黄、偏绿,然后偏橘色和偏粉红色,它把这个颜色的饱和度的层级拉开得非常过。你可以看到有一些颜色,它顶得非常高,是RGB色,用打印机的颜色有可能会打印不出来,所以说这个如果是印刷的话,有可能会偏色的。这就是他们要追求的非常强烈的一个视觉效果。我们是怎么样去参考它们,我们理解了这种受众和审美以后,我们是如何把它用到游戏里面的。

lazy.png

这两个就是我们游戏里面的角色卡洛琳,左边是她的原生状态,右边是她的其中一个皮肤。你看到左边这个角色,她全身都是一个非常冷的颜色,包括像暗部,暗部我们也故意把她调的是一个偏冷的紫色,就是为了让她的色彩能够统一,但是她色彩统一就会显得容易变得比较生硬。

从色彩的角度来讲,我们从暗部色,虽然说她是黄色的头发,但是我给她加了非常重的一个粉红色,其实是用了一个紫色,这是暗部做衬托。然后她的皮肤,就身上衣服的暗部,是用的冷色来衬托,达到一个统一。

另外一个,这是校园教练,他的头发你对比一下能够看出来,其实我们头发、皮肤和身体衣服的着装的暗部,都是一个统一的颜色。他看起来像是沐浴在阳光中的一个状态,其实你对应刚才我讲的亮部和暗部要有一个色彩的对比,是人为去处理的,同时它整体要有一个色彩的饱和度的对比,这个就是一个简单的技术说明,我就不说非常细节的内容了。

lazy.png

左边第一张图是实现出的效果,第二张图是我们在暗部色去做的一个处理。你可以看到头发的颜色、饱和度和色彩的倾向是非常重的,最右边的那张图,你可以认为是个shader。其中一个过程把黑色和白色作为阴影来分离开,在黑色区域把中间这张图,跟我们的亮部色去做一个叠加混合,就得到了最终的效果。我在每一个主题也都会给它加一个进阶的内容,这个进阶的内容,我们现在在做的过程中,我们会在这个基础上,留一些空间,做一些净化,是为了以后也要有一些技能会提升,我们的审美要有追求就会把它做一些尝试。

lazy.png

右边这张图是《爱,死亡和机器人》里面的一个静帧截图,这个是偏一点美式的一个画面效果。你可以看到角色白色的衬衣,往上有一个反射光,看起来是一个暖色的,如果你要是在正常的一个电影,或者说一个稍微写实一点的画面里面,你不会看到这么强烈的一个反光,这个是故意强调他的裤子,或者说整个环境对他白衬衣暗部的一个反射影响。

左边是我做的一个模拟,这个我可以把它称为一个卡通渲染的光线追踪,为什么叫卡通渲染的光线追踪呢,因为它的光线追踪的关系,并不是基于一个特别物理或者基于一个特别写实度的范围,而是我给它直接指定了一个渐变。

还是看左边那张球下面的图,灯光颜色我是给了一个暖黄色,模拟一个大概太阳的颜色,暗部的颜色是做了一个从蓝到粉红的渐变。这是什么意思呢?就是在它的暗部给它罩一层蓝色,就相当于罩一层冷色,这个冷色是用来跟亮部的暖黄色做对比的。粉红色它会产生什么效果呢?光线追踪它会不停地反弹,这个球的深色区域,让这个粉红色慢慢地渗透到暗部,包括它的投影,包括它的明暗交界线后面的区域,你会看到一个比较强烈的效果。这个工作我们现在也正在放在我们的角色实验当中。

lazy.png

这是一段视频,左边是我们现在的《王牌战士》的角色效果,右边是我们正在尝试中的一个画面效果。可以对比看出来,之前的赛璐璐的效果是很有他的特点和风格的,但是如果我们要继续往下走的话,我们想要更多的细节或者说技能提升以后,我们想要更多的表现力的话,我们需要做出很多尝试,也去找到它的一个平衡点。

你可以看到我们现在,正在进化中的就是一些明暗交界线的色彩关系,包括高光区域的一些处理,现在这个角色的色彩里面,就已经包含了我刚才说的光线追踪的效果。但是因为我们要在游戏里面实时地跑的话,我们会用到一些其他的技术来做,这是一个隐含的黑科技,这个东西是要做到很多。

我们首先要用一个非实时渲染的效果,来去给他做一个预演,然后再把它在引擎中去实现,但是这两个也是相辅相成的。为什么呢?因为我们有很多游戏出来以后。我们需要做很多宣传片也好,去做一些海报也好,我们都要在这个基础上去给它处理。这就代表了两种方向,一个是赛璐璐非常传统的一个做法,有一个是我们如果未来想要进化他的一个思路和效果。

lazy.png

我再跳到造型的部分,我还是从这张图的角度来讲。首先看右边那张图,这个角色是我们游戏内的渲染效果,从这边看的话,右脸颊有一个小的倒三角形,这个效果也不是说随便就能出来的,如果稍微懂一点打光的朋友,都能了解这是一个比较经典的伦勃朗的三点光源,产生的一个明中有暗,暗中有明的效果。

如果卡通渲染想要达到这个效果的话,就要谈到布线的问题。可以看到这个布线图,这个小的三角形是一定要切出来布线,去卡住这个光影的轮廓,你才能看到这个三角形,至于这个造型是什么样子,可能针对不同的角色有不同的情况,男性就要硬朗一点,女性就要小一点,但是这个小的桃心形,是一定要切出来的。

其次你可以看眼睛部分,眼睛应该不用多说,肯定是个球嘛,但是它是有一个像凸透镜的效果,如果你用卡通的效果去做的话,你要去模拟玻璃晶状体的效果,那是非常消耗性能的一件事情,而且从赛璐璐的一个卡通效果来讲的话,它不需要做得那么的物理。

所以说你看这眼球,其实我们是做了一个内凹的效果,它其实是一个凹陷的面。这个时候你再看它的光影,它看起来像是那个光被凸透镜,被一个玻璃球给折射进去了一样,其实人的眼睛还有一个很重要的东西,就是瞳孔。瞳孔是非常传神的东西,这个是不能被遮掉的,所以说这个瞳孔,我们是单独做的一个片放在前面的。

提到瞳孔,还有一个非常非常重要的点。瞳孔前面还有一个非常明显的高光点,这个高光点是非常能够表达人的心情,是心灵的窗口。那个小的高光点,你如果仔细看的话,我们也是做了一个模型在上面,可以用骨骼驱动,可以用Blend Shape来驱动,可以让它晃动起来,这个人显得水汪汪的眼睛。

lazy.png

再往下看嘴巴,嘴巴是有什么黑科技,或者说不一样的点呢?嘴巴的布线,如果稍微懂一点的话,大家也能知道嘴巴和眼球,都是有一圈一圈的口轮匝肌,眼轮匝肌的布线,这样的话它动起来会看起来更自然一点,就是光影会比较自然。

如果你要看我们现在这个卡通渲染布线的话,其实从鼻底到嘴唇的诊断是没有loop的,没有圈线的。为什么要这么做呢?就是因为卡通角色他在做一些表情,在做一些说话动作的时候,有时候那个动作是非常夸张的,这是第一。第二个就是我们的这种渲染方式,不像传统的那种渲染方式,它的光影非常明确,你可以看到右边就是亮部,左边是暗部,中间只有一条线过渡,它没有一个明显的光滑过渡,当这个人在做表情的时候,如果你的loop的圈线太多的话,它会产生很多不必要的瑕疵,那个会很影响表现,所以说这个嘴巴需要这么去做。

还有一些比较小的点就是头发下面,你可以看到我们每一个头发的下缘,都有一个小切角,因为如果这个角色从正面打光的话,你必须要给这个头发的底部一个暗部,否则头发就会像一个

薄薄的纸片贴在头上。有了这种小的一个切角,我可以给它人为的做一个假的光影,因为我默认这个角色不会经常做一些倒立,或者说一个非常奇怪的光影姿势,90%的状态就是站在那儿看着你,它这个光影在正常状态下,都会有一个看起来比较自然的明暗关系。

这个造型刚才讲的就是一个比较基础的黑科技的处理方式。还有一些更进阶的,为什么这就提到一个进阶的标题,因为涉及到修型和增强光影,特别是如果你还要想在游戏中呈现需要用到的技术,我们是蹚过很多坑才实现的。

lazy.png

先看一下这段,这个是我们角色五星的一个出场,但这是个视频我还得说一下,视频和真正游戏内的处理方式还略有不同。视频的自由度可能更大一点,因为它相对来说,我只需要在这个镜头看起来对,就OK了,没必要是360度转着看。如果是游戏内的话,就需要的更严格一些,如果你现在看这样,感觉还比较正常的话,我给大家看一下,没有处理过的一个状态。

lazy.png

初始状态就是左边这样,调整完是右边那样。首先你看炮筒,炮筒我们肯定不会单纯从这个镜头来讲,整个炮口性价比最高,同时表现效果最好的状态一个处理方式,就是直接画一张贴图,给它贴到炮口就可以了,匹配现在的光影处理就OK了。这个是视频里边,做得是最经济,最划算,而且效果最好的方式。

其次角色的处理,一对比就能看出来,为什么要做这个处理呢。

因为我们其实还是在用一个3D来去还原一个2D的效果,2D的效果是完全可以去画的,你觉得不好看就完全可以去画,但我们在3D中,如果这个角色动起来,还要转起来,我不可能保证它所有3D的光影都是非常完美的。

你可以看到,我并没有开模型之间的一个自身投影,我是用的面片去做了遮挡,包括胳膊,包括袖子,都在用一些处理方式来让它变得更好看。其实默认状态下的确看起来,有一些效果不够好,所以这个需要我们进行收尾。这个收尾的过程是有很多工作要做的。

lazy.png

这里我借用了一张日本杂志的一个图片来说明。这个增强透视呢,我们游戏中其实也用到了,但我们那个游戏其实是比较偏热血的,就不会有这么强烈的变形。这种动画片就属于比较夸张的动作幅度,而且变形力度都比较大,这个比较能说明问题。

你可以看到左边打了一拳,脸上肿起来了,其实直接放了一个mash在这儿,它天生有一个好处。因为它的光影比较简单,它的造型比较简单,我直接把这个mash贴到脸上,你看起来就像是脸上肿起来一块,我们在游戏中也是经常会用到这种,后面也会再提到。

左边那张也是非常经典的用法,你看把手,有时没做这种项目的时候,你也会纳闷,就为什么,有这个必要吗?非要把这个手拉成这样拍,有什么意义吗?你如果自己拍过照片,拍过合影,你能感受到,当大家都站在一排拍的时候,远处有人拿相机拍在两边的那个人,已经被拉伸得没法看了,就胖得不行,中间的人稍稍往后靠一点点,他脸就显得很小,就感觉比较消瘦一点,当镜头放到这么近,你再去拍的话,那个镜头透视大到非常夸张了,回去你可以自己拿3D相机试一下。

你看到右边那张,其实他的人物,就是站在前面的脸和手,还有后面的人脸,都没有特别大的透视变形,我目测的话,这个镜头FOV也就是50到60左右,就是正常的一个透视状态,所以说必须得把它做一个空间上的处理,你才能让它透视。如果你现在只是单纯地调相机FOV的话,看起来效果就非常不好了,这个也是用在视频里面的,或者说游戏里面也可以,但镜头一定要固定,这个是镜头固定的话就没问题。

我再跳到动画特效的部分,这整个部分都是属于进阶的一个内容,就是因为我刚才说的,用到的那个技术是比较复杂,我们花了很多时间去做。如果在游戏中用的话的确是比较难的一个点。

动画中间帧,我们传统一些游戏的,我不说黑科技了,就是正常的一个做法,动画中间帧都是直接用差值来算,或者说也是动画师去做。但如果我们要做这种二次元,或者说有一点性格的动画的话,它的动画中间帧,就有很多的处理方式了。

lazy.png

这个是《爱,死亡和机器人》里边的一段追逐戏,一闪而过,如果你看过这个片子的话,可能这一下过去,你都没有意识到它中间发生什么。但是你能感觉到,他的情感的表达比较强烈。这个是发生了什么事情呢?

lazy.png

你可以看这图片,第一张还是正常的一个状态,这个人在跑,但是他在追的时候,他非常着急的想要追过去,面目狰狞,这后面三张图都是直接给它夸张化了。动画中间帧如果插入这种效果,一闪而过的话,表现力非常地强,但是它用的时候也要很控制才行,因为它是一个整体调性的表达,就是看你是否要加这种动画中间帧。我们游戏中也用到一部分,但是没有用到它这么强烈,后面也会提到一点黑白闪,跟刚才的动画中间帧蛮像的。

lazy.png

黑白闪可以认为是整个镜头的一个中间帧,黑白闪这个叫法是日本的叫法,但是我觉得用这个片段来跟大家讲的话更清楚一点。这个是《蜘蛛侠:平行宇宙》的中间一段,这个比较明显了,往那闪动的时候那一瞬间,它也是强化那一瞬间动作的一个夸张度,这个夸张度并不是说他动作幅度有多大,而是说那一瞬间的情感表达要够强烈,你看它直接就是用了一张。

其实这个电影里边用到了很多如果有兴趣大家回头再翻翻看的话,它插入了很多美漫的表达方式,美漫在处理很强烈的性格的时候,会用一些比较潦草的线条来表现强烈的情感,这个就被用到电影里边。

lazy.png

我们在《王牌战士》的时候,是用得比较少黑白闪,我们另外一个项目,《一人之下》在做表演的时候,比如说有在龙虎山打斗,就是那种下雨天突然间来一个闪电,整个画面都是变成了黑白,但那个黑白可能就只有三四帧,那一瞬间,啪,一个黑白闪,感觉那个味道马上就出来了。这个我就把它归到特效里面,因为我们是特效同学来去做这件事情的。

lazy.png

还有一个叫法,可能没有做过这一类的同学就不知道,这个词叫帧内,帧内你可以认为是卡通版的一个动态模糊。如果现在你在PhotoShop,或者说你如果是在游戏里面,如果可以打开这个动态模糊的话,它其实就是一个功能,开开以后就自带动态模糊,它会让他在运动的时候,看起来有一些模糊的效果,但你要回到我们刚才看的动画片里边来说,那个时候在胶片上画一个模糊的感觉是比较难的,所以他们创造了一个词,就叫帧内。就是在两个帧之间,由于这个手的摆动,形成了一个视觉残留,那它就不在这个过程中把这个手整个画成一个整体。

lazy.png

我选了蜘蛛侠的平行宇宙,正好有个特别合适的例子,因为这个小孩在这个平行宇宙里面。有一个二次元的你认为这个是蜘蛛侠的一个精神集成。这个电影里边对他的表达,都是一个卡通的做法。可能一晃而过,没有注意。

lazy.png

我截了几张图,这个相当于是它的二维动画版的一个动态模糊效果,它是把整条线都给非常具体地给它呈现出来了,当这种帧内充斥在这个项目当中的时候,你会能明显地感觉到跟写实游戏的一个很不一样的地方,我刚才提到的所有的动画,就是从中间帧到黑白闪到帧内,它都用到了我刚才说的那个技术,后面我会提到这个。

lazy.png

在最后有一个特效,比较好玩的效果,大家应该也会非常熟悉了,就是表情线。脸上滴一滴汗,一头黑线,有点小红晕都是可以做的。你看左边就是表现出来效果就比较含蓄了,我们这个游戏做得是比较含蓄的,你看右边那个不起眼的几条线,有红线,有黑线,还有一些面部皮肤颜色的线,这个是还挺重要的一个东西。

我的这个线可以把它放大,把它放在屏幕的周围,它就变成了速度线,你仔细看他的嘴角的话,就是左边咧开嘴的嘴角,那嘴角的线,其实也是用我们的线摆上去的。

还是回到刚才那个你用3D模拟的时候,它不可能在所有视角看起来都是那么的自然,我们需要有一些工具去修补它的瑕疵。比如说他咧开嘴以后,他嘴巴的边缘就缺少一些黑色的区域,来跟他白色的牙齿来做区分,我们只能用这种方式去弥补它。包括像刚才说的帧内,也可以用这个东西去做。

lazy.png

最后总结一下说,这个黑科技到底是什么呢,其实我做了这么久的项目以后,这种品类的项目我发现一点,首先你要理解它的整个二次元也好,或者说这种品类游戏的审美,你能提炼出一些东西来,同时你还需要一些技术的积累,来去表达,来去实现这些东西。我后面提到的动画和特效的一些做法,都涉及到用一个Blend Shape的技术,那个也是我们自己花了很长时间,去研究,去打磨,最后实现出来这些效果。

有时候你在做的时候,你有时候也会迷茫,所谓的黑科技,就是因为我们在做的时候,并没有一个前人走过的。当然也有一些,我们能够看到行业中,有很多人在去研究这些,已经开始越来越多的人去研究这个技术了。但其实它并没有成型,相对PBR的一个制作思路来说,其实我们这种卡通的做法是充满了一个未知的变数,我说这是黑科技,其实就是我们自己尝试,在寻找各种各样的工具,各种各样的道路来去实现我们想要达到的效果。

我们想要达到的效果是什么样的,回到一开始的那个效果,就是我们现在魔方在做的很多项目,也是有国漫的动画IP,有日本的动画IP,他们都有一整套传统动画的审美,这跟写实的游戏和电影都是不一样的。我们就想能够通过这种,我们研究出来的工具,能够把一个非常好的画面效果呈现给大家,这个基本上就是我今天想要跟大家分享的一个内容。

刚才我在做演讲的过程中,后面也有很多人提一些问题,我这边挑了两个问题,我来回答一下。

lazy.png

问题一就是卡通渲染在画面表现力上有什么优势,玩家为什么会认可这种表现形式?

你还可以把它类比成影视行业,卡通渲染现在在做的事情,就是在还原一个我们影视行业有过的一个表现形式,比如说我们看过

皮克斯的动画片,也看过梦工厂的一些动画片,它跟传统的,写实的或者更加写实一点的动画是不一样的,因为它有更强烈的表现力,或者说它有更夸张的一些表现手法,而且色彩感也会比较强烈,会有很强烈的个人风格,如果你对这种表现非常有兴趣的话,你会体会到一种跟传统,或者跟写实的题材的作品,不一样的一个感受,我们想做到的也是这么一件事情。

玩家现在认可这种表现形式,其实也是现在市场上可以很明显能够看到,你在做一个作品的时候,你会有自己的态度,同时你会有自己的表达,如果这种态度和表达是能够获得很好的效果的话,玩家是会认可这种表现形式的。

还有一个问题是非写实渲染的研发难度高吗?要运用到哪些技术或工具?

其实非写实渲染的研发绝对难度并不高,就是它用到的技术不是

现在我在做的,可能仅限于PC和手机平台的研发,它其实都是一个实时渲染的,一个非现实渲染的框架里边。因为我们这边TA的同学,我也跟他们有很多交流,其实真正用到的shader的复杂度,就是单纯从复杂度来讲并不是太高,但是有一点,它需要你把技术和艺术做一些结合,或者说两边都要懂一些。

用到的技术和工具,刚才我也提到了一些,我们大部分的技术和工具是靠自己的团队来搭建的。这套整个的工具流和技术流都是我们自己研发的。这个难度高可能高在这,就是没有很多现成的工具可用,我们都是要基于我们想要的效果,包括我自己。我现在跟过两三款这种有风格化的项目之后,我也感觉到每一个项目的技术,它有一个叫work flow工作流和工具流。工作流和工具流都有些不一样,是针对不同项目的不同要求,它有些区别。

好的,我的分享今天就到这里结束了,非常感谢大家的聆听,希望大家过一个愉快的夜晚。

如若转载,请注明出处:http://www.gamelook.com.cn/2020/12/407497


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK