iOS-OpenGLES-进阶-帧缓存

这是一篇OpenGlES 系统学习教程，记录自己的学习过程。
环境： Xcode10.2.1 + OpenGL ES 3.0
目标： 帧缓存
代码已上传github，Tutorial-08-帧缓存，你的star和fork是对我最好的支持和动力。

概述

目前为止我们所有的渲染都是在默认的帧缓存，也就是当前屏幕缓存。虽然这类缓存已经能够满足我们各种各样的技术了，但是仍然有很多操作需要在不同的缓存之间大量地迁移数据。这就是帧缓存存在的意义。场景：如赛车的后视镜、王者和吃鸡的小地图等等。
默认帧缓存是唯一可以被图形服务器显示系统所识别的帧缓存，也就是说，我们在屏幕上看到的只能是这个缓存。相比较应用程序中创建的帧缓存无法被显示器所显示，也就出现了离屏渲染。

帧缓存

帧缓冲存储器(Frame Buffer)：简称帧缓存或显存，它是屏幕所显示画面的一个直接映象，又称为位映射图(Bit Map)或光栅。帧缓存的每一存储单元对应屏幕上的一个像素，整个帧缓存对应一帧图像。

• 创建一个帧缓存

void glGenFramebuffers (GLsizei n, GLuint* framebuffers)

• 绑定帧缓存

void glBindFramebuffer (GLenum target, GLuint framebuffer)

• 删除帧缓存

void glDeleteFramebuffers (GLsizei n, const GLuint* framebuffers)

• 获取创建缓存状态

let status = glCheckFramebufferStatus(GLenum(GL_FRAMEBUFFER))

if status == GL_FRAMEBUFFER_COMPLETE {
    print("fbo complete succeed width \(frameBuffer1Size.width) height \(frameBuffer1Size.height)")
} else if status == GL_FRAMEBUFFER_UNSUPPORTED {
    print("fbo unsupported")
} else {
    print("Framebuffer Error")
}

帧缓存附件
当我们开始渲染时，可以将渲染结果保存到以下几个地方：

• 创建图像到颜色缓存，甚至是多个颜色缓存，前提是你使用了多重渲染目标(multiple render targets)
• 将遮挡信息保存到深度缓存
• 将逐像素的渲染掩码保存到模板缓存
  这些缓存类型每个都表示一种帧缓存的附件，换句话说，就是将对应的图像缓存(无论是刚渲染完成的，还是准备读取的)，直接附加到帧缓存上。如下：

附件名称	描述
GL_COLOR_ATTACHMENTi	第i个颜色缓存。i 的范围从0(默认颜色缓存)到GL_MAX_COLOR_ATTACHMENTS - 1
GL_DEPTH_ATTACHMENT	深度缓存
GL_STENCIL_ATTACHMENT	模板缓存
GL_DEPTH_STENCIL_ATTACHMENT	这是一种特殊的附件类型，用于保存压缩后的深度——模板缓存(此时需要渲染缓存的像素格式被设置为GL_DEPTH_STENCIL)

绑定帧附件

void glFramebufferTexture2D (GLenum target, GLenum attachment, GLenum textarget, GLuint texture, GLint level) 

渲染到纹理贴图(纹理附件)
当我们为帧缓存绑定一个渲染纹理是，所有的渲染命令都会写入到纹理上，然后我们就可以把它当成普通纹理渲染到其他场景。

glGenTextures(1, &fboTextId)
glBindTexture(GLenum(GL_TEXTURE_2D), fboTextId)
glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_WRAP_S), GL_CLAMP_TO_EDGE)
glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_WRAP_T), GL_CLAMP_TO_EDGE)
glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MAG_FILTER), GL_LINEAR)
glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MIN_FILTER), GL_LINEAR)
// 生成纹理，数据给nil
glTexImage2D(GLenum(GL_TEXTURE_2D), 0, GL_RGBA, GLsizei(frameBuffer1Size.width), GLsizei(frameBuffer1Size.height), 0, GLenum(GL_RGBA), GLenum(GL_UNSIGNED_BYTE), nil)
glBindTexture(GLenum(GL_TEXTURE_2D), 0)

// 生成帧缓存
glGenFramebuffers(1, &frameBuffer1)
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer1)
// 纹理关联到帧缓存颜色附件(渲染成纹理贴图)
glFramebufferTexture2D(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_TEXTURE_2D), fboTextId, 0)

let status = glCheckFramebufferStatus(GLenum(GL_FRAMEBUFFER))

if status == GL_FRAMEBUFFER_COMPLETE {
    print("fbo complete succeed width \(frameBuffer1Size.width) height \(frameBuffer1Size.height)")
} else if status == GL_FRAMEBUFFER_UNSUPPORTED {
    print("fbo unsupported")
} else {
    print("Framebuffer Error")
}
// 解除绑定
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), 0)

渲染过程

// 渲染到纹理贴图
glUseProgram(program1)
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer1)

glClearColor(1.0, 1.0, 1.0, 1.0)
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))

glViewport(0, 0, GLsizei(frameBuffer1Size.width), GLsizei(frameBuffer1Size.height))

glBindVertexArray(vbo1)
glActiveTexture(GLenum(GL_TEXTURE0))
glBindTexture(GLenum(GL_TEXTURE_2D), textId)
glUniform1i(glGetUniformLocation(program1,"u_Texture"), 0)
glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)

// 渲染到默认帧缓存
glUseProgram(program)
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer)

glClearColor(0.0, 1.0, 1.0, 1.0)
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))

glViewport(0, 0, GLsizei(frame.size.width), GLsizei(frame.size.height))

glBindVertexArray(vbo)
glActiveTexture(GLenum(GL_TEXTURE1))
glBindTexture(GLenum(GL_TEXTURE_2D), fboTextId)
glUniform1i(glGetUniformLocation(program1,"u_Texture"), 1)
glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)

presentContex?.presentRenderbuffer(Int(GL_RENDERBUFFER))

注：可以前往demo查看细节

效果