这是一篇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查看细节
效果
网友评论