vue-markdown-loader 渲染出来的不一样_【04】从零开始的卡通渲染-PBR篇

f37deb3f-5d1f-eb11-8da9-e4434bdf6706.png

专栏目录

2173:【01】从零开始的卡通渲染-描边篇​zhuanlan.zhihu.com
f47deb3f-5d1f-eb11-8da9-e4434bdf6706.png
2173:【02】从零开始的卡通渲染-着色篇1​zhuanlan.zhihu.com
f47deb3f-5d1f-eb11-8da9-e4434bdf6706.png
2173:【03】从零开始的卡通渲染-着色篇2​zhuanlan.zhihu.com
f47deb3f-5d1f-eb11-8da9-e4434bdf6706.png
2173:【04】从零开始的卡通渲染-PBR篇​zhuanlan.zhihu.com
f97deb3f-5d1f-eb11-8da9-e4434bdf6706.png

序言:

在上一篇中,介绍了有关边缘光和Bloom后处理效果,并最终完成了题图的渲染。本节打算讨论一下二分色卡通渲染的局限性,以及将卡通材质和PBR材质进行结合的一些方法。我一直在思考如何提高卡通渲染的表现,目前觉得通过PBR材质对卡通渲染不足的地方进行补充,是能够提升卡通渲染表现的一个方向。

卡通渲染的材质表达

二分色的卡通渲染有哪些不足呢?

首先我们思考一下前面介绍的基于二分色的卡通渲染都可以表达哪些材质。

布料和皮肤材质

fb7deb3f-5d1f-eb11-8da9-e4434bdf6706.png

布料和皮肤,可以通过二分色比较好的表现出来

金属材质

fd7deb3f-5d1f-eb11-8da9-e4434bdf6706.png

金属也可以通过二分色表现出来。通过手绘控制高光范围,可以一定程度的表现金属的各向异性高光。

清漆材质

fe7deb3f-5d1f-eb11-8da9-e4434bdf6706.png
摩托车金属排气管的车漆效果

二分色还可以表现一些表面有半透明层的多层材质。比如瓷器表面的半透明釉质,漆面上的半透明涂层。可以用于表现光滑的皮革、金属等。这个效果我通过对高光公式做一些trick来实现,将高光公式中的法线点乘半角向量换成法线点乘视线方向。

       half3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);
       half3 worldNormal = normalize(i.worldNormal);
       half NdotV = max(0, dot(worldNormal, viewDir));
       half ClearCoat = ((pow(NdotV,_ClearCoatGloss)) > (1 - _ClearCoatRange) ? _ClearCoatMult : 0);
       half3 clearCoatColor = _ClearCoatColor * ClearCoat;

应用在人物手臂的皮革部分,效果如下

ff7deb3f-5d1f-eb11-8da9-e4434bdf6706.png
手臂上皮革袖套的漆面效果

以上可以看出,通过二分色的方式,我们可以表现皮肤、布料、金属、皮革的效果。这些效果能够基本满足角色和服装的表现需求。

那么如果我们把二分色用于场景会怎么样呢。可能会变成类似于下面的效果。

017eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
很多其他的材质难以表现质感,只能脑补其是一种什么材质

场景所包含的材质非常丰富,只靠二分色难以表现足够多的材质。
卡通渲染一方面减少了色阶,营造出卡通的风格。但另一方面也因为色阶的减少,难以表达多样的材质。

越是思考 ,就越会发现卡通渲染是有极限的,除非...

咳,引入本篇的主题了,会去考虑卡通渲染与PBR的结合。一个原因是因为二分色的卡通渲染在表达多样性的材质上面有所不足。人物还勉强够用,但是场景可能就不够了。而这方面PBR材质,非常擅长表现出不同材质的质感。目前出现了一些将卡通渲染的人物和PBR材质场景进行结合的游戏,如《蓝色协议》、《二之国》等,取得了不错的效果。

037eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
《蓝色协议》和《二之国》

卡通角色和PBR材质场景的结合

PBR(Physically based rendering),采用了物理真实的光照模型。和卡通渲染所属的NPR领域看起来是2个路线。不过两者也是进行结合的。虽然使用了PBR的光照模型,但是可以也可以营造出有一定卡通感的场景。关于风格化的PBR也是我还在思考的一个方向,稍后再做展开。这里先讲一些,我觉得能够帮助卡通角色更好的融入场景的方法。虽然场景可以有一定卡通感,但是不可能做到像人物那么卡通。直接把卡通感强的人物放到相对写实感强的场景中,会出现人物和场景融合不到一起的情况。使场景中的人物看起来有割裂感,不太自然。这可以通过一些其他的方法来弥补。

柔化明暗边界

前面的章节有介绍过赛璐璐风格的卡通渲染和厚涂风格的卡通渲染。明暗交接明显的赛璐璐风格的人物会比较难融入到非卡通的场景中。但是可以通过柔化明暗交界,让风格往厚涂的方向过渡,这会让人物和场景看起来更统一。《原神》中的角色对明暗边界进行了一定的柔化,使得角色和场景的融合感更强。

057eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
偏向厚涂风格的人物比赛璐璐风格的人物更容易融入场景中

人物和场景受相同光源的影响

为角色添加多光源的支持。在场景中添加多个光源,同时作用于场景和角色。如果场景和角色有同样的受光,就能提高两者的融合感。

067eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
角色和场景有共同受光,能够提升两者的融合感

087eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
《二之国》一开始让我感觉到角色和场景风格的不统一。后来看到角色和场景受到相同的光照影响,让这种感觉减轻了不少

重力眩晕的风格化PBR渲染

097eeb3f-5d1f-eb11-8da9-e4434bdf6706.png

这里想说一下我很喜欢的一个主机游戏 《重力眩晕》。它的渲染可以说是风格化PBR的一个实现。使用PBR的光照计算,再通过减少色阶来增加卡通感,做出了很有自己风格的画面。不过因为减少了色阶,导致材质的表达上有些不足。如衣服上的金属材质,并不太有金属的感觉。这也是通过减少色阶来实现风格化PBR的一个问题。如果既要体现出卡通感,又要保留PBR丰富的材质表达力,做到兼得鱼和熊掌,还需要想其他的方法。

人物自身卡通材质和PBR材质的结合
那么有没有其他的方法,能够营造卡通感,并且保留PBR的材质表达力呢。 这里看一下另一个相对近期的游戏《嗜血代码》。

0a7eeb3f-5d1f-eb11-8da9-e4434bdf6706.png

人物的皮肤是偏向二分色的卡通材质,服装方面则采用了PBR材质。这也是卡通渲染和PBR结合的一个方法,用卡通渲染来表现它比较擅长的皮肤、布料等材质。然后使用PBR材质来表现其他对材质感要求高的部分。

在移动平台上,我看到《战双帕弥什》也采用了类似的方案。角色的皮肤、布料等材质使用了二分色的光照计算,而金属和皮革的材质则使用了PBR的光照计算,通过蒙版对两种光照计算进行区分。即保持了人物的卡通感,又通过PBR材质表现了卡通材质难以表现的材质感,达到了不错的材质效果。

0b7eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
PBR蒙版(左图),白色对应PBR光照计算区域,黑色对应二分色光照区域

0c7eeb3f-5d1f-eb11-8da9-e4434bdf6706.png

在PBR材质部分将PBR光照计算和二分色光照计算的结果做颜色混合,可以实现一个有些卡通感的PBR效果

0e7eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
二分色光照计算(左)和PBR光照计算(右)

0f7eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
颜色混合后的渲染效果

117eeb3f-5d1f-eb11-8da9-e4434bdf6706.png
通过和PBR的结合,使得角色可以表现出二分色渲染难以表现的材质

总结

在本节中,介绍了二分色的卡通渲染的局限性,使卡通材质和PBR材质能更好的融合在画面中的一些方法,以及市面上的一些游戏是如何通过引入PBR材质来弥补卡通渲染在材质表达方面的不足的。到这里总算是写完了开篇时候准备讨论的内容了,后面有什么想写的再补充吧。篇幅比我开篇时预期的长了好多,不知不觉写了4篇了。

无论是卡通渲染和PBR的结合,还是风格化PBR的实现,对我而言也还是仍在摸索中的方向。市面上还没有完全成熟的方案,我也只能将自己的理解表达出来。不过也因为不成熟,还在不断试错,所以才更有发挥和进步的空间吧。这样来说也是一件好事。我对卡通渲染很感兴趣,一直在想如何提高画面的表现。如果大家有好的想法,也欢迎与我交流。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值