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

本教程的快速小結(jié)及其他教程

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

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

讓我們開(kāi)始吧。

定義矩形的頂點(diǎn)

打開(kāi)之前教程中建立的XCode工程，找到 drawView函數(shù)。注釋掉 triangleVertices ，但是不是刪除它，我們?cè)谥筠D(zhuǎn)換的時(shí)候還需要用到，并且添加下列代碼：

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 
    }; 

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

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

這三項(xiàng)職能相同，只是功能略有不同。

glVertexPointer(3, GL_FLOAT, 0, squareVertices); 

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

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

glDrawArrays(GL_TRIANGLE_FAN, 0, 4); 

這里有些改變了。在上個(gè)教程，我們使用 GL_TRIANGLES 做用***個(gè)參數(shù)，并且使用3在第3個(gè)參數(shù)里。第2個(gè)參數(shù)。之前是0，這里也還是0，因?yàn)橹话司匦蔚捻旤c(diǎn)。

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

它們是：

GL_POINTS

GL_LINES

GL_LINE_LOOP

GL_LINE_STRIP

GL_TRIANGLES

GL_TRIANGLE_STRIP

GL_TRIANGLE_FAN

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

GL_TRIANGLES - 這個(gè)參數(shù)意味著OpenGL使用三個(gè)頂點(diǎn)來(lái)組成圖形。所以，在開(kāi)始的三個(gè)頂點(diǎn)，將用頂點(diǎn)1，頂點(diǎn)2，頂點(diǎn)3來(lái)組成一個(gè)三角形。完成后，在用下一組的三個(gè)頂點(diǎn)來(lái)組成三角形，直到數(shù)組結(jié)束。

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

也就是說(shuō)，0，1，2這三個(gè)點(diǎn)組成一個(gè)三角形，1，2，3這三個(gè)點(diǎn)也組成一個(gè)三角形。

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

squareVerticies[0] x坐標(biāo)

squareVerticies[1] y坐標(biāo)

squareVerticies[2] z坐標(biāo)

如果我沒(méi)有說(shuō)清楚的話(huà)，我用下面的例子來(lái)說(shuō)明。

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

也就是說(shuō)，同樣是0，1，2，3這4個(gè)頂點(diǎn)。

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

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

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

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

三角形點(diǎn)1： squareVerticies[0~2]        －矩形的左上

三角形點(diǎn)2： squareVerticies[3~5]        －矩形的左下

三角形點(diǎn)3： squareVerticies[6~8]        －矩形的右下

考慮到上述3點(diǎn)，一個(gè)三角形的OpenGL的繪制將彌補(bǔ)左下角的一半面積。試想矩形被對(duì)角線(xiàn)分割為左上角和右下角。如何通知這兩個(gè)三角形？OpenGL剛才只繪制了矩形的左半邊。

三角形點(diǎn)1： squareVerticies[9~11]        －矩形的右上

三角形點(diǎn)2： squareVerticies[6~8]        －矩形的右下，上個(gè)點(diǎn)

三角形點(diǎn)3： squareVerticies[0~2]        －矩形的左上，***點(diǎn)

只使用了一個(gè)新的點(diǎn)，OpenGL可以渲染這個(gè)三角形來(lái)完成矩形。

GL_TRIANGLE_STRIP

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

點(diǎn)擊”Build & Go”然后你會(huì)獲得下面的圖片。

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

三角形點(diǎn)1： squareVerticies[0~2]        －矩形的左上

三角形點(diǎn)2： squareVerticies[3~5]        －矩形的左下

三角形點(diǎn)3： squareVerticies[6~8]        －矩形的右下

OpenGL使用了前3個(gè)點(diǎn)來(lái)渲染一個(gè)三角形。這個(gè)左下的三角形和之前是相同的。

三角形點(diǎn)1： squareVerticies[9~11]        －矩形的右上

三角形點(diǎn)2： squareVerticies[6~8]       －矩形的右下，上個(gè)點(diǎn)

三角形點(diǎn)3： squareVerticies[3~5]      －矩形的左下，上2個(gè)點(diǎn)

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

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

如果，你堅(jiān)持使用 GL_TRIANGLE_STRIP ，你只需要修改你的頂點(diǎn)數(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 
    }; 

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

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

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

***。。。

現(xiàn)在，你已經(jīng)知道如何生成三角形和矩形。我的介紹沒(méi)有包含點(diǎn)和線(xiàn)，因?yàn)樗鼈儽容^簡(jiǎn)單。在下一教程，我們將增加一些顏色。

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

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