前面幾篇文章都只是繪制了平面圖形，接下來(lái)我們開(kāi)始繪制一個(gè)真正的3D立方體圖形。代碼在前一篇文章基礎(chǔ)上修改。
繪制立方體之前，我們需要知道這個(gè)立方體的各個(gè)頂點(diǎn)坐標(biāo)(找不到圖，自己畫(huà)的，請(qǐng)將就將就)：
一個(gè)立方體有8個(gè)頂點(diǎn)，在這里是：
GLfloat vertices[] = {
-0.5f, -0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
0.5f, -0.5f, 0.5f,
0.5f, -0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
-0.5f, 0.5f, -0.5f,
-0.5f, -0.5f, -0.5f,
};
它的索引是:
GLubyte indices[] = {
// Front face
0, 3, 2, 0, 2, 1,
// Back face
7, 5, 4, 7, 6, 5,
// Left face
0, 1, 6, 0, 6, 7,
// Right face
3, 4, 5, 3, 5, 2,
// Up face
1, 2, 5, 1, 5, 6,
// Down face
0, 7, 4, 0, 4, 3
};
所以我們修改render函數(shù)的代碼如下:
-(void)render
{
//設(shè)置清屏顏色,默認(rèn)是黑色，如果你的運(yùn)行結(jié)果是黑色，問(wèn)題就可能在這兒
glClearColor(0.3, 0.5, 0.8, 1.0);
/*
glClear指定清除的buffer
共可設(shè)置三個(gè)選項(xiàng)GL_COLOR_BUFFER_BIT，GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT
也可組合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
這里我們只用了color buffer，所以只需清除GL_COLOR_BUFFER_BIT
*/
glClear(GL_COLOR_BUFFER_BIT);
// Setup viewport
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
GLfloat vertices[] = {
-0.5f, -0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
0.5f, -0.5f, 0.5f,
0.5f, -0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
-0.5f, 0.5f, -0.5f,
-0.5f, -0.5f, -0.5f,
};
GLubyte indices[] = {
// Front face
0, 3, 2, 0, 2, 1,
// Back face
7, 5, 4, 7, 6, 5,
// Left face
0, 1, 6, 0, 6, 7,
// Right face
3, 4, 5, 3, 5, 2,
// Up face
1, 2, 5, 1, 5, 6,
// Down face
0, 7, 4, 0, 4, 3
};
glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
glEnableVertexAttribArray(_positionSlot);
glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(GLubyte), GL_UNSIGNED_BYTE, indices);
[_context presentRenderbuffer:_renderBuffer];
}
運(yùn)行結(jié)果如下：
誒，我們不是畫(huà)了個(gè)立方體嗎？代碼畫(huà)的怎么跟我在紙上畫(huà)的那個(gè)不一樣呢？
事實(shí)上，我們代碼畫(huà)的確實(shí)是一個(gè)立方體，只是我們觀察的角度是從正方體正面看過(guò)去的，立體的部分全被前面的面擋住了，只要我們旋轉(zhuǎn)一下立方體，就能看到立體的部分了，不過(guò)這個(gè)問(wèn)題會(huì)在下一篇講到，這里先繪制立方體，只修改它的顏色。
而且，事實(shí)上我們畫(huà)的是個(gè)正方體，這里展示是個(gè)長(zhǎng)方體，這是由于沒(méi)有進(jìn)行寬高等比的投影矩陣處理，這里opengl坐標(biāo)是按著屏幕來(lái)的，所以是個(gè)長(zhǎng)方體。
圖中立方體的顏色是我們?cè)谄髂_本文件自己定義的固定顏色
precision mediump float;
void main()
{
gl_FragColor = vec4(0.9, 0.5, 0.7, 1.0);
}
如果我們想在外面的代碼中動(dòng)態(tài)修改它的顏色，我們需要定義一個(gè)變量來(lái)接收傳入的顏色。
1.修改頂點(diǎn)著色器腳本文件：
attribute vec4 vPosition;
attribute vec4 vSourceColor; //新加
varying vec4 vDestinationColor; //新加
void main(void)
{
gl_Position = vPosition;
vDestinationColor = vSourceColor; //新加
}
2.修改片元著色器腳本文件
precision mediump float;
varying vec4 vDestinationColor; //新加
void main()
{
gl_FragColor = vDestinationColor; //修改
}
以上著色器代碼在《OpenGLES-02 繪制基本圖元(點(diǎn)、線、三角形)》中有介紹，詳細(xì)了解glsl請(qǐng)點(diǎn)這里 (也希望你確實(shí)做過(guò)《撥開(kāi)迷霧》里的準(zhǔn)備工作，如果到這里你還有很多概念不理解，希望你停下來(lái)，先去查詢資料，理解概念)： http://www.cnblogs.com/kex1n/p/3941680.html
好啦，著色器語(yǔ)言已經(jīng)寫(xiě)好了，接下來(lái)我們開(kāi)始使用
3.代碼繪制
我們?cè)贛yGLView中新定義一個(gè)變量：GLuint _colorSlot; //顏色槽位
@interface MyGLView ()
{
CAEAGLLayer *_eaglLayer; //OpenGL內(nèi)容只會(huì)在此類layer上描繪
EAGLContext *_context; //OpenGL渲染上下文
GLuint _renderBuffer; //
GLuint _frameBuffer; //
GLuint _programHandle;
GLuint _positionSlot; //頂點(diǎn)槽位
GLuint _colorSlot; //顏色槽位
}
然后在setupProgram函數(shù)中獲取這個(gè)_colorSlot：
_positionSlot = glGetAttribLocation(_programHandle, "vPosition");
_colorSlot = glGetAttribLocation(_programHandle, "vSourceColor"); //新加
接下來(lái)我們需要構(gòu)造自己的顏色數(shù)據(jù)，對(duì)于OpenGL，它支持兩種著色模式：?jiǎn)握{(diào)著色（Flat）與平滑著色（smooth，也稱Gouraud著色）。單調(diào)著色就是整個(gè)圖元的顏色就是它的任何一個(gè)頂點(diǎn)的顏色，比如上面固定顏色的三角形效果；平滑著色下每個(gè)頂點(diǎn)都是單獨(dú)進(jìn)行的，頂點(diǎn)之間的點(diǎn)是所有頂點(diǎn)顏色的均勻插值計(jì)算而得，頂點(diǎn)與頂點(diǎn)顏色是在一起的，如下：
GLfloat vertices[] = {
-0.5f, -0.5f, 0.5f, 1.0, 0.0, 0.0, 1.0, // red
-0.5f, 0.5f, 0.5f, 1.0, 1.0, 0.0, 1.0, // yellow
0.5f, 0.5f, 0.5f, 0.0, 0.0, 1.0, 1.0, // blue
0.5f, -0.5f, 0.5f, 1.0, 1.0, 1.0, 1.0, // white
0.5f, -0.5f, -0.5f, 1.0, 1.0, 0.0, 1.0, // yellow
0.5f, 0.5f, -0.5f, 1.0, 0.0, 0.0, 1.0, // red
-0.5f, 0.5f, -0.5f, 1.0, 1.0, 1.0, 1.0, // white
-0.5f, -0.5f, -0.5f, 0.0, 0.0, 1.0, 1.0, // blue
};
索引數(shù)據(jù)是不變的，然后我們需要使用顏色槽位數(shù)據(jù)，修改render函數(shù)如下:
-(void)render
{
//設(shè)置清屏顏色,默認(rèn)是黑色，如果你的運(yùn)行結(jié)果是黑色，問(wèn)題就可能在這兒
glClearColor(0.3, 0.5, 0.8, 1.0);
/*
glClear指定清除的buffer
共可設(shè)置三個(gè)選項(xiàng)GL_COLOR_BUFFER_BIT，GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT
也可組合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
這里我們只用了color buffer，所以只需清除GL_COLOR_BUFFER_BIT
*/
glClear(GL_COLOR_BUFFER_BIT);
// Setup viewport
glViewport(0, 0, self.frame.size.width, self.frame.size.height);
GLfloat vertices[] = {
-0.5f, -0.5f, 0.5f, 1.0, 0.0, 0.0, 1.0, // red
-0.5f, 0.5f, 0.5f, 1.0, 1.0, 0.0, 1.0, // yellow
0.5f, 0.5f, 0.5f, 0.0, 0.0, 1.0, 1.0, // blue
0.5f, -0.5f, 0.5f, 1.0, 1.0, 1.0, 1.0, // white
0.5f, -0.5f, -0.5f, 1.0, 1.0, 0.0, 1.0, // yellow
0.5f, 0.5f, -0.5f, 1.0, 0.0, 0.0, 1.0, // red
-0.5f, 0.5f, -0.5f, 1.0, 1.0, 1.0, 1.0, // white
-0.5f, -0.5f, -0.5f, 0.0, 0.0, 1.0, 1.0, // blue
};
GLubyte indices[] = {
// Front face
0, 3, 2, 0, 2, 1,
// Back face
7, 5, 4, 7, 6, 5,
// Left face
0, 1, 6, 0, 6, 7,
// Right face
3, 4, 5, 3, 5, 2,
// Up face
1, 2, 5, 1, 5, 6,
// Down face
0, 7, 4, 0, 4, 3
};
glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), vertices);
glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), vertices+3);
glEnableVertexAttribArray(_positionSlot);
glEnableVertexAttribArray(_colorSlot);
glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(GLubyte), GL_UNSIGNED_BYTE, indices);
[_context presentRenderbuffer:_renderBuffer];
}
到這里就得回過(guò)來(lái)看glVertexAttribPointer()了，
void glVertexAttribPointer (GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr);
參數(shù) index ：為頂點(diǎn)數(shù)據(jù)（如頂點(diǎn)，顏色，法線，紋理或點(diǎn)精靈大小）在著色器程序中的槽位；
參數(shù) size ：指定每一種數(shù)據(jù)的組成大小，比如頂點(diǎn)由 x, y, z 3個(gè)組成部分，紋理由 u, v 2個(gè)組成部分；
參數(shù) type ：表示每一個(gè)組成部分的數(shù)據(jù)格式；
參數(shù) normalized ： 表示當(dāng)數(shù)據(jù)為法線數(shù)據(jù)時(shí)，是否需要將法線規(guī)范化為單位長(zhǎng)度，對(duì)于其他頂點(diǎn)數(shù)據(jù)設(shè)置為 GL_FALSE 即可。如果法線向量已經(jīng)為單位長(zhǎng)度設(shè)置為 GL_FALSE 即可，這樣可免去不必要的計(jì)算，提升效率；
stride ： 表示上一個(gè)數(shù)據(jù)到下一個(gè)數(shù)據(jù)之間的間隔（同樣是以字節(jié)為單位），OpenGL ES根據(jù)該間隔來(lái)從由多個(gè)頂點(diǎn)數(shù)據(jù)混合而成的數(shù)據(jù)塊中跳躍地讀取相應(yīng)的頂點(diǎn)數(shù)據(jù)；
ptr ：值得注意，這個(gè)參數(shù)是個(gè)多面手。這里它指向 CPU 內(nèi)存中的頂點(diǎn)數(shù)據(jù)數(shù)組；
代碼中我們給stride填值，以前都是寫(xiě)的0，現(xiàn)在是寫(xiě)出了具體步長(zhǎng)，寫(xiě)0是針對(duì)單一數(shù)據(jù)，如只有頂點(diǎn)數(shù)據(jù)或顏色數(shù)據(jù)的時(shí)候，系統(tǒng)會(huì)自己計(jì)算匹配，這時(shí)候可以寫(xiě)0，若不是單一數(shù)據(jù)，如上有頂點(diǎn)有顏色，需要自己計(jì)算出具體步長(zhǎng)。
再看后面ptr的填值，對(duì)顏色數(shù)據(jù)，我們給出的是vertices+3，表示顏色數(shù)據(jù)從vertices的第4位開(kāi)始，往后4位是顏色數(shù)據(jù)(size為4)。
代碼的運(yùn)行結(jié)果如下:
結(jié)果顯示了我們立方體正面的顏色，頂點(diǎn)用到了(0，1，2，3),所以顏色是紅黃藍(lán)白的線性插值。下一篇文章，我們將對(duì)這個(gè)立方體進(jìn)行3D變換以看清它確實(shí)是個(gè)立方體。
所有教程代碼在此 : https://github.com/qingmomo/iOS-OpenGLES-
