openGL CG07 – Toon Shader

這篇教程將介紹一種卡通渲染(Toon Shader)的方法，卡通渲染屬於non photorealistic rendering或簡稱NPR中的一種。卡通渲染一個物體看起來的效果就像卡通繪畫一般，這裡介紹一種簡單的渲染卡通效果的方法。和一般光照渲染不同的是，卡通效果渲染的物體像素之間顏色過渡是一種階梯函數形式的，而一般的光照渲染的物體顏色過渡則是平滑的連續函數形式。Fig1比較了卡通渲染和一般基於像素渲染的茶壺，可以明顯地看出茶壺顏色過渡的差別。

要實現Toon Shading的效果，可在Fragment shader中測試每個像素漫反射diffuse中的NdotL值，讓漫反射形成一個階梯函數，不同的NdotL地區對應不同的顏色，Fig2中顯示出不同部分不同的漫反射強度值，不同的漫反射值分別指定了不同的像素顏色。

Fig2 NdotL值分布

現在只要在fragment shader裡計算漫反射NdotL的值，然後判斷，所以修改教程03中fragment shader裡部分代碼即可。

[cpp] view plaincopy
 

  
float3 N = normalize(normal);  
  
float3 L = normalize(LightPosition - Position);  
  
float NdotL = max(dot(N,L),0);  
  
   
  
float3 color;  
  
   
  
if( NdotL<0.5)    color = float3(0.3,0.3,0.3);  
  
else if(NdotL>=0.5 && NdotL<0.85)    color = diffuseColor;  
  
else if(NdotL>=0.85)    color = specularColor;  
 
 

在上面代碼中，color就是最後fragment shader的輸出顏色。可以看到shader代碼很簡單，但是使用這些代碼渲染出來的物體是沒有輪廓的，就像Fig1圖(c)中渲染的茶壺一樣。為了給茶壺添加輪廓，還要考慮觀察向量V和法線N的關係。將V和N進行點乘，如果這個值比較小，比如0.2，我們就可以認為觀察到的物體的邊緣(Fig3)。

Fig3 法線N和觀察向量V

在Fig3中，P1和P2代表相機坐在位置，S是物體表面上一點，N是點S的法線。當我們在點P1觀察物體的時候，S點很明顯不能看成物體的輪廓，這個時候N和V1的點積值比較大，而在P2點觀察的時候，S點左邊的部分幾乎是看不到的，這個時候N和V2的點積值很小，接近0，於是可以把S看成是物體的輪廓。現在剛才的shader裡只需要增加一點代碼。

[cpp] view plaincopy
 

  
float3 N = normalize(normal);  
  
float3 L = normalize(LightPosition - Position);  
  
float3 V = normalize(eyePosition - P);  
  
float NdotL = max(dot(N,L),0);  
  
float NdotV = max(dot(N,V),0);  
  
   
  
float3 color;  
  
   
  
if( NdotL<0.5)    color = float3(0.3,0.3,0.3);  
  
else if(NdotL>=0.5 && NdotL<0.85)    color = diffuseColor;  
  
else if(NdotL>=0.85)    color = specularColor;  
  
   
  
if(NdotV<0.2)    color = float3(0,0,0);  
 
 

 

代碼中最後比較了NdotV的大小，如果小於0.2，那麼我們認為這個像素在我們所見範圍的邊緣處，那麼直接將該像素的顏色設定為黑色，這樣就能實現Fig1中，圖(b)的效果了。

雖然這種Toon shading的方法很簡單，但是也有不足的地方。如果構成物體的多邊形之間的稜角很分明，比如正方體，那麼採用這種方法的話，會出現物體閃爍的情況，因為在物體邊緣的地方法線變化很大。