introduction to cartoon shading 20030502 戴明仁. introduction cartoon-shading (通稱為...
Post on 20-Dec-2015
242 views
TRANSCRIPT
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¤@Ó
UniqueEdgeLis t
¥ÑCam eraªº µø ¨¤ ¨Ó ¨M©wn µ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
EdgeLis t¸Ì ªº ¨C Ó Edge°µS ilhouetteD etec tion
Inking-Runtime
即若一個 Edge 相鄰兩個面一個為 Front Facing 另一個為 Back Facing ,此Edge 即為 Silhouette ,因為兩向量的內積值為其夾角的 COS 值,因此我們可推出算式當 ( Face1Normal dot EyeVector ) X ( Face2Normal dot
EyeVector) <= 0
時,此 Edge 即為 Silhouette 。