OpenGL ES入门12-帧缓存与叠加滤镜

本文是关于OpenGL ES的系统性学习过程，记录了自己在学习OpenGL ES时的收获。
这篇文章的作用是学习的OpenGL ES帧缓存FBO技术，实例是利用FBO技术对纹理进行多次叠加滤镜。
环境是Xcode8.1+OpenGL ES 2.0
目前代码已经放到github上面，OpenGL ES入门12-帧缓存

欢迎关注我的 OpenGL ES入门专题

实现效果

效果图

帧缓存

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

建构一个完整的帧缓存必须满足以下条件：
我们必须往里面加入至少一个附件（颜色、深度、模板缓存）。
其中至少有一个是颜色附件。
所有的附件都应该是已经完全做好的（已经存储在内存之中）。
每个缓存都应该有同样数目的样本。

• 创建一个帧缓存对象

void glGenRenderbuffers (GLsizei n, GLuint* renderbuffers)  

• 绑定帧缓存

void glBindRenderbuffer (GLenum target, GLuint renderbuffer)

• 删除帧缓存对象

void glDeleteFramebuffers (GLsizei n, const GLuint* framebuffers)

• 对当前的帧缓存对象进行检查

glCheckFramebufferStatus(GL_FRAMEBUFFER) == GL_FRAMEBUFFER_COMPLETE

• 离屏渲染

当我们希望图像渲染到iOS视图上的时候，我们需要申请一个帧缓存对象用来让所有的渲染操作对iOS视图产生影响。 如果后续我们又申请了另外的帧缓存对象，并且激活了该缓存对象，所有渲染操作将渲染到当前绑定的帧缓存的附加缓存中，由于我们的帧缓存不是默认的帧缓存，渲染命令对窗口的视频输出不会产生任何影响。出于这个原因，它被称为离屏渲染（off-screen rendering），就是渲染到一个另外的缓存中，而不是默认的缓存。

纹理附件

当把一个纹理附加到帧缓存上的时候，所有渲染命令会写入到纹理上，就像它是一个普通的颜色、深度或者模板缓存一样。使用纹理的好处是，所有渲染操作的结果都会被储存为一个纹理图像，这样我们就可以简单的在着色器中使用了。

GLuint createTexture2D(GLenum format, int width, int height, void *data)
{
    GLuint texture;
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
    glBindTexture(GL_TEXTURE_2D, 0);
    return texture;
}

纹理附加到帧缓存上：

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

渲染缓存

渲染缓存是OpenGL所管理的一处高效的内存区域，它可以存储格式化的图像数据。渲染缓存中的数据只有关联到一个帧缓存对象之后才有意义，并且需要保证图像缓存的格式需要与OpenGL要求的渲染格式相符，不能将颜色值渲染到深度缓存中。和纹理图像一样，渲染缓存对象也是一个缓存，它可以是一堆字节、整数、像素或者其他东西。渲染缓存对象的一大优点是，它以OpenGL原生渲染格式储存它的数据，因此在离屏渲染到帧缓存的时候，这些数据就相当于被优化过的了。然而，渲染缓存对象通常是只写的，不能修改它们（就像获取纹理，不能写入纹理一样）。可以用 glReadPixels 函数去读取，函数返回一个当前绑定的帧缓存的特定像素区域，而不是直接返回附件本身。

• 创建渲染缓存对象

void glGenRenderbuffers (GLsizei n, GLuint* renderbuffers)  

• 绑定渲染缓存对象

void glBindRenderbuffer (GLenum target, GLuint renderbuffer)

• 为渲染缓存对象分配存储空间

void glRenderbufferStorage (GLenum target, GLenum internalformat, GLsizei width, GLsizei height) 

• 渲染缓存对象附加到帧缓存

void glFramebufferRenderbuffer (GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer)

帧缓存附件

下表是常见的帧缓存附件

附件名称	描述
GL_COLOR_ATTACHMENTi	第i个颜色缓存
GL_DEPTH_ATTACHMENT	深度缓存
GL_STENCIL_ATTACHMENT	模板缓存
GL_DEPTH_STENCIL_ATTACHMENT	特殊的附件类型，用于保存压缩后的深度-模板缓存

实现过程

• 创建着色器程序

- (void)setupGLProgram
{
    NSString *vertFile1 = [[NSBundle mainBundle] pathForResource:@"vert.glsl" ofType:nil];
    NSString *fragFile1 = [[NSBundle mainBundle] pathForResource:@"mosaic.glsl" ofType:nil];
    _program = createGLProgramFromFile(vertFile1.UTF8String, fragFile1.UTF8String);
}

- (void)setupGLProgram1
{
    NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"vert.glsl" ofType:nil];
    NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"frag.glsl" ofType:nil];
    _program1 = createGLProgramFromFile(vertFile.UTF8String, fragFile.UTF8String);
}

• 创建帧缓存

- (void)setupFrameAndRenderBuffer
{
    // 窗口默认帧缓存
    glGenRenderbuffers(1, &_colorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
    // 为 color renderbuffer 分配存储空间
    [_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:_eaglLayer];
    
    glGenFramebuffers(1, &_frameBuffer);
    // 设置为当前 framebuffer
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer);
    // 将 _colorRenderBuffer 装配到 GL_COLOR_ATTACHMENT0 这个装配点上
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER, _colorRenderBuffer);
}

- (void)setupFrameBuffer1
{
    _texture1 = createTexture2D(GL_RGBA, self.frame.size.width, self.frame.size.height, NULL);
    glGenFramebuffers(1, &_frameBuffer1);
    // 设置为当前 framebuffer
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer1);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture1, 0);
}

• 创建VBO

- (void)setupVBO
{
    _vertCount = 6;
    
    GLfloat vertices[] = {
        0.5f,  0.5f, 0.0f, 1.0f, 0.0f,   // 右上
        0.5f, -0.5f, 0.0f, 1.0f, 1.0f,   // 右下
        -0.5f, -0.5f, 0.0f, 0.0f, 1.0f,  // 左下
        -0.5f,  0.5f, 0.0f, 0.0f, 0.0f   // 左上
    };
    
    // 创建VBO
    _vbo = createVBO(GL_ARRAY_BUFFER, GL_STATIC_DRAW, sizeof(vertices), vertices);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program, "position"));
    glVertexAttribPointer(glGetAttribLocation(_program, "position"), 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program, "texcoord"));
    glVertexAttribPointer(glGetAttribLocation(_program, "texcoord"), 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL+sizeof(GL_FLOAT)*3);
}

- (void)setupVBO1
{
    _vertCount = 6;
    
    GLfloat vertices[] = {
        1.0f,  1.0f, 0.0f, 1.0f, 1.0f,   // 右上
        1.0f, -1.0f, 0.0f, 1.0f, 0.0f,   // 右下
        -1.0f, -1.0f, 0.0f, 0.0f, 0.0f,  // 左下
        -1.0f,  1.0f, 0.0f, 0.0f, 1.0f   // 左上
    };
    
    // 创建VBO
    _vbo1 = createVBO(GL_ARRAY_BUFFER, GL_STATIC_DRAW, sizeof(vertices), vertices);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program1, "position"));
    glVertexAttribPointer(glGetAttribLocation(_program1, "position"), 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL);
    
    glEnableVertexAttribArray(glGetAttribLocation(_program1, "texcoord"));
    glVertexAttribPointer(glGetAttribLocation(_program1, "texcoord"), 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL+sizeof(GL_FLOAT)*3);
}

• 渲染（先将马赛克效果渲染到帧缓存，然后将帧缓存以纹理的形式上传到另一着色器程序中进行灰度渲染）

- (void)render
{
    /************************离屏渲染********************************************/
    glUseProgram(_program1);
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer1);
    
    glClearColor(1.0, 1.0, 1.0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    glLineWidth(2.0);
    
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    [self setupVBO1];
    [self setupTexure];
    
    // 激活纹理
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, _texture);
    glUniform1i(glGetUniformLocation(_program1, "image"), 0);
    
    // 索引数组
    unsigned int indices1[] = {0,1,2,3,2,0};
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, indices1);
    
    /************************当前屏幕渲染********************************************/
    glUseProgram(_program);
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer);
    
    glClearColor(1.0, 1.0, 1.0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    glLineWidth(2.0);
    
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    [self setupVBO];
    
    // 激活纹理
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, _texture1);
    glUniform1i(glGetUniformLocation(_program, "image"), 1);
    
    // 索引数组
    unsigned int indices[] = {0,1,2,3,2,0};
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, indices);
    
    //将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
    [_context presentRenderbuffer:GL_RENDERBUFFER];
}