OpenGL进阶（一）之帧缓冲FrameBuffer

本系列文章为Learn OpenGL个人学习总结！
OpenGL入门（一）之认识OpenGL和创建Window
OpenGL入门（二）之渲染管线pipeline，VAO、VBO和EBO
OpenGL入门（三）之着色器Shader
OpenGL入门（四）之纹理Texture
OpenGL入门（五）之Matrix矩阵操作和坐标系统
OpenGL进阶（一）之帧缓冲FrameBuffer
OpenGL进阶（二）之像素缓冲PixelBuffer

简介

帧缓冲(Framebuffer)，它被储存在显存中，包括：用于写入颜色值的颜色缓冲、用于写入深度信息的深度缓冲和允许我们根据一些条件丢弃特定片段的模板缓冲。
我们目前在前边入门文章中所做的所有操作都是在默认帧缓冲的渲染缓冲上进行的。默认的帧缓冲是在你创建窗口的时候生成和配置的（GLFW帮我们做了这些）！

由于我们的帧缓冲不是默认帧缓冲，渲染指令将不会对窗口的视觉输出有任何影响，这个过程也被称为离屏渲染(Off-screen Rendering)。

创建帧缓冲

创建帧缓冲和之前创建缓存非常类似：

//创建FBO
unsigned int fbo;
glGenFramebuffers(1, &fbo);
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
1
2
3
4

但是现在还不能使用这个fbo，因为它还不完整(Complete)，一个完整的帧缓冲需要满足以下的条件：

• 附加至少一个缓冲（颜色、深度或模板缓冲）。
• 至少有一个颜色附件(Attachment)。
• 所有的附件都必须是完整的（保留了内存）。
• 每个缓冲都应该有相同的样本数。

我们可以通过下边函数来检查当前FBO的状态：

if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
    std::cout << "ERROR::FRAMEBUFFER:: Framebuffer is not complete!" << std::endl;
1
2

帧缓冲附件Attachment

附件是一个内存位置，它能够作为帧缓冲的一个缓冲，可以将它想象为一个图像。当创建一个附件的时候我们有两个选项：纹理或渲染缓冲对象(Renderbuffer Object)。

纹理附件

当把一个纹理附加到帧缓冲的时候，所有的渲染指令将会写入到这个纹理中，就像它是一个普通的颜色/深度或模板缓冲一样。

创建纹理附件和前边创建纹理类似：

    //创建纹理附件
    unsigned int texture;
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    //注意这里data参数传了null，仅仅分配了内存，并没有填充
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800*2, 600*2, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
    //也不用关系环绕方式和多级渐变纹理
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    /**
     * @brief 将纹理attach到帧缓冲上
     * 第1个参数：帧缓冲的target
     * 第2个参数：附件类型，最后的0意味着可以添加多个颜色附件
     * 第3个参数：附加的纹理类型
     * 第4个参数：附加的纹理本身
     * 第5个参数：多级渐变纹理的级别，这里设置为0
     */
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

需要注意两点：

1. glTexImage2D中data参数为NULL，因为这里仅仅只需要分配内存，并没有填充
2. 由于我们的环境是Mac OS，在设置纹理宽高时，需要x2！
   https://learnopengl.com/Advanced-OpenGL/Framebuffers这一节中，有网友指出：

For OSX retina device users, you may have to double the screen height and width when you create a framebuffer. Otherwise when you want to draw the screen using a framebuffer, some weird thing may occur (like I found only 1/4 of the previous content is rendered on the screen, which is the left corner).
The reason of this might be that OSX uses 4 pixels to represent one under retina display. And GLFW aware of this problem while some other functions do not. So when you create a 800 x 600 window, it might actually be a 1600 x 1200 window…

渲染缓存对象附件

渲染缓冲对象(Renderbuffer Object)是在纹理之后引入到OpenGL中，作为一个可用的帧缓冲附件类型的。渲染缓冲对象附加的好处是，它会将数据储存为OpenGL原生的渲染格式，它是为离屏渲染到帧缓冲优化过的。所以，交换缓冲这样的操作在使用渲染缓冲对象时会非常快。

    //创建rbo附件
    //优点：将数据储存为OpenGL原生的渲染格式，它是为离屏渲染到帧缓冲优化过的。
    unsigned int rbo;
    glGenRenderbuffers(1, &rbo);
    glBindRenderbuffer(GL_RENDERBUFFER, rbo);
    //创建一个深度和模板rbo
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800*2, 600*2);
    /**
     * @brief 绑定fbo
     * 第1个参数：帧缓冲的target
     * 第2个参数：附件类型，这里是深度/模板附件
     * 第3个参数：附件的类型，指定RBO
     * 第4个参数：附加的rbo本身
     */
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

由于渲染缓冲对象通常都是只写的，它们会经常用于深度和模板附件，因为大部分时间我们都不需要从深度和模板缓冲中读取值，只关心深度和模板测试。
所以：

glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800*2, 600*2);
1

这里第二个参数：设置GL_DEPTH24_STENCIL8作为内部格式，它封装了24位的深度和8位的模板缓冲。

渲染到纹理

这里依然使用英文教程中的例子，核心就是当我们创建一个自定义的FBO进行离屏渲染之后，那么渲染后的内容就存储在FBO的纹理附件中了，我们可以将这个纹理作为默认上屏FBO的输入纹理，来进行上屏渲染！

    //正方体VAO
    unsigned int cubeVAO;
    glGenVertexArrays(1, &cubeVAO);
    glBindVertexArray(cubeVAO);
    unsigned int cubeVBO;
    glGenBuffers(1, &cubeVBO);
    glBindBuffer(GL_ARRAY_BUFFER, cubeVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);

    //地面VAO
    unsigned int planeVAO;
    glGenVertexArrays(1, &planeVAO);
    glBindVertexArray(planeVAO);
    unsigned int planeVBO;
    glGenBuffers(1, &planeVBO);
    glBindBuffer(GL_ARRAY_BUFFER, planeVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(planeVertices), planeVertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);

    //屏幕四边形VAO
    unsigned int screenVAO;
    glGenVertexArrays(1, &screenVAO);
    glBindVertexArray(screenVAO);
    unsigned int screenVBO;
    glGenBuffers(1, &screenVBO);
    glBindBuffer(GL_ARRAY_BUFFER, screenVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(quadVertices), quadVertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)(2 * sizeof(float)));
    glEnableVertexAttribArray(1);

    //加载图片纹理
    unsigned int cubeTexture = loadTexture("../dependency/stb/container.jpg");
    unsigned int floorTexture = loadTexture("../dependency/stb/metal.png");

    glUseProgram(shaderProgram);
    glUniform1i(glGetUniformLocation(shaderProgram, "texture1"), 0);

    glUseProgram(screenshaderProgram);
    glUniform1i(glGetUniformLocation(screenshaderProgram, "screenTexture"), 0);

    //创建FBO
    unsigned int fbo;
    glGenFramebuffers(1, &fbo);
    glBindFramebuffer(GL_FRAMEBUFFER, fbo);

    //创建附件有两个选项：纹理和渲染缓存对象RBO 

    //创建纹理附件
    unsigned int texture;
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    //注意这里data参数传了null，仅仅分配了内存，并没有填充
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800*2, 600*2, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
    //也不用关系环绕方式和多级渐变纹理
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    /**
     * @brief 将纹理attach到帧缓冲上
     * 第1个参数：帧缓冲的target
     * 第2个参数：附件类型，最后的0意味着可以添加多个颜色附件
     * 第3个参数：附加的纹理类型
     * 第4个参数：附加的纹理本身
     * 第5个参数：多级渐变纹理的级别，这里设置为0
     */
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);

    //创建rbo附件
    //优点：将数据储存为OpenGL原生的渲染格式，它是为离屏渲染到帧缓冲优化过的。
    unsigned int rbo;
    glGenRenderbuffers(1, &rbo);
    glBindRenderbuffer(GL_RENDERBUFFER, rbo);
    //创建一个深度和模板rbo
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800*2, 600*2); // use a single renderbuffer object for both a depth AND stencil buffer.
    /**
     * @brief 绑定fbo
     * 第1个参数：帧缓冲的target
     * 第2个参数：附件类型，这里是深度/模板附件
     * 第3个参数：附件的类型，指定RBO
     * 第4个参数：附加的rbo本身
     */
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo); 
    if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
        cout << "ERROR::FRAMEBUFFER:: Framebuffer is not complete!" << endl;

    glBindFramebuffer(GL_FRAMEBUFFER, 0);//解绑帧缓冲

    //渲染
    while (!glfwWindowShouldClose(window))
    {
        ...
        
        glBindFramebuffer(GL_FRAMEBUFFER, fbo);//绑定自定义的帧缓冲，用于渲染地面和箱子
        glEnable(GL_DEPTH_TEST);
        glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        glUseProgram(shaderProgram);
        glm::mat4 model = glm::mat4(1.0f);
        
        glm::mat4 view = glm::mat4(1.0f);
        view = glm::lookAt(glm::vec3(0.0f, 0.0f, 3.0f), glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, 1.0f, 0.0f));
        glm::mat4 projection = glm::mat4(1.0f);
        projection = glm::perspective(glm::radians(45.0f), 800.0f / 600.0f, 0.1f, 100.0f);
        
        int viewLocation = glGetUniformLocation(shaderProgram, "view");
        glUniformMatrix4fv(viewLocation, 1, GL_FALSE, glm::value_ptr(view));
        int projectionLocation = glGetUniformLocation(shaderProgram, "projection");
        glUniformMatrix4fv(projectionLocation, 1, GL_FALSE, glm::value_ptr(projection));

        //处理箱子
        int modelLocation = glGetUniformLocation(shaderProgram, "model");
        
        glBindVertexArray(cubeVAO);
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, cubeTexture);
        model = glm::translate(model, glm::vec3(-1.0f, 0.0f, -1.0f));
        glUniformMatrix4fv(modelLocation, 1, GL_FALSE, glm::value_ptr(model));
        glDrawArrays(GL_TRIANGLES, 0, 36);//绘制一个箱子
        model = glm::mat4(1.0f);
        model = glm::translate(model, glm::vec3(2.0f, 0.0f, 0.0f));
        glUniformMatrix4fv(modelLocation, 1, GL_FALSE, glm::value_ptr(model));
        glDrawArrays(GL_TRIANGLES, 0, 36);//绘制另一个箱子

        //处理地面
        glBindVertexArray(planeVAO);
        //上边纹理单元0已经激活了，这里不需要重复激活，直接bind即可
        glBindTexture(GL_TEXTURE_2D, floorTexture);
        model = glm::mat4(1.0f);
        glUniformMatrix4fv(modelLocation, 1, GL_FALSE, glm::value_ptr(model));
        glDrawArrays(GL_TRIANGLES, 0, 6);//绘制地面

        glBindVertexArray(0);

        //注意此时离屏渲染得到的箱子和地面的纹理就已经存储在了FBO中的颜色纹理中即texture中

        glBindFramebuffer(GL_FRAMEBUFFER, 0);//绑定默认的帧缓冲，用于渲染全屏的四边形
        glDisable(GL_DEPTH_TEST);//禁用深度检测   丢弃全屏四边形
        glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

        //处理全屏四边形
        glUseProgram(screenshaderProgram);
        glBindVertexArray(screenVAO);
        glBindTexture(GL_TEXTURE_2D, texture);//将fbo中的纹理作为输入
        glDrawArrays(GL_TRIANGLES, 0, 6);

        glfwSwapBuffers(window);
        glfwPollEvents();
    }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

整体来说，还是比较容易理解的！需要注意的一点：就是在渲染全屏的四边形的时候，因为不需要关系深度测试，所以可以关闭深度测试。