怎么让3D游戏看着像动画?「三渲二」是怎么做的?

用户头像
上海/UI设计师/186天前/4068浏览
怎么让3D游戏看着像动画?「三渲二」是怎么做的?
在前期关于日本动画画风演变的视频中,我们提到过一个重要的概念——赛璐珞。它指的是将角色绘制在透明塑料片上,再叠加到背景上进行拍摄,与如今的图层技术类似。
赛璐珞所形成的画面质感深刻影响了后世的创作者,即使进入数字作画时代,这种时代特有的上色方式与审美偏好仍然在延续。
这种风格对游戏行业也产生了深远影响。许多知名的3D二次元游戏采用了模仿二维动画的渲染方式,即常说的“三渲二”或卡通风格化渲染,其专业名称为NPR(Non-Photorealistic Rendering,非真实感渲染)。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyMTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
卡通渲染究竟是如何实现的?又经历了怎样的发展,才成为如今的主流风格?本期将以通俗易懂的方式,带你深入了解卡通渲染的原理与发展。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
(本文约4000字,阅读完需要10分钟)
01 为什么要有描边?
2000年,首款采用卡通渲染的游戏《Jet Set Radio》(SEGA Dreamcast)问世。其画面风格与街头涂鸦主题高度契合,充满漫画感。
从这款作品中可以看出,卡通渲染自诞生之初便确立了至今仍在沿用的核心特征:模型的
「描边」
和赛璐珞风格、边缘明确的
「影子」。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyMjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
现实中的物体并不存在明确的“描边”。在素描中,老师常常强调不要刻意去描“边”。这是因为自文艺复兴以来,画家们逐渐认识到,通过光影与明暗的过渡来塑造体积感更能表现真实。因此,在描绘写实题材时,艺术家们通常会尽量避免描边的使用。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyMzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
但描边确实是一种能够快速呈现物体轮廓、降低创作成本的表现方式——简单来说,就是更好画!在儿童画及早期文明的绘画作品中,清晰的描边表现十分常见。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
赛璐珞的动画和一些卡通漫画就是利用描边,低成本快速的绘制出与背景清晰区分的角色,而中间光影的部分大多用色块填充,角色看起来也更有平面感。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
通过对比可以清晰地感受到差异,尤其是在三渲二的卡通渲染中,是否使用描边会带来截然不同的视觉效果。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
ARC的《罪恶装备》系列可谓是三渲二画面表现的巅峰代表。
收藏
02 描边如何实现?
ARC对卡通渲染的制作精度要求极高,每个角色的制作周期均超过六个月。为了让描边呈现出更丰富的细节,技术美术本村·C·纯也(Motomura C Junya)对传统的卡通渲染描边技术进行了改良。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
传统的描边渲染方式其实比想象中简单:为模型额外渲染一个背面,将其向外扩张约0.5至1.5个像素后填充为黑色,即可形成描边。
这种方法被称为
背面扩张法
,特点是效果稳定,能够生成统一且清晰的外轮廓线。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
然而,这种方式也存在局限——仅有模型外轮廓线会显得画面层次不足。为此,本村提出通过检测模型各面之间的
法线差异
来判断物体的边缘位置,并在这些区域额外绘制描线。
这一思路发展为当下二次元游戏普遍采用的技术组合:
背面扩张法 + 预处理边缘检测
,用于生成更丰富的描边效果。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
这里就要提到一个非常关键的概念——
法线(Normal)
。最早它其实是一个数学里的定义,可以理解成:
垂直于某个平面的那根“看不见的箭头”
。有了它,我们就能用数字的方式,描述一个面的
朝向
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyNzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
它会让渲染算法去判断
相邻面之间的法线方向差异
——如果两个方向之间的角度大于某个阈值,算法就会认为这里是
物体的边缘
,或者是
模型表面发生了褶皱的地方
,于是就会在这一带
自动生成描边
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyODA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
不过这种“线条粗细统一、颜色一致”的描边方式,显然无法满足大部分玩家的审美需求。在《罪恶装备》中,本村对描边效果进行了进一步优化与进化:通过结合
法线方向
视角方向
,动态控制线条的显隐与粗细变化:当表面法线与视线方向接近90°时,即位于物体轮廓边缘的位置,线条会变得更粗、更明显;而当表面正对摄像机时,线条则逐渐变细或消失。
此外,系统还会根据镜头距离自动调整线宽——近处线条更粗,远处线条更细,从而实现更自然、富有层次感的描边效果。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyODQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyODg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
除此之外,线条的颜色还可以配置特定的颜色,不再是单一的黑色描边,而是可以带有柔和过渡的
笔压变化的线条
。最后,线条还能与光照结合——在明亮的一侧弱化线条,在阴影一侧加强,甚至与阴影边界自然融合,形成一种极具手绘感的“色边”效果。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyOTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgyOTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
当然,描边的使用还需根据游戏的美术需求进行权衡。线条过细可能难以辨识,而过粗则会让画面在“平面感”和“立体感”之间显得不协调。
甚至有些卡通渲染的游戏几乎不使用描边,例如《塞尔达传说:荒野之息》。若想在无描边的情况下仍保留“动画感”,就需要依靠更加独特、富有表现力的光影设计来实现。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
 03 赛璐珞渲染效果如何实现?
这种风格违背了真实光照的物理规律,也成为卡通渲染中的另一大技术难题——如何实现这种
二分式阴影
的表现效果呢?
核心原理其实很简单。
我们拿定义了卡通渲染的游戏《塞尔达传说:风之杖》为例。在3D渲染中,电脑会通过
光线方向
与前面提到的
法线
之间的夹角来计算光照强度。
通过物体表面上的众多法线和光线的角度,电脑就能知道每个面应该渲染成什么颜色。法线与光照方向越接近,代表这个面越朝向光源,光照越强。物体表面法线角度的逐渐变化就能渲染出了符合物理光照的效果。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
接着我们设定一个法线光照角度的阈值,超过阈值直接显示成白色完全受光、低于阈值显示成黑色,完全背光。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
最后,我们把亮面和暗面分别替换上不同的颜色,并叠加到模型原有的颜色上,赛璐珞风格光影材质效果就实现了。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
这就是卡通渲染,也就是 Cel Shading 的原理。而这一整套让电脑“学会画画”的逻辑,其实都属于一个学科——
计算机图形学(Computer Graphics)
,简称CG。
其中,着色器(Shader)是运行在显卡上的一段算法,用于指示计算机如何计算物体表面的明暗与反光效果。与写实风格不同,卡通渲染的着色器并不是在还原现实的光线,而是给美术设计师更多自由,让他们能自己定义光影和颜色,让画面更有风格。
 
04 二游角色的面部阴影形状如何优化?
可如果直接将卡通渲染着色器(Cel Shading)应用于模型,效果往往并不理想。在当今的二次元游戏中,角色的脸部阴影在卡通渲染着色器下,
不能全靠模型原本的形状自动生成
,否则阴影变化稍有偏差,就可能导致画面失真,就容易
崩坏出戏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
二次元角色的面部阴影本质上是一种经过人为提炼、具有审美特征的造型化阴影。那么在3D模型中,如何既能还原这种特定的阴影形状,又能使其随光照动态变化,成为卡通渲染中的关键问题。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
罪恶装备的做法是:
模型拓扑+法线修改
简单来说就是把脸上的面拆分成几个人为规定的阴影形状,并调整统一这个区域内所有法线的方向,这样光线打过来的时候这个区域就是一个完整的形状了。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
但这也会有个问题,光影变化的时候阴影会跳来跳去,不够自然。
为了追求更自然更好的面部阴影效果,米哈游使用了
“距离场面部阴影”(Distance Field Facial Shadow)
的技术。就是让美术先做好几个影子形状的关键帧,然后靠算法补足中间的阴影形状就可以了,可以说是相当符合了做动画的思路。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
面部阴影优化前对比优化后
收藏
05 二游表现细节的突破:NPR+PBR
有些人可能会疑惑:那为什么《原神》或《绝区零》等作品中,角色的二分阴影并不明显?那肯定是不会的,这种赛璐珞的质感,那真是祖宗之法不可变。
当去除阴影叠加色、固有色与高光后,那种熟悉的赛璐珞质感便重新显现。国内二次元游戏的卡通渲染美术风格,实际上已经发展出另一条更精致、多层次的演化路径。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzMzY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
二分阴影+固有色=最终效果
收藏
回到最初提到的三渲二巅峰之作——ARC的《罪恶装备》,仔细观察角色的身体与服饰细节,就能意识这种风格在表现细节上是有极限的。若想突破这一限制,只能跳出传统的卡通渲染框架,探索更灵活的表现方式。
国内的二游在角色建模上,单看面部,经典的大眼睛小鼻子,是很招牌的二次元人物面部的画法,甚至只看人脸的单帧,还平面化的感觉,身体上的细节也比较有限。早些年这样做是可以的,毕竟要对大家的硬件都友善一点,随着这些年芯片性能不断的突飞猛进,画质和能加载的场景可以更丰富了。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNDA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
那厂商不在画面表现力上做出进步,玩家那一关也过不了了。场景和空间上不一定能做那么复杂,毕竟场景的美术做起来就是个超级无底洞,美术资源有多少吃多少。而且还有的一点,得保证手机端和一些性能没那么强的手机起码能开游戏,场景的复杂程度需要一定的限制。那就只能在玩家最常使用的人物上,做出更丰富的表现了。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNDQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
所以就形成了这种人脸还是很二次元的做法,但身体和服装的配饰不断的加细节,加更丰富的材质,金属、丝绸、皮革、抛光的配饰啥都有,不同的材质也有不同的光影表现。人脸是平面二次元的感觉,但身体又更偏向写实(PBR)的细节程度,就成了我们现在比较特殊的视觉表现风格。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNDg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNTI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
那身上这么多细节和不同的材质,要是还想在一些更细小的地方再加细节有什么办法吗,其中比较有代表性的就是
Ramp颜色采样技术
。简单来话说就是用一张美术画好的渐变颜色图,把模型上从暗到亮的光影颜色映射出来,这样明显颜色就更生动丰富了。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNTY=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNjA=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
在《原神》里,其实也有一整套 
Ramp 颜色采样的渐变贴图
,用来控制阴影的颜色和过渡方式。
这张贴图从左到右,就代表了从
暗部到亮部
的光照颜色。渲染时,系统会用一种类似“正片叠底”的方式,把这条颜色带叠加到模型原本的颜色上,所以你看到的阴影颜色,其实和贴图上的并不完全一样。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNjQ=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
类似于绘画中,暗部通常会加一些蓝色和紫色,高光因为受到太阳照射着偏暖。而下方这些一条一条的横带,就是美术为不同时间段、不同环境设计的阴影色,像是黄昏的阴影就是桔红色,夜晚的高光就是蓝色。他们还能通过调整渐变带的宽窄,来让阴影变得
更硬
更柔和
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNjg=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
06  艺术与技术的螺旋上升
19世纪摄影技术的出现,可以说是艺术史上极其重要的一环,不仅仅是技术上的突破,它更深层次的影响到了绘画艺术领域。
因为已经有技术,让画像更像本人的方式已经出现了,画家在追求“像”这件事上,效率已经不够看了。画家们开始追求表达“画得像”之外的事情,印象派、野兽派、抽象派、现代主义相继诞生,把绘画带到了一个表达更丰富的领域。
现在视觉表现的技术手段是越来越丰富,过去的人们是要用这些手段,尽量去贴近“真实”。而我们现在用了一种技术反过来模拟,想要它看上去是假的,甚至有会做出一些略微卡顿的感觉 。
这不是简单地“回到2D”,而是站在3D的技术之上,再现和突破2D的表现力。艺术与技术一直就是彼此缠绕、协同进化,形成螺旋上升的关系。而在我们现在这个时代,这样的进化会越来越有趣。
怎么让3D游戏看着像动画?「三渲二」是怎么做的?(图ZMTUyNzgzNzI=) - 教程 - 站酷设计师叶子_Studio原创素材 - 站酷ZCOOL
收藏
99
举报
|
77
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
手表表盘UI系列
拟物风质感写实UI卡片合集源文件
我的钱包-UI界面设计-app
【新年UI图标】珠宝icon
抽象液态渐变UI背景模版
盲盒APP UI设计
Security Camera UI kit
高级表盘系列UI源文件
UI 登录界面设计模板包
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
UI应用平面图标
【新年UI图标】汽车icon
3D渐变流体抽象矢量UI背景图
新能源APP应用UIKit
【新年UI图标】会员icon
科技医疗透明柜UI界面设计
【新年UI图标】影音icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】秒杀icon
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
UI界面 组件
你可能喜欢
相关收藏夹
教程
教程
教程
教程
教程
4726
大家都在看
登录注册