隨著《原神》、《薩爾達傳說：荒野之息》、《少女前線》等游戲的火熱，卡通風格渲染已經在近幾年內成為游戲開發圈內的炙手可熱的話題。那么如何才能快速創造出高質量、高清晰度的卡通風格渲染畫面呢？今天我們來看看來自網易的游戲制作人是如何使用Unity創造出高質量的卡通渲染畫面的。

在全新一期的「Unity大咖作客」分享會上，來自網易的 TA 大咖雷宇航，為大家帶來了以《走近卡通渲染-關于 Trick 的兩三事》為主題的講座。

本文節選了部分精彩內容下面讓我們來看看吧！

大家好，我是雷宇航，是在知乎上寫卡通渲染眼鏡篇和面部篇的MIZI，目前在網易負責技術美術。

本次內容我會圍繞卡通渲染中角色使用到的?trick 來解析其中的技巧。此次我們主要討論兩個話題，一個是卡通渲染的 trick，另一個是 NPR 和 PBR 的結合。這是詳細的目錄。

卡通渲染在動畫和游戲中的制作思路是不同的，動畫中相機經常是固定角度，可以去手動修正瑕疵，而游戲中的卡通渲染會更加注重在不同環境與角度下效果表現的合理性。

因為 2D 畫面在 3D 畫面中并不是完全成立的，所以在卡通渲染中各種 trick 就是難以避免的。前半部分我會首先來概述一下卡通渲染的基本內容，這一部分會相對比較簡單。

另外因為基于 PBR 的可能仍然是現在的大方向之一，后半部分內容我們就討論一下卡通渲染和 PBR 結合的問題，以及目錄中這些 Shading Model 中存在的 trick。

基于 trick 的卡通世界。

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

卡通渲染的風格表現力越來越廣，對于卡通渲染來說，不像 PBR 那樣有標準流程和衡量準則，卡通渲染很大程度上會依賴于美術方面的造型和色彩，所以美術風格的處理在卡通宣傳中是比較重要的。

另外卡通渲染是人們主觀審美與現實環境抽象的結合，不同人對卡通渲染概念理解不同，這就產生了各式各樣的制作流程，不過還是有一定固定思路在其中的。我們來看一下游戲開發者們為了好看的卡通渲染畫面都做了哪些努力？

首先列一下概念，卡通渲染常見的有兩個名稱，就是Cel Shading 和 Toon Shading，Cel 是賽璐璐 celluloid 的縮寫，而 Toon 就是 cartoon 的簡寫。最簡單的我們只需要陰影、描邊和高光，就可以組合成具有卡通感的畫面。

不過就像剛剛所說的，這些并不是必須的。隨著卡通渲染的發展，卡通渲染這個概念在逐漸的泛化，在美術上有對應的形態和色彩表現，就可以有卡通風格的感覺了。

關于卡通渲染的基礎表現，下面先來快速過一遍卡通宣傳的基本技巧。

卡通渲染第一步就是修改光照模型，對 NDotL 計算蘭伯特光照進行修改，常見的有使用 Step 函數，RampMap 貼圖的方式。

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

然后是 RampMap，ramp 圖修改光照的方式和階躍函數類似，將蘭伯特光照作為映射值去采用 ramp 圖就可以得到對應的風格化光照。中間的圖就是 ramp 圖（又稱 LUT 查找表）。陰影的軟硬和顏色變化可以通過 ramp 圖的色彩過渡來實現。

然后是邊緣光，這是常見的效果之一，動畫中的邊緣光更偏向軟硬兩層邊緣光混合的情況。常見的實現方式主要有兩種，菲涅爾和深度偏移，也有使用邊緣檢測的方式，不過不太常見。

基礎的邊緣光可以由法線和視角方向點積獲得，基于 NDotV，同時這也是 Shader Graph 中 Fresnel 節點的計算。

對于深度偏移的邊緣光可以獲得等寬的硬邊緣。這對于一些轉折比較少的模型，比如立方體的支持會更好一點。原理就是將模型頂點偏移，重新采樣深度，然后與原模型的深度進行比較，深度差大于某一值域，那么就是邊緣?！对瘛分械娜宋镞吘壍牧吝厬摼褪鞘褂昧诉@種方式。

明暗交界線是動畫中經常會出現的特征，這是繪畫中常見的處理?；谶@些特征，不少畫師會在明暗交界線上做特殊的偏色處理，動畫中也都有體現，在物理的渲染中比較接近這些效果的是 SSS 表面散射，這一表現可以看作是對 SSS 的夸張。

那么對于明暗交界線的計算，我們只需要找到明暗交界線區域的亮度范圍就可以了。

如果使用 ramp 圖來計算光照，就可以直接將交界區域在 ramp 圖中畫出來。另外也可以使用數學的方法，比如之前的階躍函數用兩個 Smoohstep，一正一反相乘，就可以求得中間明暗交界的位置，然后填充顏色?；蛘咭部梢允褂酶咚购瘮?，也叫正態分布函數來選中明暗交界線區域過渡的位置。

最后是描邊，描邊也叫輪廓邊，早期描邊主要的作用是補充動畫中色塊的細節，把轉折的結構表現出來，所以這個時候描邊叫做輪廓邊會更合適一點。另外輪廓邊并不一定是黑色的，在動畫的場景中輪廓邊大多以亮線的高光形態來表示，就像右圖中的亮線勾邊一樣，人物上則一般是以黑色的輪廓線偏多一點。

然后到現在的描邊除了強調主體這樣的用途之外，更多的就是承載風格化表現的特征了。像《無主之地》這種就是直接將描邊作為自身的風格。

常見的描邊方式有這幾種，前面說的邊緣光，RimLight 也是可以作為內描邊的一種，而 Backface 和邊緣檢測是游戲中最常應用的描邊，基于輪廓邊的檢測是離線渲染中經常會使用到的方式，本村氏線是一種特殊的描邊，我也一起加到描邊方式里面了。

先說一下 Backface。這種描邊方式是將物體渲染兩遍，一次正面，一次背面，背面渲染時向外擠出就可以獲得邊緣描邊了，值得一提的是法線是否合并會影響這種描邊的連續性，所以經常要去存一份平滑的法線數據來計算描邊。

邊緣檢測是圖像處理的操作，通過算子對圖像卷積就可以獲得描邊，常見的 Sobel 算子是行動卷積和，這種方式在不同場景下的消耗比較統一。

另外對于卡通渲染來說，我們會想要整潔的邊緣線，對整個圖像進行邊緣檢測就會出現多余的描邊信息，所以常見的技巧就是會在邊緣檢測區域做不同色塊的純色填充，這樣在進行邊緣處理時，就可以得到右圖中這樣一個比較干凈的結果，就像右邊這個圖中，上面的圖是對應區域的色塊填充，下面的圖是邊緣檢測的結果。

基于模型拓撲的輪廓邊檢測是離線渲染中經常使用到的方式，這種方式的消耗比較高，但是可以獲得一些很風格化的表現。

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

現在我們已經快速過了一遍卡通渲染的基礎知識了，那么運用這些知識，我們就可以輕松的做出一個卡通渲染的角色了。不過想要提升角色的質感，還需要另外一塊拼圖，那就是 PBR，這張圖是我在 Unity 中測試的效果，使用的是《少女前線二》閃電姐的 MMD 模型。

我們來開始進行第二個話題，就是基于 PBR 的卡通表現，基于物理的光照，PBR 是對現實的還原，而 NPR 則是非真實感渲染。雖然它們名稱上是對立的，不過為了效果的提升，我們可以各取相關的特征縫合起來表現效果。使用 PBR 的優勢在于 PBR 是藝術導向的，它能讓美術同學用直觀的參數，標準化的工作流，快速的實現大量材質的真實感渲染，把 NPR 的特征遷移到 PPR 中，并且保留這種易用性就是我們的目標。

但實際操作中由于卡通渲染的特征涉及非物理屬性的方面太多，這種易用性是比較難以保持的，需要根據項目對不同的特征的參數進行取舍。不過 PBR 所帶來的環境光照和 PBR 的質感是比較容易保留的。

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

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

眾所周知，PBR 是由直接光照與間接光照組成，這里的黃色和橙色區域就是直接光的鏡面反射與漫反射，綠色區域是間接光的鏡面反射與漫反射，藍色區域就是數據初始化的計算。比如 NdotL 、NDotV 這些。

這是這個典型的 PBR 是在不同的粗糙度與金屬度下的表現。

將 PBR 與卡通表現混合在一起的思路并不復雜，簡單的來說將之前講述的特征插入到 PBR 的計算流程中就可以了。但是怎么混合兩者的特征，在什么節點去插入計算，這是一個見仁見智的事情，對于不同的風格，不同的管線流程都會有不同的結論。

我將對應的卡通特征插入到 PBR 流程中，大概長這個樣子，稍微有點兇殘。當然了這個 shader 只是為了講解做的測試，項目制作中不會這樣用 ShaderGraph 直接做 PBR。

首先是魔改 NPR 特征后 PBR 整體計算流程并沒有改變，依舊是直接光與間接光的鏡面反射和漫反射疊加。下面就簡單來講述一下需要修改的部分。

首先是藍色區域中數據初始化階段的處理，最主要的是對法線N進行的操作，NDotL 和相關的應用計算都可以在這里進行重新映射和合并，比如二值化陰影，面部陰影、頭發投影、影貼圖之類的陰影相關的操作，然后把它們合入到 NDotL 的結果之中。同時 NDotV 的控制也可以改變一部分菲尼爾的效果。

之后來看黃色區域的 DFG 項，這里效果比較明顯的更改項就是法線分布函數 D 項，比如對 GGX 高光的范圍進行重新映射，或者更改計算各項異性高光，并且加入遮罩偏移之類的操作，然后是橙色區域的 diffuse 計算，這個地方進行的操作，基本上可以當做 emission 自發光來添加。

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

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

最后就是紫色區域了，這里的計算是直接當作自發光來添加的，比如說眼睛的高光，Matcap 反射，邊緣光之類的。經過對 PBR 整體架構的模改，我們就可以得到混合了 PBR 的卡通表現。這里它長這個樣子，這是 PBR 魔改后在不同粗糙度和金屬度下的表現（下圖中右圖）。

和默認的 PBR 的對比，因為自定義了陰影顏色和一些自發光的原因，它整體會更加明亮一點，卡通渲染插入到 PBR 中，并不會完全能量守恒。

不過對于卡通渲染來說，很多不守恒的表現是可以接受的。所以雖然并不完全能量守恒，但是也適合于卡通渲染的表現。

這樣我們就有了混合 PBR 的 NPR 表現，之后就要為不同區域去定制對應特征的 Shading Model 了，比如頭發、眼睛、皮膚這些。