凤凰直播电竞平台

凤凰电竞
分享电竞最新资讯
凤凰直播电竞平台-国内最专业的电子竞技直播网站

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

更新时间:2020-12-11 19:32点击:

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

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

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

以下是演讲实录:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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