隨著《原神》,、《薩爾達(dá)傳說(shuō)：荒野之息》、《少女前線》等游戲的火熱,，卡通風(fēng)格渲染已經(jīng)在近幾年內(nèi)成為游戲開(kāi)發(fā)圈內(nèi)的炙手可熱的話題,。那么如何才能快速創(chuàng)造出高質(zhì)量、高清晰度的卡通風(fēng)格渲染畫(huà)面呢,？今天我們來(lái)看看來(lái)自網(wǎng)易的游戲制作人是如何使用Unity創(chuàng)造出高質(zhì)量的卡通渲染畫(huà)面的,。

在全新一期的「Unity大咖作客」分享會(huì)上,，來(lái)自網(wǎng)易的 TA 大咖雷宇航，為大家?guī)?lái)了以《走近卡通渲染-關(guān)于 Trick 的兩三事》為主題的講座,。

本文節(jié)選了部分精彩內(nèi)容下面讓我們來(lái)看看吧,！

大家好，我是雷宇航,，是在知乎上寫(xiě)卡通渲染眼鏡篇和面部篇的MIZI,，目前在網(wǎng)易負(fù)責(zé)技術(shù)美術(shù)。

本次內(nèi)容我會(huì)圍繞卡通渲染中角色使用到的?trick 來(lái)解析其中的技巧,。此次我們主要討論兩個(gè)話題,，一個(gè)是卡通渲染的 trick，另一個(gè)是 NPR 和 PBR 的結(jié)合,。這是詳細(xì)的目錄,。

卡通渲染在動(dòng)畫(huà)和游戲中的制作思路是不同的，動(dòng)畫(huà)中相機(jī)經(jīng)常是固定角度,，可以去手動(dòng)修正瑕疵,，而游戲中的卡通渲染會(huì)更加注重在不同環(huán)境與角度下效果表現(xiàn)的合理性。

因?yàn)?2D 畫(huà)面在 3D 畫(huà)面中并不是完全成立的,，所以在卡通渲染中各種 trick 就是難以避免的,。前半部分我會(huì)首先來(lái)概述一下卡通渲染的基本內(nèi)容，這一部分會(huì)相對(duì)比較簡(jiǎn)單,。

另外因?yàn)榛?PBR 的可能仍然是現(xiàn)在的大方向之一,，后半部分內(nèi)容我們就討論一下卡通渲染和 PBR 結(jié)合的問(wèn)題，以及目錄中這些 Shading Model 中存在的 trick,。

基于 trick 的卡通世界,。

從 2015 年罪惡裝備在 GDC 上分享卡通渲染的方法到現(xiàn)在，卡通渲染的發(fā)展非常迅速,，有基于賽璐璐的動(dòng)畫(huà)還原,，如《罪惡裝備》，《賽馬娘》這些,，還有基于 PBR 的風(fēng)格化,，像是《鹿鳴》、《奇跡暖暖》,，也有不那么 PBR,，但是使用了 PBR 制作的作品，比如《碧蘭幻想》《藍(lán)色協(xié)議》等,，再到更加風(fēng)格化的探索,，像是《破曉傳說(shuō)》。

卡通渲染的風(fēng)格表現(xiàn)力越來(lái)越廣，對(duì)于卡通渲染來(lái)說(shuō),，不像 PBR 那樣有標(biāo)準(zhǔn)流程和衡量準(zhǔn)則,，卡通渲染很大程度上會(huì)依賴(lài)于美術(shù)方面的造型和色彩，所以美術(shù)風(fēng)格的處理在卡通宣傳中是比較重要的,。

另外卡通渲染是人們主觀審美與現(xiàn)實(shí)環(huán)境抽象的結(jié)合,，不同人對(duì)卡通渲染概念理解不同，這就產(chǎn)生了各式各樣的制作流程,，不過(guò)還是有一定固定思路在其中的,。我們來(lái)看一下游戲開(kāi)發(fā)者們?yōu)榱撕每吹目ㄍㄤ秩井?huà)面都做了哪些努力？

首先列一下概念,，卡通渲染常見(jiàn)的有兩個(gè)名稱(chēng),，就是Cel Shading 和 Toon Shading，Cel 是賽璐璐 celluloid 的縮寫(xiě),，而 Toon 就是 cartoon 的簡(jiǎn)寫(xiě),。最簡(jiǎn)單的我們只需要陰影、描邊和高光,，就可以組合成具有卡通感的畫(huà)面,。

不過(guò)就像剛剛所說(shuō)的，這些并不是必須的,。隨著卡通渲染的發(fā)展，卡通渲染這個(gè)概念在逐漸的泛化,，在美術(shù)上有對(duì)應(yīng)的形態(tài)和色彩表現(xiàn),，就可以有卡通風(fēng)格的感覺(jué)了。

關(guān)于卡通渲染的基礎(chǔ)表現(xiàn),，下面先來(lái)快速過(guò)一遍卡通宣傳的基本技巧,。

卡通渲染第一步就是修改光照模型，對(duì) NDotL 計(jì)算蘭伯特光照進(jìn)行修改,，常見(jiàn)的有使用 Step 函數(shù),，RampMap 貼圖的方式。

首先是 Step 階躍函數(shù),。單獨(dú)的 Step 很簡(jiǎn)單,，就是給出另外一個(gè) A 值，大于該值的為 1,，小于該值的為 0,，而 Smoohstep 就是平滑的階躍函數(shù)，圖中的紫色曲線就是 Smoohstep 的函數(shù)圖像,，右邊是對(duì)應(yīng)的光照結(jié)果,，在給定的 a 值和 b 值之間會(huì)有一段平滑的過(guò)渡，蘭伯特計(jì)算結(jié)果，將蘭伯特的計(jì)算結(jié)果通過(guò) step 重新映射,，我們就可以控制陰影的邊界軟硬和位置了,。

然后是 RampMap，ramp 圖修改光照的方式和階躍函數(shù)類(lèi)似,，將蘭伯特光照作為映射值去采用 ramp 圖就可以得到對(duì)應(yīng)的風(fēng)格化光照,。中間的圖就是 ramp 圖（又稱(chēng) LUT 查找表）。陰影的軟硬和顏色變化可以通過(guò) ramp 圖的色彩過(guò)渡來(lái)實(shí)現(xiàn),。

然后是邊緣光,，這是常見(jiàn)的效果之一，動(dòng)畫(huà)中的邊緣光更偏向軟硬兩層邊緣光混合的情況,。常見(jiàn)的實(shí)現(xiàn)方式主要有兩種,，菲涅爾和深度偏移，也有使用邊緣檢測(cè)的方式,，不過(guò)不太常見(jiàn),。

基礎(chǔ)的邊緣光可以由法線和視角方向點(diǎn)積獲得，基于 NDotV,，同時(shí)這也是 Shader Graph 中 Fresnel 節(jié)點(diǎn)的計(jì)算,。

對(duì)于深度偏移的邊緣光可以獲得等寬的硬邊緣。這對(duì)于一些轉(zhuǎn)折比較少的模型,，比如立方體的支持會(huì)更好一點(diǎn),。原理就是將模型頂點(diǎn)偏移，重新采樣深度,，然后與原模型的深度進(jìn)行比較,，深度差大于某一值域，那么就是邊緣,?！对瘛分械娜宋镞吘壍牧吝厬?yīng)該就是使用了這種方式。

明暗交界線是動(dòng)畫(huà)中經(jīng)常會(huì)出現(xiàn)的特征,，這是繪畫(huà)中常見(jiàn)的處理,。基于這些特征,，不少畫(huà)師會(huì)在明暗交界線上做特殊的偏色處理,，動(dòng)畫(huà)中也都有體現(xiàn)，在物理的渲染中比較接近這些效果的是 SSS 表面散射,，這一表現(xiàn)可以看作是對(duì) SSS 的夸張,。

那么對(duì)于明暗交界線的計(jì)算，我們只需要找到明暗交界線區(qū)域的亮度范圍就可以了,。

如果使用 ramp 圖來(lái)計(jì)算光照,，就可以直接將交界區(qū)域在 ramp 圖中畫(huà)出來(lái),。另外也可以使用數(shù)學(xué)的方法，比如之前的階躍函數(shù)用兩個(gè) Smoohstep,，一正一反相乘,，就可以求得中間明暗交界的位置，然后填充顏色,?；蛘咭部梢允褂酶咚购瘮?shù)，也叫正態(tài)分布函數(shù)來(lái)選中明暗交界線區(qū)域過(guò)渡的位置,。

最后是描邊,，描邊也叫輪廓邊，早期描邊主要的作用是補(bǔ)充動(dòng)畫(huà)中色塊的細(xì)節(jié),，把轉(zhuǎn)折的結(jié)構(gòu)表現(xiàn)出來(lái),，所以這個(gè)時(shí)候描邊叫做輪廓邊會(huì)更合適一點(diǎn)。另外輪廓邊并不一定是黑色的,，在動(dòng)畫(huà)的場(chǎng)景中輪廓邊大多以亮線的高光形態(tài)來(lái)表示,，就像右圖中的亮線勾邊一樣，人物上則一般是以黑色的輪廓線偏多一點(diǎn),。

然后到現(xiàn)在的描邊除了強(qiáng)調(diào)主體這樣的用途之外,，更多的就是承載風(fēng)格化表現(xiàn)的特征了。像《無(wú)主之地》這種就是直接將描邊作為自身的風(fēng)格,。

常見(jiàn)的描邊方式有這幾種,，前面說(shuō)的邊緣光，RimLight 也是可以作為內(nèi)描邊的一種,，而 Backface 和邊緣檢測(cè)是游戲中最常應(yīng)用的描邊,，基于輪廓邊的檢測(cè)是離線渲染中經(jīng)常會(huì)使用到的方式，本村氏線是一種特殊的描邊,，我也一起加到描邊方式里面了。

先說(shuō)一下 Backface,。這種描邊方式是將物體渲染兩遍,，一次正面，一次背面,，背面渲染時(shí)向外擠出就可以獲得邊緣描邊了,，值得一提的是法線是否合并會(huì)影響這種描邊的連續(xù)性，所以經(jīng)常要去存一份平滑的法線數(shù)據(jù)來(lái)計(jì)算描邊,。

邊緣檢測(cè)是圖像處理的操作,，通過(guò)算子對(duì)圖像卷積就可以獲得描邊，常見(jiàn)的 Sobel 算子是行動(dòng)卷積和,，這種方式在不同場(chǎng)景下的消耗比較統(tǒng)一,。

另外對(duì)于卡通渲染來(lái)說(shuō),，我們會(huì)想要整潔的邊緣線，對(duì)整個(gè)圖像進(jìn)行邊緣檢測(cè)就會(huì)出現(xiàn)多余的描邊信息,，所以常見(jiàn)的技巧就是會(huì)在邊緣檢測(cè)區(qū)域做不同色塊的純色填充,，這樣在進(jìn)行邊緣處理時(shí)，就可以得到右圖中這樣一個(gè)比較干凈的結(jié)果,，就像右邊這個(gè)圖中,，上面的圖是對(duì)應(yīng)區(qū)域的色塊填充，下面的圖是邊緣檢測(cè)的結(jié)果,。

基于模型拓?fù)涞妮喞厵z測(cè)是離線渲染中經(jīng)常使用到的方式,，這種方式的消耗比較高，但是可以獲得一些很風(fēng)格化的表現(xiàn),。

最后就是本村線了,，這個(gè)裝備中分享的角色表面描邊的方法，并不是外描邊,，它是將模型的 UV 打直,，只繪制于垂直于 U 軸或者 V 軸的直線，避免斜線線條的采樣問(wèn)題,，從而獲得銳利的線條表現(xiàn),，就像左圖中對(duì)比一樣，不過(guò)這種方式對(duì)模型的制作要求很高,，它的制作周期會(huì)比較長(zhǎng),。

現(xiàn)在我們已經(jīng)快速過(guò)了一遍卡通渲染的基礎(chǔ)知識(shí)了，那么運(yùn)用這些知識(shí),，我們就可以輕松的做出一個(gè)卡通渲染的角色了,。不過(guò)想要提升角色的質(zhì)感，還需要另外一塊拼圖,，那就是 PBR,，這張圖是我在 Unity 中測(cè)試的效果，使用的是《少女前線二》閃電姐的 MMD 模型,。

我們來(lái)開(kāi)始進(jìn)行第二個(gè)話題,，就是基于 PBR 的卡通表現(xiàn)，基于物理的光照,，PBR 是對(duì)現(xiàn)實(shí)的還原,，而 NPR 則是非真實(shí)感渲染。雖然它們名稱(chēng)上是對(duì)立的,，不過(guò)為了效果的提升,，我們可以各取相關(guān)的特征縫合起來(lái)表現(xiàn)效果。使用 PBR 的優(yōu)勢(shì)在于 PBR 是藝術(shù)導(dǎo)向的,，它能讓美術(shù)同學(xué)用直觀的參數(shù),，標(biāo)準(zhǔn)化的工作流,，快速的實(shí)現(xiàn)大量材質(zhì)的真實(shí)感渲染，把 NPR 的特征遷移到 PPR 中,，并且保留這種易用性就是我們的目標(biāo),。

但實(shí)際操作中由于卡通渲染的特征涉及非物理屬性的方面太多，這種易用性是比較難以保持的,，需要根據(jù)項(xiàng)目對(duì)不同的特征的參數(shù)進(jìn)行取舍,。不過(guò) PBR 所帶來(lái)的環(huán)境光照和 PBR 的質(zhì)感是比較容易保留的。

左圖是 Unlit 的材質(zhì),，右圖是基于 PBR 魔改的 NPR,，混合 PBR 的 NPR 就可有一部分卡通效果，同時(shí)也具有 PBR 的質(zhì)感了,。

PBR 中存在的間接光照計(jì)算可以比較方便的適配不同環(huán)境下的光照表現(xiàn),。不管是夜晚、白天,、森林或者是在其他的一些環(huán)境下,，在不同的環(huán)境中都可以有對(duì)應(yīng)的光照反饋，這對(duì)角色與環(huán)境的適配是十分有利的,。

眾所周知,，PBR 是由直接光照與間接光照組成，這里的黃色和橙色區(qū)域就是直接光的鏡面反射與漫反射,，綠色區(qū)域是間接光的鏡面反射與漫反射,，藍(lán)色區(qū)域就是數(shù)據(jù)初始化的計(jì)算。比如 NdotL ,、NDotV 這些,。

這是這個(gè)典型的 PBR 是在不同的粗糙度與金屬度下的表現(xiàn)。

將 PBR 與卡通表現(xiàn)混合在一起的思路并不復(fù)雜,，簡(jiǎn)單的來(lái)說(shuō)將之前講述的特征插入到 PBR 的計(jì)算流程中就可以了,。但是怎么混合兩者的特征，在什么節(jié)點(diǎn)去插入計(jì)算,，這是一個(gè)見(jiàn)仁見(jiàn)智的事情,，對(duì)于不同的風(fēng)格，不同的管線流程都會(huì)有不同的結(jié)論,。

我將對(duì)應(yīng)的卡通特征插入到 PBR 流程中，大概長(zhǎng)這個(gè)樣子,，稍微有點(diǎn)兇殘,。當(dāng)然了這個(gè) shader 只是為了講解做的測(cè)試，項(xiàng)目制作中不會(huì)這樣用 ShaderGraph 直接做 PBR,。

首先是魔改 NPR 特征后 PBR 整體計(jì)算流程并沒(méi)有改變,，依舊是直接光與間接光的鏡面反射和漫反射疊加,。下面就簡(jiǎn)單來(lái)講述一下需要修改的部分。

首先是藍(lán)色區(qū)域中數(shù)據(jù)初始化階段的處理,，最主要的是對(duì)法線N進(jìn)行的操作,，NDotL 和相關(guān)的應(yīng)用計(jì)算都可以在這里進(jìn)行重新映射和合并，比如二值化陰影,，面部陰影,、頭發(fā)投影、影貼圖之類(lèi)的陰影相關(guān)的操作,，然后把它們合入到 NDotL 的結(jié)果之中,。同時(shí) NDotV 的控制也可以改變一部分菲尼爾的效果。

之后來(lái)看黃色區(qū)域的 DFG 項(xiàng),，這里效果比較明顯的更改項(xiàng)就是法線分布函數(shù) D 項(xiàng),，比如對(duì) GGX 高光的范圍進(jìn)行重新映射，或者更改計(jì)算各項(xiàng)異性高光,，并且加入遮罩偏移之類(lèi)的操作,，然后是橙色區(qū)域的 diffuse 計(jì)算，這個(gè)地方進(jìn)行的操作,，基本上可以當(dāng)做 emission 自發(fā)光來(lái)添加,。

對(duì)于卡通渲染來(lái)說(shuō)，一些色彩混合操作需要在這里加入,，比如頭發(fā),、高光，如果要使用顏色疊加的方式加入到計(jì)算結(jié)果中,，就像柔光,、線性光這些操作就需要在這里加入了，雖然不那么物理,，但是可以保證效果,。

之后就是綠色區(qū)域的間接光部分了，間接光的加入會(huì)顯著提高模型的質(zhì)感與立體感,，但是對(duì)于卡通渲染來(lái)說(shuō),，立體感的提升并不一定是好事，所以最直接的修改方式就是按照不同部分減少間接光的權(quán)重,，比如對(duì)皮膚,、面部這些需要平面表現(xiàn)的部分去減少間接光的比例。其他還有藍(lán)色協(xié)議使用了整體向上的法線,，計(jì)算統(tǒng)一顏色的間接光也是一種方式,。

最后就是紫色區(qū)域了，這里的計(jì)算是直接當(dāng)作自發(fā)光來(lái)添加的,，比如說(shuō)眼睛的高光,，Matcap 反射,，邊緣光之類(lèi)的。經(jīng)過(guò)對(duì) PBR 整體架構(gòu)的模改,，我們就可以得到混合了 PBR 的卡通表現(xiàn),。這里它長(zhǎng)這個(gè)樣子，這是 PBR 魔改后在不同粗糙度和金屬度下的表現(xiàn)（下圖中右圖）,。

和默認(rèn)的 PBR 的對(duì)比,，因?yàn)樽远x了陰影顏色和一些自發(fā)光的原因，它整體會(huì)更加明亮一點(diǎn),，卡通渲染插入到 PBR 中,，并不會(huì)完全能量守恒。

不過(guò)對(duì)于卡通渲染來(lái)說(shuō),，很多不守恒的表現(xiàn)是可以接受的,。所以雖然并不完全能量守恒，但是也適合于卡通渲染的表現(xiàn),。

這樣我們就有了混合 PBR 的 NPR 表現(xiàn),，之后就要為不同區(qū)域去定制對(duì)應(yīng)特征的 Shading Model 了，比如頭發(fā),、眼睛,、皮膚這些。