嚴格意義上來說，矩形并不是OpenGL ES的圖元。 但是，讓我們面對現(xiàn)實，繪制這些矩形象繪制一個三角形一樣非常簡單。在本教程中，我們將把基本的三角形繪制代碼轉化為繪制矩形。再一次說明，這些渲染是靜 止的，但是我們通過轉化（即移動它們）來使它們快速移動。當然，一旦我們完成了矩形，我們將試圖完成一個立方體，我們將完成一個紋理映射的立方體。

本教程的快速小結及其他教程

上個教程，我們用空白畫布的XCode工程來渲染了一個實心的白色的三角形。為了做到這點，你創(chuàng)建了一個頂點數(shù)組，告訴OpenGL這些數(shù)據(jù)并且使用 glVertexPointer() 來格式化。為渲染這個頂點數(shù)組定義一個狀態(tài)，并且使用 glDrawArrays ()來渲染它。

今天，我們要使用之前的代碼，用制作三角形的方法來制作一個矩形。要做到這點，我們僅僅需要修改一對（組）代碼。***點是顯然的，我們需要4點來組成矩形， 而不是原來3點的三角形。然后，我們要告訴OpenGL用不一樣的 glDrawArrays().方法來繪制一個不同的物體。

讓我們開始吧。

定義矩形的頂點

打開之前教程中建立的XCode工程，找到 drawView函數(shù)。注釋掉 triangleVertices ，但是不是刪除它，我們在之后轉換的時候還需要用到，并且添加下列代碼：

const GLfloat squareVertices[] = { 
        -1.0, 1.0, -6.0,            // Top left 
        -1.0, -1.0, -6.0,           // Bottom left 
        1.0, -1.0, -6.0,            // Bottom right 
        1.0, 1.0, -6.0              // Top right 
    }; 

這個定義了我們的矩形。注意，這個矩形的頂點也是逆時針的。然后，到下面的繪制三角形的代碼處，將這些代碼都注釋掉，回復到開始狀態(tài)。 所以注釋掉三個函數(shù)調(diào)用的glVertexArray （ ） ， glEnableClientState （ ） ，和glDrawArrays （ ） ，并添加以下代碼：

glVertexPointer(3, GL_FLOAT, 0, squareVertices); 
glEnableClientState(GL_VERTEX_ARRAY); 
glDrawArrays(GL_TRIANGLE_FAN, 0, 4); 

這三項職能相同，只是功能略有不同。

glVertexPointer(3, GL_FLOAT, 0, squareVertices); 

這個唯一的變化就是我們告訴OpenGL使用了不同的頂點設置方案，而不是現(xiàn)在的三角形。

glEnableClientState()同樣是告訴OpenGL從頂點數(shù)組來繪制（而不是顏色數(shù)組或者其他的什么）

glDrawArrays(GL_TRIANGLE_FAN, 0, 4); 

這里有些改變了。在上個教程，我們使用 GL_TRIANGLES 做用***個參數(shù)，并且使用3在第3個參數(shù)里。第2個參數(shù)。之前是0，這里也還是0，因為只包含了矩形的頂點。

***個參數(shù)是繪圖模式，而且你現(xiàn)在看到兩種可能的OpenGL繪圖方式。 我想花時間來討論現(xiàn)在不同的繪圖模式。

它們是：

GL_POINTS

GL_LINES

GL_LINE_LOOP

GL_LINE_STRIP

GL_TRIANGLES

GL_TRIANGLE_STRIP

GL_TRIANGLE_FAN

我們還沒有討論點或線，所以我只介紹***的三個 。在我開始之前，我要提醒你，頂點數(shù)組可能包含不止一個三角形，以便當您只看到一個物體頂點數(shù)組，你要知道，不僅限于這一點。

GL_TRIANGLES - 這個參數(shù)意味著OpenGL使用三個頂點來組成圖形。所以，在開始的三個頂點，將用頂點1，頂點2，頂點3來組成一個三角形。完成后，在用下一組的三個頂點來組成三角形，直到數(shù)組結束。

GL_TRIANGLE_STRIP - OpenGL的使用將最開始的兩個頂點出發(fā)，然后遍歷每個頂點，這些頂點將使用前2個頂點一起組成一個三角形。所以 squareVertices[6~8]將與 squareVerticies[0~2] 和 squareVerticies[3~5].生成一個三角形。 squareVertices[9~11]將與  squareVertices[3~5] 和squareVertices[6~8]生成三角形。

也就是說，0，1，2這三個點組成一個三角形，1，2，3這三個點也組成一個三角形。

注意的是， squareVerticies[0~2]表示的意思是：

squareVerticies[0] x坐標

squareVerticies[1] y坐標

squareVerticies[2] z坐標

如果我沒有說清楚的話，我用下面的例子來說明。

GL_TRIANGLE_FAN - 在跳過開始的2個頂點，然后遍歷每個頂點，讓OpenGL將這些頂點于它們前一個，以及數(shù)組的***個頂點一起組成一個三角形。 squareVertices[6~8]將與 squareVerticies[3~5] （前一個）和 squareVerticies[0~2]（***個）.生成一個三角形。

也就是說，同樣是0，1，2，3這4個頂點。

在STRIP狀態(tài)下是，0，1，2；1，2，3這2個三角形。

在FAN狀態(tài)下是，2，1，0；3，2，0這2個三角形。

這次我們將使用 GL_TRIANGLE_FAN ，我們將在顯示區(qū)域獲得一個矩形。點擊”Build & Go”,然后你將在屏幕上看到一個白色的矩形（平面）

回頭看你的頂點數(shù)組。設法想像用三角形來繪制一個矩形。OpenGL就是這樣做的。

三角形點1： squareVerticies[0~2]        －矩形的左上

三角形點2： squareVerticies[3~5]        －矩形的左下

三角形點3： squareVerticies[6~8]        －矩形的右下

考慮到上述3點，一個三角形的OpenGL的繪制將彌補左下角的一半面積。試想矩形被對角線分割為左上角和右下角。如何通知這兩個三角形？OpenGL剛才只繪制了矩形的左半邊。

三角形點1： squareVerticies[9~11]        －矩形的右上

三角形點2： squareVerticies[6~8]        －矩形的右下，上個點

三角形點3： squareVerticies[0~2]        －矩形的左上，***點

只使用了一個新的點，OpenGL可以渲染這個三角形來完成矩形。

GL_TRIANGLE_STRIP

返回代碼，改變 glDrawArrays() 的***個參數(shù)由 GL_TRIANGLE_FAN 為GL_TRIANGLE_STRIP:。

點擊”Build & Go”然后你會獲得下面的圖片。

讓我們來看看，為什么我們只是單單修改了下繪制模式，我們卻沒有獲得一個矩形。OpenGL展示我們的頂點數(shù)組如下：

三角形點1： squareVerticies[0~2]        －矩形的左上

三角形點2： squareVerticies[3~5]        －矩形的左下

三角形點3： squareVerticies[6~8]        －矩形的右下

OpenGL使用了前3個點來渲染一個三角形。這個左下的三角形和之前是相同的。

三角形點1： squareVerticies[9~11]        －矩形的右上

三角形點2： squareVerticies[6~8]       －矩形的右下，上個點

三角形點3： squareVerticies[3~5]      －矩形的左下，上2個點

這個是現(xiàn)在渲染三角形的3個點。這個三角形和我們理想的三角形有90度的夾角。

如果我們提供的頂點的數(shù)組不同，我們可以實現(xiàn)一個正確的 GL_TRIANGLE_STRIP ，我們現(xiàn)在還是做我們的 GL_TRIANGLE_FAN 。必須記住，你的繪制模式必須和你的頂點數(shù)組保持一致，否則，就會出現(xiàn)奇怪的效果，就象我們剛才修改的那樣。

如果，你堅持使用 GL_TRIANGLE_STRIP ，你只需要修改你的頂點數(shù)組，如下：

const GLfloat stripSquare[] = { 
        -1.0, -1.0, -6.0,               // bottom left 
        1.0, -1.0, -6.0,                // bottom right 
        -1.0, 1.0, -6.0,                // top left 
        1.0, 1.0, -6.0                  // top right 
    }; 

因此，與上述情況，我們可以看到***個三角形將形成頭三個頂點，產(chǎn)生一個三角形如下：

現(xiàn)在，通過指定點右上角頂點（ P4） ，一個新的三角地帶將形成與左上角工作（ P3 ）和第二前頂點（P2）這是右下角。新的頂點顯示為橙色，綠色和紅色如下：

結果是，那種方式都可以讓我們生成一個矩形。最終的結果是相同的。但這些提醒我們，要注意保持你的頂點數(shù)組和你的繪制模式的一致。

***。。。

現(xiàn)在，你已經(jīng)知道如何生成三角形和矩形。我的介紹沒有包含點和線，因為它們比較簡單。在下一教程，我們將增加一些顏色。

一旦我們可以為我們的目標上色，我們可以移動他們，并且在3d中實現(xiàn)紋理映射。雖然，它不會象Doom 3一樣酷。但你知道，你可以開始建立3d的物體，我將開始包含3d世界的知識。

原文的位置：http://web.me.com/smaurice/AppleCoder/iPhone_OpenGL/Entries/2009/3/28_OpenGL_ES_02_-_Drawing_Primitives_2_-_Squares.html