天天看點

NeHe OpenGL教程 第三十七課:卡通映射

前言

NeHe OpenGL第三十七課:卡通映射

<a href="http://img1.51cto.com/attachment/201008/225929699.jpg" target="_blank"></a>

卡通映射:

什麼是卡通了,一個輪廓加上少量的幾種顔色。使用一維紋理映射,你也可以實作這種效果。

看到人們仍然e-mail我請求在文章中使用我方才在GameDev.net上寫的源代碼,還看到文章的第二版(在那每一個API附帶源碼)不是在中途完成之前連貫的結束。我已經把這篇指南一并出租給了NeHe(這實際上是

寫文章的最初意圖)是以你們所有的OpenGL領袖可以玩轉它。對模型的選擇表示抱歉,但是我最近一直在玩Quake 2。

注釋:這篇文章的源代碼可以在這裡找到:

這篇指南實際上并不解釋原理,僅僅解釋代碼。在上面的連接配接中可以發現為什麼它能工作。現在不斷地大聲抱怨STOP E-MAILING ME REQUESTS FOR SOURCE CODE!!!! 

首先,我們需要包含一些額外的頭檔案。第一個(math.h)我們可以使用sqrtf (square root)函數,第二個用來通路檔案。

#include &lt;math.h&gt;      

#include &lt;stdio.h&gt;      

現在我們将定義一些結構體來幫助我們存貯我們的資料(儲存好幾百浮點數組)。第一個是tagMATRIX結構體。如果你仔細地看,你将看到我們正象包含一個十六個浮點數的1維數組~一個2維4×4數族一樣存儲那個矩陣

。這下至OpenGL存儲它的矩陣的方式。如果我們使用4x4數組,這些值将發生錯誤的順序。

typedef struct tagMATRIX     // 儲存OpenGL矩陣的結構體

{

 float Data[16];     // 由于OpenGL的矩陣的格式我們使用[16

}

MATRIX;

第二是向量的類。 僅存儲X,Y和Z的值  

typedef struct tagVECTOR     // 存儲一個單精度向量的結構體

 float X, Y, Z;     // 向量的分量

VECTOR;

第三,我們持有頂點的結構。每一個頂點僅需要它的法線和位置(沒有紋理的現行縱坐标)資訊。它們必須以這樣的次序被存放,否則當它停止裝載檔案的事件将發生嚴重的錯誤(我發現艱難的情形:(教我分塊出租我

的代碼。)。

typedef struct tagVERTEX     // 存放單一頂點的結構

 VECTOR Nor;     // 頂點法線

 VECTOR Pos;     // 頂點位置

VERTEX;

最後是多邊形的結構。我知道這是存儲頂點的愚蠢的方法,要不是它完美工作的簡單的緣故。通常我願意使用一個頂點數組,一個多邊形數組,和包括一個在多邊形中的3個頂點的指數,但這比較容易顯示你想幹什麼。  

typedef struct tagPOLYGON     // 存儲單一多邊形的結構

 VERTEX Verts[3];     // 3個頂點結構數組

POLYGON;

優美簡單的材料也在這裡了。為每一個變量的一個解釋考慮那個注釋。  

bool  outlineDraw = true;    // 繪制輪廓的标記

bool  outlineSmooth = false;    // Anti-Alias 線段的标記

float  outlineColor[3] = { 0.0f, 0.0f, 0.0f };  // 線段的顔色

float  outlineWidth = 3.0f;    // 線段的寬度

VECTOR  lightAngle;     // 燈光的方向

bool  lightRotate = false;    // 是否我們旋轉燈光的标記

float  modelAngle = 0.0f;    // 模型的Y軸角度

bool     modelRotate = false;     // 旋轉模型的标記

POLYGON  *polyData = NULL;     // 多邊形資料

int  polyNum  = 0;    // 多邊形的編号

GLuint  shaderTexture[1];     // 存儲紋理ID

這是得到的再簡單不過的模型檔案格式。 最初的少量位元組存儲在場景中的多邊形的編号,檔案的其餘是tagPOLYGON結構體的一個數組。正因如此,資料在沒有任何需要去分類到詳細的順序的情況下被讀出。  

BOOL ReadMesh ()      // 讀“model.txt” 檔案

 FILE *In = fopen ("Data\\model.txt", "rb");  // 打開檔案

 if (!In)

  return FALSE;    // 如果檔案沒有打開傳回 FALSE

 fread (&amp;polyNum, sizeof (int), 1, In);  // 讀檔案頭,多邊形的個數

 polyData = new POLYGON [polyNum];   // 配置設定記憶體

 fread (&amp;polyData[0], sizeof (POLYGON) * polyNum, 1, In);// 把所有多邊形的資料讀入

 fclose (In);     // 關閉檔案

 return TRUE;     // 工作完成

一些基本的數學函數而已。DotProduct計算2個向量或平面之間的角,Magnitude函數計算向量的長度,Normalize函數縮放向量到一個機關長度。

inline float DotProduct (VECTOR &amp;V1, VECTOR &amp;V2)  //計算兩個向量之間的角度

 return V1.X * V2.X + V1.Y * V2.Y + V1.Z * V2.Z;  

inline float Magnitude (VECTOR &amp;V)    // 計算向量的長度

 return sqrtf (V.X * V.X + V.Y * V.Y + V.Z * V.Z); 

void Normalize (VECTOR &amp;V)     // 建立一個機關長度的向量

 float M = Magnitude (V);    

 if (M != 0.0f)     // 確定我們沒有被0隔開

 {

  V.X /= M;     

  V.Y /= M;

  V.Z /= M;

 }

這個函數利用給定的矩陣旋轉一個向量。請注意它僅旋轉這個向量——與向量的位置相比它算不了什麼。它用來當旋轉法線確定當我們在計算燈光時它們停留在正确的方向上。  

void RotateVector (MATRIX &amp;M, VECTOR &amp;V, VECTOR &amp;D)  // 利用提供的矩陣旋轉一個向量

 D.X = (M.Data[0] * V.X) + (M.Data[4] * V.Y) + (M.Data[8]  * V.Z); 

 D.Y = (M.Data[1] * V.X) + (M.Data[5] * V.Y) + (M.Data[9]  * V.Z); 

 D.Z = (M.Data[2] * V.X) + (M.Data[6] * V.Y) + (M.Data[10] * V.Z); 

引擎的第一個主要的函數…… 初始化,按所說的精确地做。我已經砍掉了在注釋中不再需要的代碼段。  

// 一些GL 初始代碼和使用者初始化從這裡開始

BOOL Initialize (GL_Window* window, Keys* keys)

這3個變量用來裝載着色檔案。在文本檔案中為了單一的線段線段包含了空間,雖然shaderData存儲了真實的着色值。你可能奇怪為什麼我們的96個值被32個代替了。好了,我們需要轉換greyscale 值為RGB以便

OpenGL能使用它們。我們仍然可以以greyscale存儲這些值,但向上負載紋理時我們至于R,G和B成分僅僅使用同一值。  

 char Line[255];      // 255個字元的存儲量

 float shaderData[32][3];     // 96個着色值的存儲量

 g_window = window; g_keys  = keys;

 FILE *In = NULL;      // 檔案指針

當繪制線條時,我們想要確定很平滑。初值被關閉,但是按“2”鍵,它可以被toggled on/off。  

 glShadeModel (GL_SMOOTH);    // 使用色彩陰影平滑

 glDisable (GL_LINE_SMOOTH);    // 線條平滑初始化不可用

 glHint (GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // 提高計算精度  

 glClearColor (0.7f, 0.7f, 0.7f, 0.0f);  // 設定為灰色背景 

 glClearDepth (1.0f);    // 設定深度緩存值

   glEnable (GL_DEPTH_TEST);  // 啟用深度測試

   glDepthFunc (GL_LESS);  // 設定深度比較函數

 glShadeModel (GL_SMOOTH);  // 啟用反走樣

   glDisable (GL_LINE_SMOOTH);

glEnable (GL_CULL_FACE);    // 啟用剔除多邊形功能

我們使 OpenGL燈光不可用因為我們自己做是以的燈光計算。 

 glDisable (GL_LIGHTING);    // 使 OpenGL 燈光不可用

這裡是我們裝載陰影檔案的地方。它簡單地以32個浮點值ASCII碼存放(為了輕松修改),每一個在separate線上。 

 In = fopen ("Data\\shader.txt", "r");   // 打開陰影檔案

 if (In)       // 檢查檔案是否打開

  for (i = 0; i &lt; 32; i++)    // 循環32次

  {

   if (feof (In))    // 檢查檔案是否結束

    break;

   fgets (Line, 255, In);   // 獲得目前線條

這裡我們轉換 greyscale 值為 RGB, 正象上面所描述的。 

   // 從頭到尾複制這個值

   shaderData[i][0] = shaderData[i][1] = shaderData[i][2] = atof (Line);

  }

  fclose (In);     // 關閉檔案

 else

  return FALSE;     

現在我們向上裝載這個紋理。同樣它清楚地規定,不要使用任何一種過濾在紋理上否則它看起來奇怪,至少可以這樣說。GL_TEXTURE_1D被使用因為它是值的一維數組。 

 glGenTextures (1, &amp;shaderTexture[0]);   // 獲得一個自由的紋理ID

 glBindTexture (GL_TEXTURE_1D, shaderTexture[0]);  // 綁定這個紋理。 從現在開始它變為一維

 // 使用鄰近點過濾

 glTexParameteri (GL_TEXTURE_1D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

 glTexParameteri (GL_TEXTURE_1D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

 // 設定紋理

 glTexImage1D (GL_TEXTURE_1D, 0, GL_RGB, 32, 0, GL_RGB , GL_FLOAT, shaderData);

現在調整燈光方向。我已經使得它向下指向Z軸正方向,這意味着它将正面碰撞模型 

 lightAngle.X = 0.0f;     

 lightAngle.Y = 0.0f;     

 lightAngle.Z = 1.0f;    

 Normalize (lightAngle);

讀取Mesh檔案,并傳回  

 return ReadMesh ();     // 讀取Mesh檔案,并傳回

與上面的函數相對應…… 解除安裝,删除由Initalize 和 ReadMesh 建立的紋理和多邊形資料。  

void Deinitialize (void)

 glDeleteTextures (1, &amp;shaderTexture[0]);  // 删除陰影紋理

 delete [] polyData;    // 删除多邊形資料

主要的示範循環。所有這些用來處理輸入和更新角度。控制如下: 

&lt;SPACE&gt; =鎖定旋轉

1 = 鎖定輪廓繪制

2 = 鎖定輪廓 anti-aliasing

&lt;UP&gt; =增加線寬

&lt;DOWN&gt; = 減小線寬

void Update (DWORD milliseconds)    // 這裡執行動作更新

 if (g_keys-&gt;keyDown [' '] == TRUE)   // 空格是否被按下

  modelRotate = !modelRotate;   // 鎖定模型旋轉開/關

  g_keys-&gt;keyDown [' '] = FALSE;

 if (g_keys-&gt;keyDown ['1'] == TRUE)   // 1是否被按下

  outlineDraw = !outlineDraw;   // 切換是否繪制輪廓線

  g_keys-&gt;keyDown ['1'] = FALSE;

 if (g_keys-&gt;keyDown ['2'] == TRUE)   // 2是否被按下

  outlineSmooth = !outlineSmooth;  // 切換是否使用反走樣

  g_keys-&gt;keyDown ['2'] = FALSE;

 if (g_keys-&gt;keyDown [VK_UP] == TRUE)   // 上鍵增加線的寬度

  outlineWidth++;     

  g_keys-&gt;keyDown [VK_UP] = FALSE;

 if (g_keys-&gt;keyDown [VK_DOWN] == TRUE)  // 下減少線的寬度

  outlineWidth--;     

  g_keys-&gt;keyDown [VK_DOWN] = FALSE;

 if (modelRotate)     // 是否旋轉

  modelAngle += (float) (milliseconds) / 10.0f; // 更新旋轉角度

你一直在等待的函數。Draw 函數做每一件事情——計算陰影的值,着色網孔,着色輪廓,等等,這是它作的。  

void Draw (void)

TmpShade用來存儲目前頂點的色度值。所有頂點資料同時被計算,意味着我們隻需使用我們能繼續使用的單個的變量。

TmpMatrix, TmpVector 和 TmpNormal同樣被用來計算頂點資料,TmpMatrix在函數開始時被調整一次并一直保持到Draw函數被再次調用。TmpVector 和 TmpNormal則相反,當另一個頂點被處理時改變。

 float TmpShade;      // 臨時色度值

 MATRIX TmpMatrix;      // 臨時 MATRIX 結構體

 VECTOR TmpVector, TmpNormal;    // 臨時 VECTOR結構體

清除緩沖區矩陣資料 

 glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //  清除緩沖區

 glLoadIdentity ();     // 重置矩陣

首先檢查我們是否想擁有平滑的輪廓。如果是,我們就打開anti-alaising 。否則把它關閉。簡單! 

 if (outlineSmooth)     // 檢查我們是否想要 Anti-Aliased 線條

  glHint (GL_LINE_SMOOTH_HINT, GL_NICEST); // 啟用它們

  glEnable (GL_LINE_SMOOTH);   

 else      // 否則不啟用

  glDisable (GL_LINE_SMOOTH);  

然後我們設定視口。我們反向移動攝象機2個單元,之後以一定角度旋轉模型。注:由于我們首先移動攝象機,這個模型将在現場旋轉。如果我們以另一種方法做,模型将繞攝象機旋轉。

我們之後從OpenGL中取最新建立的矩陣并把它存儲在 TmpMatrix。

 glTranslatef (0.0f, 0.0f, -2.0f);   // 移入螢幕兩個機關

 glRotatef (modelAngle, 0.0f, 1.0f, 0.0f);  // 繞Y軸旋轉這個模型

 glGetFloatv (GL_MODELVIEW_MATRIX, TmpMatrix.Data); // 獲得産生的矩陣

戲法開始了。首先我們啟用一維紋理,然後啟用着色紋理。這被OpenGL用來當作一個look-up表格。我們之後調整模型的顔色(白色)我選擇白色是因為它亮度高并且描影法比其它顔色好。我建議你不要使用黑色:)

 // 卡通渲染代碼

 glEnable (GL_TEXTURE_1D);    // 啟用一維紋理

 glBindTexture (GL_TEXTURE_1D, shaderTexture[0]); // 鎖定我們的紋理

 glColor3f (1.0f, 1.0f, 1.0f);    // 調整模型的顔色

現在我們開始繪制那些三角形。盡管我們看到在數組中的每一個多邊形,然後旋轉它的每一個頂點。第一步是拷貝法線資訊到一個臨時的結構中。是以我們能旋轉法線,但仍然保留原來儲存的值(沒有精确降級)。

 glBegin (GL_TRIANGLES);     // 告訴 OpenGL 我們即将繪制三角形

  for (i = 0; i &lt; polyNum; i++)   // 從頭到尾循環每一個多邊形

   for (j = 0; j &lt; 3; j++)   // 從頭到尾循環每一個頂點 

   {

    TmpNormal.X = polyData[i].Verts[j].Nor.X; // 用目前頂點的法線值填充TmpNormal結構

    TmpNormal.Y = polyData[i].Verts[j].Nor.Y; 

    TmpNormal.Z = polyData[i].Verts[j].Nor.Z;

第二,我們通過初期從OpenGL中攫取的矩陣來旋轉這個法線。我們之後規格化是以它并不全部變為螺旋形。 

    // 通過矩陣旋轉

    RotateVector (TmpMatrix, TmpNormal, TmpVector);

    Normalize (TmpVector);  // 規格化這個新法線

第三,我們獲得那個旋轉的法線的點積燈光方向(稱為lightAngle,因為我忘了從我的舊的light類中改變它)。我們之後限制這個值在0——1的範圍。(從-1到+1)

    // 計算色度值

    TmpShade = DotProduct (TmpVector, lightAngle);

    if (TmpShade &lt; 0.0f)

     TmpShade = 0.0f; // 如果負值限制這個值到0

第四,對于OpenGL我們象忽略紋理坐标一樣忽略這個值。陰影紋理與一個查找表一樣來表現(色度值正成為指數),這是(我認為)為什麼1D紋理被創造主要原因。對于OpenGL我們之後忽略這個頂點位置,并不斷重

複,重複。至此我認為你已經抓到了概念。 

    glTexCoord1f (TmpShade); // 規定紋理的縱坐标當作這個色度值

    // 送頂點

    glVertex3fv (&amp;polyData[i].Verts[j].Pos.X);

      }

 glEnd ();      // 告訴OpenGL 完成繪制

 glDisable (GL_TEXTURE_1D);    // 1D 紋理不可用

現在我們轉移到輪廓之上。一個輪廓能以“它的相鄰的邊,一邊為可見,另一邊為不可見”定義。在OpenGL中,這是深度測試被規定小于或等于(GL_LEQUAL)目前值的地方,并且就在那時所有前面的面被精選。我們同

樣也要混合線條,以使它看起來不錯:)

那麼,我們使混合可用并規定混合模式。我們告訴OpenGL與着色線條一樣着色backfacing多邊形,并且規定這些線條的寬度。我們精選所有前面多邊形,并規定測試深度小于或等于目前的Z值。在這個線條的的顔色被

規定後,我們從頭到尾循環每一個多邊形,繪制它的頂點。我們僅需忽略頂點位置,而不是法線或着色值因為我們需要的僅僅是輪廓。

 // 輪廓代碼

 if (outlineDraw)      // 檢檢視是否我們需要繪制輪廓

  glEnable (GL_BLEND);    // 使混合可用

  // 調整混合模式

  glBlendFunc (GL_SRC_ALPHA ,GL_ONE_MINUS_SRC_ALPHA);

  glPolygonMode (GL_BACK, GL_LINE);   // 繪制輪廓線

  glLineWidth (outlineWidth);    // 調整線寬

  glCullFace (GL_FRONT);    // 剔出前面的多邊形

  glDepthFunc (GL_LEQUAL);    // 改變深度模式

  glColor3fv (&amp;outlineColor[0]);   // 規定輪廓顔色

  glBegin (GL_TRIANGLES);    // 告訴OpenGL我們想要繪制什麼

   for (i = 0; i &lt; polyNum; i++)  // 從頭到尾循環每一個多邊形

    for (j = 0; j &lt; 3; j++)  // 從頭到尾循環每一個頂點

    {

     // 送頂點

     glVertex3fv (&amp;polyData[i].Verts[j].Pos.X);

    }

   }

  glEnd ();      // 告訴 OpenGL我們已經完成

這樣以後,我們就把它規定為以前的狀态,然後退出 

  glDepthFunc (GL_LESS);    // 重置深度測試模式

  glCullFace (GL_BACK);    // 重置剔出背面多邊形

  glPolygonMode (GL_BACK, GL_FILL);   // 重置背面多邊形繪制方式

  glDisable (GL_BLEND);    //  混合不可用

原文及其個版本源代碼下載下傳:

<a href="http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=37">http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=37</a>

沒有整理與歸納的知識,一文不值!高度概括與梳理的知識,才是自己真正的知識與技能。 永遠不要讓自己的自由、好奇、充滿創造力的想法被現實的架構所束縛,讓創造力自由成長吧! 多花時間,關心他(她)人,正如别人所關心你的。理想的騰飛與實作,沒有别人的支援與幫助,是萬萬不能的。

    本文轉自wenglabs部落格園部落格,原文連結:http://www.cnblogs.com/arxive/p/6239540.html,如需轉載請自行聯系原作者