使用 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.frame
    eaglLayer.isOpaque = true
    view.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 = context
        print("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 in
        var p: UnsafePointer<GLchar>? = UnsafePointer<GLchar>(ptr)
        glShaderSource(vertexShader, 1, &p, nil)
    }
    glCompileShader(vertexShader)
    
    // 创建和编译片段着色器
    let fragmentShader = glCreateShader(GLenum(GL_FRAGMENT_SHADER))
    fragmentSource.withCString { ptr in
        var 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 和 VAO
    var 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 的强大功能。