使用 OpenGL ES 在 iOS 上渲染一个四边形：从基础到实现

使用 OpenGL ES 在 iOS 上渲染一个四边形：从基础到实现

在 iOS 开发中，OpenGL ES 是一个强大的工具，用于实现高性能的 2D 和 3D 图形渲染。本文将详细分析一段完整的代码，展示如何使用 OpenGL ES 在 iOS 上渲染一个简单的四边形。我们将从代码的结构、关键模块、着色器的实现以及渲染流程等方面进行深入解析，帮助你理解 OpenGL ES 的工作原理和实现细节。

---

1. 项目概述

这段代码的目标是使用 OpenGL ES 渲染一个带有颜色的四边形。主要实现步骤包括：

1. 设置渲染环境（CAEAGLLayer 和 OpenGL ES 上下文）。
2. 配置帧缓冲区和渲染缓冲区。
3. 编写和加载顶点着色器和片段着色器。
4. 配置顶点数据（位置和颜色）。
5. 使用 OpenGL ES 的绘制命令渲染四边形。

---

2. 渲染流程解析

2.1 设置渲染显示区域

func setupLayer() {eaglLayer = CAEAGLLayer()eaglLayer.frame = view.frameeaglLayer.isOpaque = trueview.layer.addSublayer(eaglLayer)
}

• 作用：创建一个 CAEAGLLayer，作为 OpenGL ES 渲染的目标。
• 关键点：
  • CAEAGLLayer 是 iOS 上 OpenGL ES 渲染的专用图层，支持硬件加速。
  • isOpaque = true：设置图层为不透明，避免透明度计算，提高性能。
  • view.layer.addSublayer(eaglLayer)：将 CAEAGLLayer 添加到视图的层次结构中。

---

2.2 初始化 OpenGL ES 上下文

func setupContext() {if let context = EAGLContext(api: .openGLES3) {EAGLContext.setCurrent(context)myContext = contextprint("Create context success")} else {print("Create context failed!")}
}

• 作用：创建 OpenGL ES 上下文，并将其设置为当前上下文。
• 关键点：
  • EAGLContext(api: .openGLES3)：创建一个 OpenGL ES 3.0 的上下文。如果设备不支持 OpenGL ES 3.0，可以降级为 .openGLES2。
  • EAGLContext.setCurrent(context)：将上下文设置为当前线程的活动上下文，后续的 OpenGL ES 操作都会基于这个上下文。

---

2.3 配置渲染缓冲区和帧缓冲区

渲染缓冲区

func setupRenderBuffers() {glGenRenderbuffers(1, &renderBuffer)glBindRenderbuffer(GLenum(GL_RENDERBUFFER), renderBuffer)
}

• 作用：创建并绑定一个渲染缓冲区，用于存储渲染结果。
• 关键点：
  • glGenRenderbuffers：生成一个渲染缓冲区对象，并将其 ID 存储在 renderBuffer 中。
  • glBindRenderbuffer：将生成的渲染缓冲区绑定到当前上下文。

帧缓冲区

func setupFrameBuffer() {glGenFramebuffers(1, &frameBuffer)glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer)glFramebufferRenderbuffer(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_RENDERBUFFER), renderBuffer)myContext.renderbufferStorage(Int(GL_RENDERBUFFER), from: eaglLayer)
}

• 作用：创建并绑定一个帧缓冲区，将渲染缓冲区附加到帧缓冲区的颜色附件点。
• 关键点：
  • glGenFramebuffers：生成一个帧缓冲区对象。
  • glBindFramebuffer：将帧缓冲区绑定到当前上下文。
  • glFramebufferRenderbuffer：将渲染缓冲区附加到帧缓冲区的颜色附件点（GL_COLOR_ATTACHMENT0）。
  • myContext.renderbufferStorage：为渲染缓冲区分配存储空间，并将其与 CAEAGLLayer 关联。

---

2.4 编写和加载着色器

顶点着色器

#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec4 aColors;
out vec4 vertexColor;void main() {gl_Position = vec4(aPos, 1.0);vertexColor = aColors;
}

• 作用：将顶点位置传递给 OpenGL 的渲染管线，并将顶点颜色传递给片段着色器。
• 关键点：
  • layout (location = 0)：指定顶点属性的位置索引。
  • gl_Position：设置顶点的最终位置。
  • vertexColor：将顶点颜色传递给片段着色器。

片段着色器

#version 300 es
precision mediump float;in vec4 vertexColor;
out vec4 FragColor;void main() {FragColor = vertexColor;
}

• 作用：接收顶点着色器传递的颜色，并将其作为片段的最终颜色输出。
• 关键点：
  • FragColor：输出到帧缓冲区的颜色。

加载和编译着色器

func compileShader(vert: String, frag: String) {// 加载着色器源代码guard let vertexSource = loadShaderSource(from: vert),let fragmentSource = loadShaderSource(from: frag) else {return}// 创建和编译顶点着色器let vertexShader = glCreateShader(GLenum(GL_VERTEX_SHADER))vertexSource.withCString { ptr invar p: UnsafePointer<GLchar>? = UnsafePointer<GLchar>(ptr)glShaderSource(vertexShader, 1, &p, nil)}glCompileShader(vertexShader)// 创建和编译片段着色器let fragmentShader = glCreateShader(GLenum(GL_FRAGMENT_SHADER))fragmentSource.withCString { ptr invar p: UnsafePointer<GLchar>? = UnsafePointer<GLchar>(ptr)glShaderSource(fragmentShader, 1, &p, nil)}glCompileShader(fragmentShader)// 链接着色器程序shaderProgram = glCreateProgram()glAttachShader(shaderProgram, vertexShader)glAttachShader(shaderProgram, fragmentShader)glLinkProgram(shaderProgram)
}

• 作用：加载、编译和链接顶点着色器和片段着色器。
• 关键点：
  • glCreateShader：创建着色器对象。
  • glShaderSource：将着色器源代码附加到着色器对象。
  • glCompileShader：编译着色器。
  • glCreateProgram：创建着色器程序。
  • glAttachShader 和 glLinkProgram：将着色器链接到程序中。

---

2.5 配置顶点数据

func prepareVAOAndVBO() {let positions: [GLfloat] = [-0.5, -0.5, 0.0,0.5, -0.5, 0.0,-0.5,  0.5, 0.0,0.5,  0.5, 0.0]let colors: [GLfloat] = [1.0, 0.2, 0.2, 1.0,0.5, 1.0, 0.2, 1.0,0.5, 0.5, 1.0, 1.0]let indices: [GLubyte] = [0, 1, 2, 3]// 创建 VBO 和 VAOvar positionVBO = GLuint()glGenBuffers(1, &positionVBO)glBindBuffer(GLenum(GL_ARRAY_BUFFER), positionVBO)glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<GLfloat>.size * positions.count, positions, GLenum(GL_STATIC_DRAW))var colorVBO = GLuint()glGenBuffers(1, &colorVBO)glBindBuffer(GLenum(GL_ARRAY_BUFFER), colorVBO)glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<GLfloat>.size * colors.count, colors, GLenum(GL_STATIC_DRAW))var ebo = GLuint()glGenBuffers(1, &ebo)glBindBuffer(GLenum(GL_ELEMENT_ARRAY_BUFFER), ebo)glBufferData(GLenum(GL_ELEMENT_ARRAY_BUFFER), MemoryLayout<GLubyte>.size * indices.count, indices, GLenum(GL_STATIC_DRAW))glGenVertexArrays(1, &vao)glBindVertexArray(vao)glBindBuffer(GLenum(GL_ARRAY_BUFFER), positionVBO)glVertexAttribPointer(0, 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 3), nil)glEnableVertexAttribArray(0)glBindBuffer(GLenum(GL_ARRAY_BUFFER), colorVBO)glVertexAttribPointer(1, 4, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 4), nil)glEnableVertexAttribArray(1)glBindBuffer(GLenum(GL_ELEMENT_ARRAY_BUFFER), ebo)glBindVertexArray(0)
}

• 作用：配置顶点数据（位置和颜色）以及索引数据。
• 关键点：
  • glGenBuffers 和 glBindBuffer：创建并绑定缓冲对象。
  • glBufferData：将顶点数据传递到缓冲区。
  • glVertexAttribPointer 和 glEnableVertexAttribArray：配置顶点属性。

---

2.6 渲染四边形

func renderLayer() {glClearColor(0.0, 0.0, 0.0, 1.0)glClear(GLbitfield(GL_COLOR_BUFFER_BIT))glViewport(GLint(0), GLint(0), GLsizei(view.frame.size.width), GLsizei(view.frame.size.height))shader.begin()glBindVertexArray(vao)glDrawElements(GLenum(GL_TRIANGLE_STRIP), 4, GLenum(GL_UNSIGNED_BYTE), nil)glBindVertexArray(0)myContext.presentRenderbuffer(Int(GL_RENDERBUFFER))
}

• 作用：清屏、设置视口、绑定 VAO，并绘制四边形。
• 关键点：
  • glClearColor 和 glClear：清除屏幕。
  • glViewport：设置视口大小。
  • glDrawElements：使用索引绘制四边形。
  • myContext.presentRenderbuffer：将渲染结果显示到屏幕上。

---

3. 总结

这段代码展示了如何使用 OpenGL ES 在 iOS 上渲染一个简单的四边形。通过设置渲染环境、加载着色器、配置顶点数据和执行绘制命令，我们可以清晰地了解 OpenGL ES 的渲染流程。这种基础的实现方式为更复杂的图形渲染任务（如 3D 模型、纹理映射等）打下了坚实的基础。

如果你是 OpenGL ES 的初学者，这段代码是一个很好的起点。通过修改顶点数据、着色器代码或添加纹理，你可以进一步探索 OpenGL ES 的强大功能。