Introduction To Cartoon Shading

20030502戴明仁

Introduction

Cartoon-Shading （通稱為 Toon-Shading 或 Cel-Shading ）為近年來流行的 NPR （ Non-Photo-Realistic Rendering ）領域裡相當熱門的研究，尤其在遊戲界裡的應用層面也愈來愈廣，從早期 SEGA 公司的 Jet Set Radio ，到近期 Nintendo 公司的 Zelda ，都用到了Toon- Shading 的技巧

Implementation

在 Sole Survivor 裡的 Toon-Shading 實做過程中可分為 Inking 跟 Painting 兩個部份。

Painting 在漫畫或是卡通中，通常會使用色塊來表

現人物或物體表面的色彩，以表現出明暗對比的感覺，我們在此以一維貼圖查表法 ( 1D Texture Lookup Table) 來達到這個目的。

Painting 我們對於每一個三角形，當光源愈垂直射到此三角形上

時，其亮度愈大 ; 也就是說將此三角形的位置射到光源得到一個 Light Vector ，和自己的 Normal 做內積（即兩向量夾角的 cos 值），如果 = 0 表示光源平行於三角形（愈暗）；如果 = 1 表示光源垂直於三角形（愈亮），我們因此可用此概念，將做為一個一維貼圖的貼圖座標，當兩向量內積值愈大時，我們給他愈明亮的 Shader 值。

Painting

然而遊戲在真正進行時，物體本身通常還會有一張自己的貼圖，因此程式真正在實做的時候，我們會給他一張如下圖的一維貼圖

用來表示物體表面的陰暗度，然後在Render 時，再以 Multitexture 的方式將物體原來的貼圖跟此一維貼圖做混色，達到 Toon Shading 的效果。

Inking Inking 表示畫出場景中角色或物品的邊線，

使其看起來有漫畫家手繪的風格。這個步驟的流程圖如下：

±q ­n µe ¥XÃä½u¤§ ª« Å骺 ¤T¨¤ §Î ¸ê °T ¤¤ §ä ¥X¤@­Ó

Unique­Edge­Lis t

¥ÑCam eraªº µø ¨¤ ¨Ó ¨M©w­n µe¥X¨º ¨Ç Edge

P reproc es s Runtim e

Inking-Proprocess 我們把物體的每個三角形的三個邊依序去

檢查並且插入到一個 Unique Edge List ，每個 Edge 資訊存有兩端點的index ，相鄰兩個面的 index ，及他的Edge 種類， Edge 種類包括了Silhouette 、 Crease Angle 和Boundary 等。

Inking Silhouette 為物體的邊線，如圖示為一個

只畫 Silhouette 的物體：

為了要計算 Silhouette ，我們必需先紀錄好一個 Edge 相鄰兩個面的 index ，以便於執行時期去求得其兩個面的 normal 值。

Inking Crease Angle 為一個物體的摺痕，我們

可自行定義當某個 Edge 的相鄰兩個三角形的夾角大於某個角度時，此 Edge 即為Crease 。下圖為一畫了 Crease 的物體： 由於 Crease 為 View-Independent ，因此我們可以在找出所有的 Edge 之後，再個別判斷其相鄰兩個面的夾角是否大於某個 Threshold ，若夾角過大即可歸類於 Crease Angle 。

Inking Boundary 我們定義為在不同 Material 之

間的 Edge 稱為 Boundary ，如下圖：

Inking-Runtime 在執行時期時，因 Silhouette 是 View-

Dependent ，所以我們需由目前的視角，來找出物體的 Silhouette ，流程圖如下：

­« ·s ­p ºâ ©Ò¦³ ­± ªº Norm al§â ¥ý «e ­p ºâ ¦n ªº Unique

Edge­Lis t¸Ì ªº ¨C ­Ó Edge°µS ilhouette­D etec tion

Inking-Runtime

即若一個 Edge 相鄰兩個面一個為 Front Facing 另一個為 Back Facing ，此Edge 即為 Silhouette ，因為兩向量的內積值為其夾角的 COS 值，因此我們可推出算式當 （ Face1Normal dot EyeVector ） X （ Face2Normal dot

EyeVector) <= 0

時，此 Edge 即為 Silhouette 。