# 学习OpenGL ES之绘制更多的图形

### 获取示例代码

``````- (void)bindAttribs:(GLfloat *)triangleData {
// attribute vec4 position;
// attribute vec4 color;
glEnableVertexAttribArray(positionAttribLocation);
glEnableVertexAttribArray(colorAttribLocation);

// glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
// indx: 上面Get到的Location
// size: 有几个类型为type的数据，比如位置有x,y,z三个GLfloat元素，值就为3
// type: 一般就是数组里元素数据的类型
// normalized: 暂时用不上
// stride: 每一个点包含几个byte，本例中就是6个GLfloat，x,y,z,r,g,b
// ptr: 数据开始的指针，位置就是从头开始，颜色则跳过3个GLFloat的大小
glVertexAttribPointer(positionAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (char *)triangleData);
glVertexAttribPointer(colorAttribLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (char *)triangleData + 3 * sizeof(GLfloat));
}
``````

``````- (void)drawTriangle {
static GLfloat triangleData[36] = {
0,      0.5f,  0,  1,  0,  0, // x, y, z, r, g, b,每一行存储一个点的信息，位置和颜色
-0.5f,  0.0f,  0,  0,  1,  0,
0.5f,   0.0f,  0,  0,  0,  1,
0,      -0.5f,  0,  1,  0,  0,
-0.5f,  0.0f,  0,  0,  1,  0,
0.5f,   0.0f,  0,  0,  0,  1,

};
[self bindAttribs:triangleData];
glDrawArrays(GL_TRIANGLES, 0, 6);
}
``````

`- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect`里把`[self drawXXX];`替换成`[self drawLines]``[self drawTriangleFan]`... 等中的任一方法即可绘制对应的形状。

``````- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
// 清空之前的绘制
glClearColor(1, 0.2, 0.2, 1);
glClear(GL_COLOR_BUFFER_BIT);

glUniform1f(elapsedTimeUniformLocation, (GLfloat)self.elapsedTime);

// 修改成drawLines，drawTriangleFan ... 等中的任一方法即可
[self drawXXX];
}
``````

#### 三角带

``````- (void)drawTriangleStrip {
static GLfloat triangleData[] = {
0,      0.5f,  0,  1,  0,  0, // x, y, z, r, g, b,每一行存储一个点的信息，位置和颜色
-0.5f,  0.0f,  0,  0,  1,  0,
0.5f,   0.0f,  0,  0,  0,  1,
0,      -0.5f,  0,  1,  0,  0,
};
[self bindAttribs:triangleData];
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}
``````

#### 三角扇形

``````- (void)drawTriangleFan {
static GLfloat triangleData[] = {
-0.5f,  0.0f,  0,  0,  1,  0,
0,      0.5f,  0,  1,  0,  0,
0.5f,   0.0f,  0,  0,  0,  1,
0,      -0.5f,  0,  1,  0,  0,
};
[self bindAttribs:triangleData];
glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
}
``````

#### 直线

``````- (void)drawLines {
static GLfloat lineData[] = {
0.0f,  0.0f,  0,  0,  1,  0,
0.5,   0.5f,  0,  1,  0,  0,
0.0f,  0.0f,  0,  0,  0,  1,
0.5,   -0.5f, 0,  1,  0,  0,
};
[self bindAttribs:lineData];
glLineWidth(5);
glDrawArrays(GL_LINES, 0, 4);
}
``````

v1和v2形成一条线，v3和v4形成一条线。如果想绘制n条线段，那么必须提供2 * n个顶点。

#### 直线带

``````- (void)drawLinesStrip {
static GLfloat lineData[] = {
0.0f,  0.0f,  0,  0,  1,  0,
0.5,   0.5f,  0,  1,  0,  0,
0.5,   -0.5f, 0,  1,  0,  0,
};
[self bindAttribs:lineData];
glLineWidth(5);
glDrawArrays(GL_LINE_STRIP, 0, 3);
}
``````

`GL_LINE_STRIP`的做法是每两个相邻线段共享一个顶点，其实就是三角带的做法。具体效果读者可以自己编译运行看一看。

#### 直线环

``````- (void)drawLinesStrip {
static GLfloat lineData[] = {
0.0f,  0.0f,  0,  0,  1,  0,
0.5,   0.5f,  0,  1,  0,  0,
0.5,   -0.5f, 0,  1,  0,  0,
};
[self bindAttribs:lineData];
glLineWidth(5);
glDrawArrays(GL_LINE_LOOP, 0, 3);
}
``````

#### 点

``````- (void)drawPoints {
static GLfloat lineData[] = {
0.0f,  0.0f,  0,  0,  1,  0,
0.5,   0.5f,  0,  1,  0,  0,
0.5,   -0.5f, 0,  1,  0,  0,
};
[self bindAttribs:lineData];
glDrawArrays(GL_POINTS, 0, 3);
}
``````

``````attribute vec4 position;
attribute vec4 color;

uniform float elapsedTime;

varying vec4 fragColor;

void main(void) {
fragColor = color;
float angle = elapsedTime * 1.0;
float xPos = position.x * cos(angle) - position.y * sin(angle);
float yPos = position.x * sin(angle) + position.y * cos(angle);
gl_Position = position;//vec4(xPos, yPos, position.z, 1.0);
gl_PointSize = 25.0;
}

``````

`gl_PointSize = 25.0`就是对点大小的赋值。OpenGL会为每个顶点数据绘制一个矩形。效果如下。

OpenGL ES