【《Real-Time Rendering 3rd》 提煉總結】(十) 第十一章 · 非真實感渲染(NPR)相關技術總結

本文由@淺墨_毛星雲 出品，轉載請註明出處。  
文章鏈接： http://blog.csdn.net/poem_qianmo/article/details/78574734

與傳統的追求照片真實感的真實感渲染不同，非真實感渲染（Non-Photorealistic Rendering，NPR）旨在模擬藝術式的繪製風格，常用來對繪畫風格和自然媒體（如鉛筆、鋼筆、墨水、木炭、水彩畫等）進行模擬。而卡通渲染（Toon Rendering）作爲一種特殊形式的非真實感渲染方法，近年來倍受關注。

通過閱讀這篇文章，你將對非真實感渲染技術的以下要點有所瞭解：

• 非真實感渲染的基本思想和相關領域
• 卡通渲染
• 輪廓描邊的幾種實現流派
• 1）基於視點方向的描邊
• 2）基於過程幾何方法的描邊
• 3）基於圖像處理生成的描邊
• 4）基於輪廓邊緣檢測的描邊
• 5）混和輪廓描邊
• 其他風格的NPR渲染技術
• 1）紋理調色板（Palette of Textures）
• 2）色調藝術圖（Tonal Art Maps，TAM）
• 3）嫁接（Graftals）
• 水彩風格的NPR

 

 

一、非真實感渲染

正如變化的字體會給人不一樣的感覺，不同的渲染風格會帶給人們不同的心情，感受與意境。

非真實感渲染（Non-Photorealistic Rendering，NPR）， 亦被稱爲風格化渲染（Stylistic Rendering），是致力於爲數字藝術提供多種表達方式的一種渲染流派。與傳統的追求照片真實感的真實感渲染（Photorealistic Rendering）計算機圖形學不同，非真實感渲染旨在模擬藝術式的繪製風格，也用於嘗試新的繪製風格。

圖1 真實感渲染 vs. 非真實感渲染 @ruben3d

 

NPR的目的之一就是創建類似技術示意圖、技術圖紙相關的圖像，而另一個應用領域便是對繪畫風格和自然媒體（如鉛筆、鋼筆、墨水、木炭、水彩畫等）進行模擬。這是一個涉及內容非常之多的應用領域，爲了捕捉各種媒體的真實效果，人們已經提出了各種不同的算法。

 

 

圖2 基於NPR渲染出的水墨畫 @suiboku

 

 

圖3 基於NPR渲染出的鉛筆素描@ Real-Time Hatching . SIGGRAPH 2001

 

非真實感渲染與我們並不遙遠，它早以“卡通着色（Toon Shading）”的形式出現在各式動漫和電影中。

圖4 基於卡通着色的2016年高分動漫電影《你的名字》

 

在遊戲製作方面，各種涉及到非真實感渲染的作品數不勝數，《Ōkami(大神)》，《The Legend of Zelda（塞爾達傳說）》系列，甚至到現在的《Dota2》、《英雄聯盟》、《守望先鋒》，都多多少少涉及到了NPR。

 

圖5 非真實感渲染風格強烈的《塞爾達傳說：荒野之息》

 

圖6 非真實感渲染風格強烈的《塞爾達傳說：荒野之息》

 

 

 

 

 

二、卡通渲染

 

上文提到，一直以來，有一種特殊形式的NPR倍受關注，且和我們的生活息息相關，那就是卡通渲染（Toon Rendering，又稱Cel Rendering）。這種渲染風格能夠給人以獨特的感染力與童趣。

 

這種風格很受歡迎的原因之一是McCloud的經典著作《Understanding Comics》中所講述到的“通過簡化進行增強（Amplification Through Simplification）”。通過簡化並剔除所包含的混雜部分，可以突出於主題相關的信息，而大部分觀衆都會認同那些用簡單風格描繪出來的卡通形象。

 

在計算機圖形學領域，大約在20世紀90年代就開始使用toon渲染風格來實現三維模型和二維cel動畫之間的結合。而且和其他NPR風格相比，這種繪製方法比較簡單，可以很容易地利用計算機進行自動生成。

 

可以將最卡通着色基本的三個要素概括爲：

• 銳利的陰影（Sharp shadows）
• 少有或沒有高亮的點（Little or no highlight）
• 對物體輪廓進行描邊（Outline around objects）

 

關於toon渲染，有很多不同的實現方法。

• 對於含有紋理但沒有光照的模型來說，可以通過對紋理進行量化來近似具有實心填充顏色的卡通風格。
• 對於明暗處理，有兩種最爲常見的方法，一種是用實心顏色填充多邊形區域。但這種方式實用價值不大。另一種是使用2-tone方法來表示光照效果和陰影區域。也稱爲硬着色方法（Hard Shading），可以通過將傳統光照方程元素重新映射到不同的調色板上來實現。此外，一般用黑色來繪製圖形的輪廓，可以達到增強卡通視覺效果的目的。

圖7 真實感光照模型和卡通着色模型

 

 

具體的着色方法，可以理解爲在Fragment shader中測試每個像素漫反射diffuse中的NdotL值，讓漫反射形成一個階梯函數，不同的NdotL區域對應不同的顏色。下圖顯示了不同的漫反射強度值的着色部分階梯指定了不同的像素顏色。

 

圖8 不同的漫反射強度值的着色部分階梯指定不同的像素顏色

 

 

 

圖9 不同的卡通着色細節效果

 

三、輪廓描邊的渲染方法小結

輪廓描邊的渲染方法可以分爲以下五種：

 

1）基於視點方向的描邊

2）基於過程幾何方法的描邊

3）基於圖像處理的描邊

4）基於輪廓邊緣檢測的描邊

5）混和輪廓描邊

 

下面分別進行介紹。

 

3.1 基於視點方向的描邊

 

基於視點方向的描邊方法，即表面角描邊（Surface Angle Silhouetting），其基本思想是使用視點方向（view point）和表面法線（surface normal）之間的點乘結果得到輪廓線信息。如果此點乘結果接近於零，那麼可以斷定這個表面極大概率是側向（Edge-on）的視線方向，而我們就將其視做輪廓邊緣，進行描邊。

 

這種方法相當於用一個邊緣爲黑色圓環的環境貼圖（Environment Map），對物體表面進行着色處理，如圖所示。

 

圖10  使用球形圖來繪製邊緣輪廓，如果沿着球形圖的邊緣對圓進行加寬，即可產生較粗的輪廓

 

在實際應用中，通常使用一張一維紋理（一般我們稱其爲ramp圖）來代替環貼圖。也就是使用視角方向與頂點法向的點乘對該紋理進行採樣。

 

需要注意，這種技術僅適用於一些特定的模型，這些模型必須保證法線與輪廓邊緣之間存在一定關係。諸如立方體這樣的模型，此方法並不太適用，因爲往往無法得到輪廓邊緣。但我們可以通過顯式地繪製出折縫邊緣，來正確地表現出這類比較明顯的特徵。

 

 

3.2 基於過程幾何方法的描邊

基於過程幾何方法生成的描邊，即過程幾何描邊（Procedural Geometry Silhouetting），基本思想是先渲染正向表面（frontfaces），再渲染背向表面（backfaces），從而使得輪廓邊緣可見，達到描邊的目的。

 

有多種方法用來渲染背向表面，且各有優缺點。但它們都是先渲染正向表面，然後打開正向表面裁剪（culling）開關，同時關閉背向裁剪開關。這樣這個pass中的渲染結果便只會顯示出背向表面。

 

一種基於過程幾何方法生成的描邊的方法是僅僅渲染出背向表面的邊界線（而不是面），使用偏置（Biasing）或者其他技術來確保這些線條恰好位於正向表面之前。這樣就可以將除輪廓邊緣之外的其他所有線條全部隱藏起來。這種方法非常適合單像素寬的線條，但如果線條的寬度超過這個值，那麼通常會出現無法連接獨立線段的情況，從而造成明顯的縫隙。

 

另一種渲染較寬描邊線條的方法是直接將背面表面本身渲染成黑色。但沒有任何偏置操作，背向表面就會保持不可見，所以需要做的就是通過偏置將這些背向表面沿屏幕Z方向向前移動，這樣，便只有背向表面的三角形邊緣是可見的。

 

如下圖，可以使用背向表面的斜率對對多邊形進行向前偏置，但是線條寬度依然依賴於正向表面的角度。

 

圖11 描邊的z偏置方法，可以通過對背向表面進行向前平移來實現。如果正向表面的角度不同，那麼背向表面的可見量也不同。

 

 

 

 

 

3.3 基於圖像處理的描邊

 

基於圖像處理生成輪廓描邊（Silhouetting by Image Processing），即通過在各種緩衝區上執行圖像處理技術，來實現非真實渲染的方法。可以將其理解爲一種後處理操作。通過尋找相鄰Z緩衝數值的不連續性，就可以確定大多數輪廓線的位置。同樣，藉助鄰接表面法線向量的不連續性，可以確定出分界線（往往也是輪廓線）邊緣的位置。此外，利用環境色對場景進行繪製，也可以用來檢測前兩種方法可能會漏掉的邊緣。

 

 

圖12 基於圖像處理的描邊 

 

 

圖13 通過對場景的法線圖和z深度值就行處理來進行邊緣檢測，右圖所示爲經過加粗的合成結果。注意，在這種情況下，使用法線圖就主義檢測出所有的邊緣。

 

 

 

 

3.4 基於輪廓邊緣檢測的描邊

 

上文提到的大多數渲染描邊的方法都存在一個缺點，那就是他們都需要兩個通道才能完成物體輪廓描邊的渲染。

基於輪廓邊緣檢測的描邊，通過檢測出輪廓邊緣（Silhouette EdgeDetection）），並直接對它們進行繪製，這種形式的描邊，可以很好地控制線條繪製的過程。由於邊緣獨立於模型，因此這種方法還有另外一個優點，就是能夠生成一些特殊的效果。例如，在網格密集的地方可以突現出輪廓邊緣。

 

可以將輪廓邊緣理解爲朝向相反的相鄰三角形的交接。也就是說，其中的一個三角形是朝向視點，另一個三角形背向視點。具體測試方法如下：

 

其中n0和n1分別表示兩個三角形的表面法線向量，v表示從視點到這條邊緣（也就是其中任何一個端點）的視線方向向量。而爲了確保這種測試的準確性，必須保證表面的取向一致。

 

 

 

3.5 混和輪廓描邊

 

混和輪廓描邊（Hybrid Silhouetting），即結合了圖像處理方法和幾何要素方法，來渲染輪廓的方法。

這種方法的具體思想是：首先，找到一系列輪廓邊緣的列表。其次，渲染出所有物體的三角形和輪廓邊緣，同時爲他們指定一個不同的ID值（也就是說，賦予不同的顏色）。接着讀取該ID緩衝器並從中判斷出可見的輪廓邊緣，隨之對這些可見線段進行重疊檢測，並將它們連接起來形成平滑的筆劃路徑。最後就可以對這些重建起來的路徑進行風格化筆劃渲染，其中，這些筆劃本身可以用很多方法來進行風格化處理，包括變細、火焰、擺動、淡化等效果，同時還有深度和距離信息。如下圖。

 

圖14 使用混合輪廓描邊方法生成的圖像，其中可以將找到的輪廓邊緣連接起來作爲筆劃進行渲染。

 

 

四、其他風格的NPR渲染技術小結

 

除了toon渲染這種比較受歡迎的模擬風格之外，還存在其他各式各樣的風格。NPR效果涵蓋的範圍非常廣泛，從修改具有真實感效果的紋理，到使用算法一幅幅畫面的幾何修飾。RTR3中主要談了3種不同的其他風格的NPR渲染技術：

• 紋理調色板（Palette of Textures）
• 色調藝術圖（Tonal Art Maps，TAM）
• 嫁接（Graftals）

下面分別進行介紹。

4.1 紋理調色板（Palette of Textures）

紋理調色板（palette of textures）由Lake等人討論提出，基本思想是通過反射着色項（diffuse shading term）的不同，來選擇應用於物體表面上的不同紋理。隨着漫反射項逐漸變暗，可以選用相應更暗的紋理，而爲了能夠產生手繪的效果，可以使用屏幕空間座標來採樣紋理。同時，爲了增強繪製效果，可以在屏幕空間上的所有表面上運用紙紋理。隨着物體的運動，他們就可以在紋理之間進行穿梭。原因在於這個紋理是在屏幕空間中實現的。此外，也可以在世界空間中運用這個紋理，這樣就能夠得到一個與屏幕空間完全不同的效果。

圖15 使用紋理調色板（paletteof textures）、紙紋理，以及輪廓邊緣繪製生成的一幅圖像。

 

4.2 色調藝術圖（Tonal Art Maps，TAM）

通過在紋理之間進行切換形成的硬着色效果和toon着色效果之間的一種混合，Praun等人（https://www.dimap.ufrn.br/~motta/dim102/Projetos/p581-praun.pdf）提出了一種可以實時生成筆劃紋理分級細化圖的方法，並可以將其以平滑的方式運用到物體表面上。第一步是生成即時使用的紋理，稱爲色調藝術圖（Tonal Art Maps，TAM）,主要思想是將筆劃繪製爲分級細分圖層次，如圖。

 

 

圖16 TAM將筆劃繪製到細分圖層次中，每個分級細化圖層次包含圖中左邊和上邊紋理中的所有筆劃，這樣，在細化圖層次之間和相鄰紋理之間的插值就比較平滑

 

 

圖17 使用TAM渲染一副素描圖的過程

 

圖18 6種不同的TAM渲染出的6組不同模型

 

4.3 嫁接（Graftals）

嫁接（Graftals）的基本思想，是將幾何或者貼花紋理應用到物體表面，從而產生某種特殊效果。可以通過所需要的細節層次，物體表面相對視點的方位或者其他因素，對紋理進行控制。這種方法可以用來模擬鋼筆或者畫刷的筆刷，如下圖。

圖19 使用兩種不同的嫁接（Graftals）風格繪製出來的Standord小兔

 

 

五、關於水彩風格的NPR

 

在寫這篇文章查閱NPR相關資料的過程中，發現了非常酷的一個水彩風格化渲染的框架，Maya Non-photorealistic Rendering Framework，簡稱MNPR.http://artineering.io/docs/mnprDocsWC/。

 

MNPR在SIGGRAPH 2017有亮相，可以實現非常棒的水彩（Watercolor）渲染效果。有興趣的朋友可以瞭解一下。以下是相關的一些精彩的圖示。

 

圖20 一個典型水彩風格渲染流程圖

 

 

 

 

 

圖21 水彩風格的NPR建模過程

圖22 水彩風格的NPR效果圖

 

 

圖23 真實感渲染 vs. 水彩風格NPR渲染

 

 

 

 

 

六、NPR相關著作

 

如下兩本書從技術和NPR繪畫算法兩個方面，對非真實感渲染有了一個系統的涵蓋，可謂NPR界的泰斗之作，有興趣的朋友不妨進一步深入閱讀。

• Gooch, Bruce or Amy, and Amy or Bruce Gooch, Non-Photorealistic Rendering,A K Peters Ltd., 2001.
• Strothotte, Thomas, and Stefan Schlechtweg ,Non-Photorealistic Computer Graphics: Modeling, Rendering, and Animation, Morgan Kaufmann, 2002.

 

七、NPR相關延伸資料推薦

• 鏈接（http://kesen.realtimerendering.com/）中的Non-Photorealistic Animation and Rendering Proceedings 一欄裏可以找到NPR業界前沿的一些發展近況，即NPAR會議相關的資源。
• SIGGRAPH 2010 上Stylized Rendering in Games 課程（Stylized Rendering in Games）裏有不少值得了解的NPR的內容。
• NPR resources page（http://www.red3d.com/cwr/npr/）裏的材料也值得一看。

Reference

[1] http://www.gatheryourparty.com/2013/05/30/crash-course-cel-shading-in-video-games/

[2] http://www-cg.cis.iwate-u.ac.jp/lab/suiboku.html

[3] https://zhuanlan.zhihu.com/p/26409746

[4] https://www.zhihu.com/question/32078473

[5] http://www.valvesoftware.com/publications/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf

[6] http://www.4gamer.net/games/216/G021678/20140703095/

[7] http://www.4gamer.net/games/216/G021678/20140714079/

[8] http://www.4gamer.net/games/216/G021678/20150317055/

[9]https://en.wikipedia.org/wiki/Cel_shading

[10] Praun E, Hoppe H, Webb M, et al.Real-time hatching[C]//Proceedings of the 28th annual conference on Computergraphics and interactive techniques. ACM, 2001: 581. http://gfx.cs.princeton.edu/proj/hatching/

[11] http://blog.csdn.net/silangquan/article/details/17184807

[12] http://blog.csdn.net/candycat1992/article/details/45577749

[13] http://blog.csdn.net/thenile/article/details/8858702

[14] http://www.cs.duke.edu/courses/compsci344/spring15/classwork/16_npr/cmu.pdf

[15] http://libregraphicsworld.org/blog/entry/freestyle-jot-and-the-future-of-non-photorealistic-rendering

[16] http://www.cartoonbrew.com/tag/non-photorealistic-rendering

[17] Art-directed watercolor stylization of3D animations in real-time

http://artineering.io/articles/Art-directed-watercolor-stylization-of-3D-animations-in-real-time/

[18] https://expressivesymposium.com/

 

The end.