iOS --- OpenGLES之简单的图形绘制

在上一篇博客 iOS — OpenGLES之着色器(shader)的编译、链接及使用 中，简要介绍着色器(shader)的编译、链接及使用。本文将在之前一系列OpenGLES相关博客的基础上，使用OpenGLES绘制基本的图形。
以下两个例子中，对于Shader的编译使用等过程基本一致。

绘制三角形

Shader脚本

Vertex Shader如下：

attribute vec4 Position; // variable passed into

void main(void) {
    gl_Position = Position; // gl_Position is built-in pass-out variable. Must config for in vertex shader
}

Fragment Shader如下：

precision mediump float;

void main(void) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // must set gl_FragColor for fragment shader
}

在这里，我们要绘制一个红色的三角形，因此只需要传递Position参数即可。
颜色我们在Fragment Shader中指定即可 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

关联Shader参数

关于Shader的编译,链接及使用的更多内容, 请参考之前的博客:
iOS — OpenGLES之着色器[shader]的编译、链接及使用

_glProgram = [ShaderOperations compileShaders:@"DemoShaderVertex" shaderFragment:@"DemoShaderFragment"];

glUseProgram(_glProgram);
_positionSlot = glGetAttribLocation(_glProgram, "Position");

// 设置viewport
glViewport(0, 0, self.view.frame.size.width, self.view.frame.size.height);

以上代码使用已编译好的_glProgram着色器程序, 将Shader脚本的Position参数, 与_positionSlot插槽绑定起来.
则后续赋值给_positionSlot的顶点数据, 会直接传递至Shader中的Position参数.
这样, 就完成了Shader脚本的链接及使用步骤.

而glViewPort方法用于设置OpenGLES显示的区域.

仅使用顶点数据绘制三角形

// 设置顶点数组
const GLfloat vertices[] = {
    0.0f,  0.5f, 0.0f,
    -0.5f, -0.5f, 0.0f,
    0.5f,  -0.5f, 0.0f };

// 给_positionSlot传递vertices数据
glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
glEnableVertexAttribArray(_positionSlot);

// Draw triangle
glDrawArrays(GL_TRIANGLES, 0, 3);

[_eaglContext presentRenderbuffer:GL_RENDERBUFFER];

绘制三角形的步骤也很简单:
1. 准备好顶点数据.
2. 将顶点数据传递给_positionSlot插槽, 即传递至Shader脚本中.
3. 使用glDrawArrays绘制图形, 使用presentRenderbuffer:将其呈现到屏幕上.