前言
本文是關(guān)于OpenGL ES的系統(tǒng)性學(xué)習(xí)過程，記錄了自己在學(xué)習(xí)OpenGL ES時(shí)的收獲。
這篇文章的目標(biāo)是學(xué)習(xí)OpenGL ES繪制圓形，熟悉glDrawArrays函數(shù)。
環(huán)境是Xcode8.1+OpenGL ES 2.0
目前代碼已經(jīng)放到github上面，OpenGL ES入門03-OpenGL ES圓形繪制
歡迎關(guān)注我的 OpenGL ES入門專題
概述
OpenGLES圖元的繪制方式有GL_POINTS 、GL_LINES、 GL_LINE_LOOP 、GL_LINE_STRIP、GL_TRIANGLES 、GL_TRIANGLE_STRIP 、GL_TRIANGLE_FAN 這幾種，每個(gè)都有自己獨(dú)特的作用。在使用時(shí)根據(jù)自己的需求選擇不同的繪制方式進(jìn)行繪制。
| 繪制方式 | 解釋 |
|---|---|
| GL_POINTS | 點(diǎn) |
| GL_LINES | 線段 |
| GL_LINE_STRIP | 多段線 |
| GL_LINE_LOOP | 線圈 |
| GL_TRIANGLES | 三角形 |
| GL_TRIANGLE_STRIP | 三角形條帶 |
| GL_TRIANGLE_FAN | 三角形扇 |
效果圖
構(gòu)建定點(diǎn)和顏色數(shù)據(jù)
我們選擇使用圓的三角函數(shù)表示方式*** f(x, y）= r * (cosθ, sinθ)*** 來計(jì)算圓上面每一點(diǎn)的坐標(biāo)。(當(dāng)然也可以根據(jù)公式 (x-a)(x-a) + (y-b)(y-b) = r*r** 計(jì)算圓上點(diǎn)的坐標(biāo)，在此選擇第一種方式)
1、分割。根據(jù)圓的方程θ取值范圍[0 - 2*PI]進(jìn)行等份分割，方便我們創(chuàng)建一定數(shù)量的頂點(diǎn)數(shù)據(jù)，之后我們便可用線段來代替曲線進(jìn)行圓的繪制。
_vertCount = 100; //分割份數(shù)
float delta = 2.0*M_PI/_vertCount;
2、坐標(biāo)計(jì)算。根據(jù)分割的結(jié)果，求出圓上每一點(diǎn)的坐標(biāo)值。
typedef struct {
GLfloat x,y,z;
GLfloat r,g,b;
} Vertex;
for (int i = 0; i < _vertCount; i++) {
GLfloat x = a * cos(delta * i);
GLfloat y = b * sin(delta * i);
GLfloat z = 0.0;
vertext[i] = (Vertex){x, y, z, x, y, x+y};
printf("%f , %f\n", x, y);
}
3、坐標(biāo)校正。由于我們屏幕寬高比并不為1，因此我們設(shè)置的半徑0.8在水平和豎直方向?qū)?yīng)的設(shè)備像素坐標(biāo)并不相等。因此，在繪制過程中我們必須校正水平和豎直方向的半徑值，已達(dá)到看起來相等的效果。
float a = 0.8; //水平方向的半徑
float b = a * self.frame.size.width / self.frame.size.height;
4、圓形繪制。
glEnableVertexAttribArray(glGetAttribLocation(_program, "position"));
glVertexAttribPointer(glGetAttribLocation(_program, "position"), 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), vertext);
glEnableVertexAttribArray(glGetAttribLocation(_program, "color"));
glVertexAttribPointer(glGetAttribLocation(_program, "color"), 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), vertext+sizeof(GLfloat)*3);
glDrawArrays(GL_LINE_LOOP, 0, _vertCount);
其它繪制方式
GL_LINES 以(v0,v1),(v2,v3),(v4,v5)的形式繪制直線。(當(dāng)繪制的點(diǎn)只有兩個(gè)時(shí)，GL_LINES與GL_LINE_STRIP繪線方式?jīng)]有差異）
glDrawArrays(GL_LINES, 0, _vertCount);
GL_LINE_STRIP 以(v0,v1),(v1,v2),(v2,v3),(v3,v4),(v4,v5)的形式繪制直線。GL_LINE_LOOP以(v0,v1),(v1,v2),(v2,v3),(v3,v4),(v4,v5),(v5,v0)的形式繪制直線，比GL_LINE_STRIP多一條(v5,v0)的直線。
glDrawArrays(GL_LINE_STRIP, 0, _vertCount);
GL_POINTS 每個(gè)坐標(biāo)就是一個(gè)點(diǎn)。
glDrawArrays(GL_POINTS, 0, _vertCount);
GL_TRIANGLES 每三個(gè)頂之間繪制三角形，之間不連接。(由于是圓形，效果并不明顯）
glDrawArrays(GL_TRIANGLES, 0, _vertCount);
GL_TRIANGLE_STRIP 它是由最少3個(gè)點(diǎn)構(gòu)成（正好3個(gè)點(diǎn)就是一個(gè)GL_TRIANGLES）每增加1個(gè)點(diǎn)，新增的點(diǎn)會(huì)和之前已有的兩個(gè)點(diǎn)構(gòu)成新的三角形，依次類推。（由于是圓形，效果并不明顯）
glDrawArrays(GL_TRIANGLE_STRIP, 0, _vertCount);
GL_TRIANGLE_FAN 以(v0,v1,v2),(v0,v2,v3),(v0,v3,v4)的形式繪制三角形。
glDrawArrays(GL_TRIANGLE_FAN, 0, _vertCount);
