NPR——卡通渲染（三）

• • • NPR——卡通渲染
    • 1.1 Illustrative Rendering in Team Fortress 2 [1]
      • 1.1.1 《軍團要塞2》插畫風格抽象描述
      • 1.1.2 視覺無關的光照
      • 1.1.3 視覺相關的光照
    • 1.2 一點想法
    • Reference

NPR——卡通渲染

這是我“NPR——卡通渲染”系列的第三篇文章，以此結束卡通渲染第一個階段的研究學習。在本系列文章第一篇“NPR——卡通渲染（一）”文中，講美式卡通[2]時，提到過 Valve 公司制作《軍團要塞2》一篇著名的卡通渲染論文[1]，本文正是對該論文學習的總結。

（本文着重于論文的分析學習，在 Unity 實作了相應的效果，本文不再貼出代碼，有需要可參考其他文章如[4]。）

1.1 Illustrative Rendering in Team Fortress 2 [1]

本文不會翻譯完整的譯文（較完整的中文譯文可參見[3]），以我的了解，《Illustrative Rendering in Team Fortress 2》[1]這篇論文大體分為四段講述了《軍團要塞2》的制作過程，首先是《軍團要塞2》這款遊戲的風格定位，論文第一節提到《軍團要塞2》的藝術風格靈感來自于20世紀中時期的幾位商業插畫家——J. C. Leyendecker、Dean Cornwell 和 Norman Rockwell [Schau 1974]，插畫人物衣物褶皺輪廓鮮明，并且以加強輪廓和邊緣高光而不是暗色描邊的着色技巧凸出物體或者人物的内部細節；其次論文介紹了《軍團要塞2》的技術基礎，比如“Gooch Shading”——一種插畫着色技巧，使用冷暖色調的變化表示表面方向（法線方向）和光源的關系（幾何上關系就是二者的夾角）改變傳統的 Phong Light Model，相比傳統的光照模型，在複雜的光照環境下，會得到更好的 3D 視覺表現。 [Decaudin 1996] [Lakeet al. 2000] [Barla et al. 2006]，Decaudin 使用 constant diffuse color 并依賴于 Shadow mapping 渲染物體達到卡通風格表現，Lakeet 使用的方法不依賴于 Shadow mapping，他使用一張一維貼圖（基于Lambertian 采樣紋理）模拟卡通繪畫的調色闆（降低色階），Barla 更進一步擴充了 Lakeet 的方法，他使用一張二維貼圖調和 view-dependent（視線相關）和 level-of-detail effects，同時，Barla 還應用了 Fresnel-Like（菲涅爾效應）模拟“virtual backlight“，也就是邊緣光照（rim-lighting）；第三，論文講述了《軍團要塞2》的制作流程，從”場景“、”人物“，再到”貼圖繪制“等；最後，論文将角色的繪制（着色）分為了兩部分，一是視覺無關（好了解一點的說法是”與視線無關“），包括”半蘭伯特光照“、”漫反射變形函數“以及”平行環境光“。二是視覺相關，包括”多重 Phong 光照“和”風格化的邊緣光照“。

1.1.1 《軍團要塞2》插畫風格抽象描述

論文的第三節（Third Section）總結了五點插畫風格要素，以此作為《軍團要塞2》着色技術的基礎（我認為這一節的總結對于圖形程式員來說才是最重要的，隻有将插畫的風格要素提取出來，具象為程式員可以量化的值，我們才可以很好的實作插畫風格。總言之，這種思考問題的方法是我應該學習且具備的）：

• 着色從暖到冷變化，陰影向冷色變化，而非黑色。
• 在光源的明暗分界處增加顔色飽和度，分界顔色往往偏紅色。
• 高頻細節盡可能忽略它。
• 對于角色而言，其内部細節如衣物褶皺通過重複輪廓線來強調它。
• 使用邊緣高光而不是暗色描邊來強調輪廓線。

1.1.2 視覺無關的光照

視覺無關的光照算法用公式（1）概括：

kd[a(nˆ)+∑i=1Lciw((α(nˆ⋅liˆ)+β)γ)](1) (1) k d [ a ( n ^ ) + ∑ i = 1 L c i w ( ( α ( n ^ ⋅ l i ^ ) + β ) γ ) ]

kd k d 是主紋理顔色， L L 表示光源數量，cici 表示光源光照顔色， α α ， β β ， γ γ 分别是一個縮放因子、偏移量和指數因子，用來改變 Lambert 光照結果， a() a ( ) 函數是一個平行環境光函數， w() w ( ) 是一個變形函數，它将值映射到區間 [0,1] [ 0 , 1 ] 。

半蘭伯特光照不做讨論了，我們首先看看“漫反射變形函數”：

可以看到，這個一維貼圖左邊區塊偏黑色，中間區塊偏紅色，而右側偏灰色，為什麼右側顔色也僅僅是比“mid-gray”稍稍亮一些而已呢？論文中提到，這是因為在 pixel shader 中，對該紋理采樣之後的顔色會乘以 2，這樣可以讓美術同學更好的控制明亮度（two times “overbright” 兩倍的亮度）。貼圖分為三塊趨于，這樣就使得插畫風格的陰影偏向冷色而不是黑色，在明暗分界處則偏向紅色，光照處則偏向暖色。

接下來我們看看論文中比較重要的“平行環境光部分”，論文中使用的“ambient cube”技術等價于“irradiance environment map（輻照度環境貼圖）”（可參考 GPU Gems 2 第 10 章）。二者的差別在于後者是計算一個 9 項的球諧函數（9-term spherical harmonic basis），前者則僅僅需要沿坐标軸正負方向計算 6 項的餘弦平方的“ambient cube”。它使得角色和模型在遊戲場景中顯得更加真實生動。

1.1.3 視覺相關的光照

視覺相關的光照算法用公式（2）表示如下：

∑i=1L[ciksmax(fs(vˆ⋅riˆ)kspec,frkr(vˆ⋅riˆ)krim)]+(nˆ⋅uˆ)frkra(vˆ)(2) (2) ∑ i = 1 L [ c i k s m a x ( f s ( v ^ ⋅ r i ^ ) k s p e c , f r k r ( v ^ ⋅ r i ^ ) k r i m ) ] + ( n ^ ⋅ u ^ ) f r k r a ( v ^ )

可以看到，視覺相關的光照算法加入了菲涅爾因子。

首先我們看看“多重 Phong 高光部分”，相比傳統的高光，這裡多了 frkr(vˆ⋅riˆ)krim f r k r ( v ^ ⋅ r i ^ ) k r i m ，論文提到菲涅爾因子 fr f r 使得“rim highlights”僅僅在“grazing angles”處才會顯現出來，通常情況下常量 krim k r i m 小于 kspec k s p e c 。

我們再看看公式（2）的另一部分“Dedicate Rim Lighting”， (nˆ⋅uˆ)frkra(vˆ) ( n ^ ⋅ u ^ ) f r k r a ( v ^ ) ，這裡的邊緣光照一方面使用 viewDir 求取 “ambient cube” 值， 另一方面計算向上向量 uˆ u ^ 和表面法向量的點積，這樣可以獲得一種由上方照下的間接環境光照表現。

1.2 一點想法

縱覽整篇論文，我所得不在于論文中卡通渲染的算法公式，而在于論文中一點一點如抽絲剝繭的般細緻的描述了《軍團要塞2》插畫渲染的過程——從靈感來源，到抽取插畫風格要素，再到以此為基礎建立相應的數學模型，獲益良多。

Reference

[1] Jason Mitchell, Moby Francke, Dhabih Eng. Illustrative Rendering in Team Fortress 2

[2] 侑虎科技——卡通渲染技術總結

[3] 【Shader拓展】Illustrative Rendering in Team Fortress 2

[4] 風格化渲染實踐