ue4显示数字_UE4游戏制作以及渲染心得整理 - 卡通渲染技术总结(2/8)

ab433230c72ed3d9d6df31b28c31a138.png
写在本文开头,本文所涉及的卡通渲染技术仅使用了基于UE4的蓝图并在后处理阶段完成。因此在许多方面做不到非常深的自定义化,如需要对卡通渲染进行深度自定义的操作,本人还是建议修改引擎添加光照模型以实现卡通渲染。
本文谈论的是偏General的卡通渲染,并非日式或美式特化的二刺螈风格。

在写卡通渲染技术之前,首先我们思考一个问题——什么是卡通渲染。前人总结其实也比较多,我从我个人的理解来分析一下。

首先我们随意地找一张知名大厂某三渲二游戏的截图:

a670d051c74e0d7a877e4ee2406a2115.png
《原神》 - 甘雨

再找找霓虹使用三渲二技术制作的动画:

54f88dc2e777772083fc0307a1573352.png
《乐园追放》

以及某独立游戏的CG动画:

92746831285a7c8eabdf48d503a99543.png
《Hades》

从这几张图综合来看,卡渲最关键的有三大因素——对比度分明的色块、粗细分明的描边线条以及非真实的光影效果。在学术上卡通渲染为非真实感渲染(Non-photorealistic rendering,即NPR)的一种特定形式,卡通渲染也被称为Cel Shading、Toon Shading等等。对于最基本的卡通渲染,我们可以简单地认为它由大片色块绘制(Cel Shading)以及描边绘制(Outline / Inner Outline)两部分组成。

Cel Shading原理

Cel Shading,顾名思义是制作固定色块渐变阴影着色的方法,与Bliin-Phong和PBR不同,Cel Shading着眼于如何将光影呈现为两层乃至更多层的固定色块,其特征为明暗区域存在明显的分界线。

以下样例图可以明显看出动画角色绘制中的非真实感阴影区域。

455de5932d84bebb1777664bf46eabbc.png
「ご注文はうさぎですか? BLOOM」の第3話「世界のすべては私の経験値」

74cea5a92fe7c1351dbf0539f19ed01d.png
《Curse That Magic Cat》游戏中猫猫的颜色渐层效果

从光影理论简单分析一下渐层是怎么制作出来的,首先我们按照正常的光照模型制作正确的光影效果:Bliin-Phong、PBR这些都是制作真实光影效果的光照模型。得到正确光影渲染之后,我们根据颜色范围将不同颜色划分到不同色块的区间,这一步也被叫做ColorRamp,以下用一个简单的映射图来表示Cel Shading的简单流程:

68835aee5824224ea14990fe5eefaf46.png
  1. 按照正常光照模型去计算照亮区域的强度,一般会归一化到0~1之间。实际计算中,部分模型超出1的部分会归为高光区域(Specular)进行计算,在卡通渲染中的高光一般就直接选择固定色了。
  2. 将光强通过ColorRamp划分至不同颜色区间,之后根据重映射后的光影数据参与diffuse、specular等实际颜色的计算。

这里我也渲染了两张图来展示真实渲染和卡通渲染的颜色区别:

61aad50f610bf4c6cb8ec73dc628f3b7.png
BSDF 真实物理渲染

19be1e6f838a548fa8db8c033e0254ee.png
采用ColorRamp后得到的卡渲效果

UE4中的后处理Cel Shading

上述的流程是基于基本光照模型,添加ColorRamp过程生成的。然而在UE4中不修改引擎无法对光照模型对进行修改,所以CelShading只能在后处理中完成。以下将分析后处理如何进行Cel Shading。

我们都知道,画面中显示的最终颜色是贴图颜色(diffuse)乘上了某个光影明暗系数得到的最终值。那么我们在后处理中实际需要还原的就是光影系数的值。幸运的是在UE4的后处理中,我们可以获得场景的最终颜色以及原始贴图颜色,因此我们可以操作得到场景中的光影系数。即使用最终色除以贴图色,则可以得到光影系数。

c99d382b89689d529ef33164fce270da.png
颜色的基础计算公式

e4f8fac6ce9d6c81320cdd4b46d96f46.png
UE4中的实现,PostProcessInput0为场景的最终画面颜色,DiffuseColor为贴图颜色

eb15c0f38f5e813c9b3f7a8b3c22cd96.png
PostProcessInput0

b1d1fafbab49945fdca404059f07fd16.png
Diffuse Color

d5d9c29ea17470daa68c42dd95de72bb.png
计算得到的Lighting Factors,此图偏紫是由于PostProcessing中添加了紫色的Gain

至此,基础的卡通渲染效果就能实现出来了,根据需要我们可以采用不同的colorramp以在场景中达到不同的视觉效果。

描边原理及实现

描边,即对对象中特征明显的区域进行划分,描边可以用于对象与对象间的区域划分——即对象外描边,以及对象内部的轮廓勾勒——即对象内描边。

而描边同样有两种方法可以走,一种方法是在渲染对象的时候直接根据其法向量进行计算进行模型外扩,渲染两次来实现描边的效果。这种方法对模型的精度依赖较高,在顶点数较少以及特殊视角的情况下会产生不正确的描边效果。第二种方法则是使用数字图像处理的方法,采用描边算子对实时RT检测边缘从而实现描边的效果。

本文只讨论采用算子的描边效果,对法线外扩方法感兴趣的读者可以搜寻其他相关博文了解法线外扩的方法。对于Sobel算子,它可以表示为

(Horizontal Pass)和
(Vertical Pass)

以下是采用Sobel算子计算得到的描边效果图

e8530e8af3c5b6a9e9d5386d8bc5b8fb.png
Original Image

aec3f2767cd55aac1dc8ff85e123af6a.png
Image applied sobel filter

可以看出,Sobel算子可以得到比较好的描边效果了,但我们实际在游戏的后处理中怎么使用呢?对贴图颜色直接使用描边算子显然不是一个很好的选择,一方面场景中可能会产生多个对象基础贴图颜色相似或相同的情况,而另一方面,对象本身也有可能存在渐变色,这给描边带来很多的困难。

一个比较好的解决方法是使用场景的深度图作为描边的基础,根据深度值可以很容易将场景中多个对象区分开来,从而实现简单的描边效果:

1870475c9b84ef10ba8865b3cee82b6a.png
Depth Based Outline

以下为Sobel算子在UE4中的实现:

45638abcaf427fc4599fe33a0ccc2e6a.png
蓝图较复杂,可以在这里查看:https://blueprintue.com/blueprint/xh_790iz/

总结

  1. 最基本的卡通渲染由Cel Shading和对象外描边两部分组成,在UE4中可以直接在后处理过程实现。
  2. Cel Shading的光照数据在后处理过程中实际是采用最终渲染色/贴图色的方式获得的,但实际上这并非真实的光照数据,特别是当场景中存在半透对象,以及高光过曝的时候,取得的数据就会有问题。因此使用后处理方法计算Cel Shading需要额外注意不能过曝,以及对于高光实际还是采用ColorRamp的方式来做。
  3. 对于对象外描边,本文仅提及了最基础的后处理方式——Sobel算子对深度图数据进行描边,但在实际应用中,会存在同时使用模型外扩、后处理描边、乃至多pass后处理描边的情况,视项目效果需求的不同会有很多补充方式增添描边的细节。可以参考
Lele Feng:[Graphics Study] Ni No Kuni 2(二之国2)​zhuanlan.zhihu.com

以及

Ni No Kuni 2: frame analysis​blog.thomaspoulet.fr
a5ce7f3701a10ff84b38726f61e78183.png

配套阅读。

4. 对于实际项目美术的需求,可能会添加RimLight、Bloom、高光处理等多种其他的效果,如需在同一个pass中进行,只需都写在同一个Material中即可。

因为2077的发售本技术总结鸽了两周,不过还好抽空整完了。与其他知乎大神的卡通角色渲染文不同,本文还是着重在分析基础知识,希望能帮到一些正在入门卡渲的萌新。

如果需要实际的项目及Material进行参考,个人比较推荐这个项目,除了基础的Cel Shading和Depth Outline外,项目中还实现了内发光、Rimlight等调节场景氛围的效果。

https://github.com/CatDarkGame/PostProcess-CelShading​github.com

那么朋友们,下期见!~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值