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