零基础学习OpenGL(七)--帧缓冲、后处理

       用于写入颜色值的颜色缓冲、用于写入深度信息的深度缓冲和允许我们根据一些条件丢弃特定片段的模板缓冲。这些缓冲结合起来叫做帧缓冲(Framebuffer),它被储存在内存中。OpenGL允许我们定义我们自己的帧缓冲,也就是说我们能够定义我们自己的颜色缓冲,甚至是深度缓冲和模板缓冲。

       我们目前所做的所有操作都是在默认帧缓冲的渲染缓冲上进行的。默认的帧缓冲是在你创建窗口的时候生成和配置的(GLFW帮我们做了这些)。有了我们自己的帧缓冲,我们就能够有更多方式来渲染了。(eg:实现镜子,后处理等)

       创建一个帧缓冲对象(fbo):

       unsigned int fbo;

       glGenFramebuffers(1, &fbo);

       首先我们创建一个帧缓冲对象,将它绑定为激活的(Active)帧缓冲,做一些操作,之后解绑帧缓冲。

       glBindFramebuffer(GL_FRAMEBUFFER, fbo);

       绑定目标后,所有的读取和写入帧缓冲的操作都会影响当前绑定的帧缓冲。也可以使用GL_READ_FRAMEBUFFER或GL_DRAW_FRAMEBUFFER,将一个帧缓冲分别绑定到读取目标或写入目标。绑定到GL_READ_FRAMEBUFFER的帧缓冲将会使用在所有像是glReadPixels的读取操作中,而绑定到GL_DRAW_FRAMEBUFFER的帧缓冲将会被用作渲染、清除等写入操作的目标。

        一个完整的帧缓冲需要满足以下的条件:1.附加至少一个缓冲(颜色、深度、模板缓冲); 2.至少有一个颜色附件(是个内存位置,能够作为帧缓冲的一个缓冲,有两个选项:纹理和渲染缓冲对象);3.所有的附件都必须是完整的;4.每个缓冲都应该有相同的样本数。

       从上面的条件中可以知道,我们需要为帧缓冲创建一些附件,并将附件附加到帧缓冲上。在完成所有的条件之后,我们可以以GL_FRAMEBUFFER为参数调用glCheckFramebufferStatus,检查帧缓冲是否完整。它将会检测当前绑定的帧缓冲,并返回规范中这些值的其中之一。如果它返回的是GL_FRAMEBUFFER_COMPLETE,帧缓冲就是完整的了。之后所有的渲染操作将会渲染到当前绑定帧缓冲的附件中。

       if(glCheckFramebufferStatus(GL_FRAMEBUFFER) == GL_FRAMEBUFFER_COMPLETE)

        渲染到一个不同的帧缓冲被叫做离屏渲染(Off-screen Rendering)。要保证所有的渲染操作在主窗口中有视觉效果,我们需要再次激活默认帧缓冲,将它绑定到0

       glBindFramebuffer(GL_FRAMEBUFFER, 0);

       在完成所有的帧缓冲操作之后,不要忘记删除这个帧缓冲对象:

       glDeleteFramebuffers(1, &fbo);

                                                                                       纹理附件

       当把一个纹理附加到帧缓冲的时候,所有的渲染指令将会写入到这个纹理中。可以把它当作像一个普通的颜色/深度或模板缓冲一样。所有渲染操作的结果将会被储存在一个纹理图像中。对于这个纹理,我们仅仅分配了内存而没有填充它。填充这个纹理将会在我们渲染到帧缓冲之后来进行。

       为帧缓冲创建一个纹理:

       unsigned int texture;

       glGenTextures(1, &texture);

       glBindTexture(GL_TEXTURE_2D, texture);

       glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 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);

       然后将它附加到帧缓冲上:

       glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);

       除了颜色附件之外,我们还可以附加一个深度和模板缓冲纹理到帧缓冲对象中。要附加深度缓冲的话,我们将附件类型设置为GL_DEPTH_ATTACHMENT。注意纹理的格式(Format)和内部格式(Internalformat)类型将变为GL_DEPTH_COMPONENT,来反映深度缓冲的储存格式。要附加模板缓冲的话,你要将第二个参数设置为GL_STENCIL_ATTACHMENT,并将纹理的格式设定为GL_STENCIL_INDEX。

       也可以将深度缓冲和模板缓冲附加为一个单独的纹理。纹理的每32位数值将包含24位的深度信息和8位的模板信息。要将深度和模板缓冲附加为一个纹理的话,我们使用GL_DEPTH_STENCIL_ATTACHMENT类型,并配置纹理的格式,让它包含合并的深度和模板值。将一个深度和模板缓冲附加为一个纹理到帧缓冲的例子:

        glTexImage2D( GL_TEXTURE_2D, 0, GL_DEPTH24_STENCIL8, 800, 600, 0, GL_DEPTH_STENCIL, GL_UNSIGNED_INT_24_8, NULL );

        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_TEXTURE_2D, texture, 0);

                                                                                       渲染缓冲对象附件

       和纹理图像一样,渲染缓冲对象是一个真正的缓冲,即一系列的字节、整数、像素等。渲染缓冲对象附加的好处是,它会将数据储存为OpenGL原生的渲染格式。渲染缓冲对象直接将所有的渲染数据储存到它的缓冲中,不会做任何针对纹理格式的转换,让它变为一个更快的可写储存介质。

       但是,渲染缓冲对象通常都是只写的,所以你不能读取它们(比如使用纹理访问)。当然你仍然还是能够使用glReadPixels来读取它,这会从当前绑定的帧缓冲,而不是附件本身,中返回特定区域的像素。

       因为它的数据已经是原生的格式了,当写入或者复制它的数据到其它缓冲中时是非常快的。所以,交换缓冲这样的操作在使用渲染缓冲对象时会非常快。我们在每个渲染迭代最后使用的glfwSwapBuffers,也可以通过渲染缓冲对象实现:只需要写入一个渲染缓冲图像,并在最后交换到另外一个渲染缓冲就可以了。

        unsigned int rbo;

        glGenRenderbuffers(1, &rbo);

        glBindRenderbuffer(GL_RENDERBUFFER, rbo);

        创建一个深度和模板渲染缓冲对象可以通过调用glRenderbufferStorage函数来完成:

        glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);

        //GL_DEPTH24_STENCIL8作为内部格式,它封装了24位的深度和8位的模板缓冲

        最后,附加这个渲染缓冲对象:

        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

什么时候使用渲染缓冲对象,什么时候使用纹理?

        如果你不需要从一个缓冲中采样数据,那么对这个缓冲使用渲染缓冲对象会是明智的选择。如果你需要从缓冲中采样颜色或深度值等数据,那么你应该选择纹理附件。

实践(渲染到纹理):

         我们将会将场景渲染到一个附加到帧缓冲对象上的颜色纹理中,之后将在一个横跨整个屏幕的四边形上绘制这个纹理。

         1.创建一个帧缓冲对象,并绑定它:

             unsigned int framebuffer;

             glGenFramebuffers(1, &framebuffer);

             glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

          2.创建一个纹理图像,我们将它作为一个颜色附件附加到帧缓冲上。我们将纹理的维度设置为窗口的宽度和高度,并且不初始化它的数据:

              // 生成纹理 unsigned int texColorBuffer;

              glGenTextures(1, &texColorBuffer);

               glBindTexture(GL_TEXTURE_2D, texColorBuffer);

               glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 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);

                glBindTexture(GL_TEXTURE_2D, 0);

                // 将它附加到当前绑定的帧缓冲对象

                glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texColorBuffer, 0);

         3.还希望OpenGL能够进行深度测试(如果你需要的话还有模板测试),所以我们还需要添加一个深度(和模板)附件到帧缓冲中。由于我们只希望采样颜色缓冲,而不是其它的缓冲,我们可以为它们创建一个渲染缓冲对象。

             unsigned int rbo;

             glGenRenderbuffers(1, &rbo);

             glBindRenderbuffer(GL_RENDERBUFFER, rbo);

             glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);

             glBindRenderbuffer(GL_RENDERBUFFER, 0);// 当我们为渲染缓冲对象分配了足够的内存之后,我们可以解绑这个渲染缓冲。

         4.将渲染缓冲对象附加到帧缓冲的深度模板附件上:

             glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

          5.最后,我们希望检查帧缓冲是否是完整的,如果不是,我们将打印错误信息。

              if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)

                     std::cout << "ERROR::FRAMEBUFFER:: Framebuffer is not complete!" << std::endl;

               glBindFramebuffer(GL_FRAMEBUFFER, 0);

              注:记得要解绑帧缓冲,保证我们不会不小心渲染到错误的帧缓冲上。

       现在这个帧缓冲就完整了,我们只需要绑定这个帧缓冲对象,让渲染到帧缓冲的缓冲中而不是默认的帧缓冲中。之后的渲染指令将会影响当前绑定的帧缓冲。所有的深度和模板操作都会从当前绑定的帧缓冲的深度和模板附件中(如果有的话)读取。记得不要忽略了深度缓冲!如果忽略这步,那么所有的深度测试操作将不再工作,因为当前绑定的帧缓冲中不存在深度缓冲。所以需要我们先深度缓冲一次。步骤:

         1.将新的帧缓冲绑定为激活的帧缓冲,和往常一样渲染场景

          2.绑定默认的帧缓冲

          3.绘制一个横跨整个屏幕的四边形,将帧缓冲的颜色缓冲作为它的纹理。

帧缓冲的一个渲染迭代会是下面这样:

        // 第一处理阶段(Pass)

        glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

        glClearColor(0.1f, 0.1f, 0.1f, 1.0f);

        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 我们现在不使用模板缓冲

        glEnable(GL_DEPTH_TEST);

        DrawScene();

        // 第二处理阶段

        glBindFramebuffer(GL_FRAMEBUFFER, 0); // 返回默认

        glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

        glClear(GL_COLOR_BUFFER_BIT);

        screenShader.use();

        glBindVertexArray(quadVAO);

        glDisable(GL_DEPTH_TEST);

        glBindTexture(GL_TEXTURE_2D, textureColorbuffer);

        glDrawArrays(GL_TRIANGLES, 0, 6);

用处:

         使我们可以以一个纹理图像的方式访问已渲染场景中的每个像素,进行后处理。

                                                                                              后处理

        现在,整个场景都被渲染到了一个纹理上,我们可以简单地通过修改纹理数据创建出一些非常有意思的效果。

1.反相:

           从屏幕纹理中取颜色值,然后用1.0减去它,对它进行反相:

            FragColor = vec4(vec3(1.0 - texture(screenTexture, TexCoords)), 1.0);

2.灰度

         取所有的颜色分量,将它们平均化。人眼会对绿色更加敏感一些,而对蓝色不那么敏感,所以为了获取物理上更精确的效果,我们需要使用加权的(Weighted)通道:

         FragColor = texture(screenTexture, TexCoords);

          float average = 0.2126 * FragColor.r + 0.7152 * FragColor.g + 0.0722 * FragColor.b;

          FragColor = vec4(average, average, average, 1.0);

3.核效果

        核指的是卷积矩阵,是一个类矩阵的数值数组,它的中心为当前的像素,它会用它的核值乘以周围的像素值,并将结果相加变成一个值。所以,基本上我们是在对当前像素周围的纹理坐标添加一个小的偏移量,并根据核将结果合并。

        锐化效果实现:

        const float offset = 1.0 / 300.0;

        void main()

        {

               vec2 offsets[9] = vec2[](

                       vec2(-offset, offset), // 左上

                       vec2( 0.0f, offset), // 正上

                        vec2( offset, offset), // 右上

                        vec2(-offset, 0.0f), // 左

                        vec2( 0.0f, 0.0f), // 中

                        vec2( offset, 0.0f), // 右

                         vec2(-offset, -offset), // 左下

                         vec2( 0.0f, -offset), // 正下

                         vec2( offset, -offset) // 右下

                   );

                   float kernel[9] = float[]( -1, -1, -1, -1, 9, -1, -1, -1, -1 );

                   vec3 sampleTex[9];

                    for(int i = 0; i < 9; i++)

                    {

                              sampleTex[i] = vec3(texture(screenTexture, TexCoords.st + offsets[i]));

                    }

                    vec3 col = vec3(0.0);

                    for(int i = 0; i < 9; i++)

                            col += sampleTex[i] * kernel[i];

                     FragColor = vec4(col, 1.0);
         }

       在采样时我们将每个偏移量加到当前纹理坐标上,获取需要采样的纹理,之后将这些纹理值乘以加权的核值,并将它们加到一起。

4.模糊

        模糊的卷积矩阵:

        1     2     1 

        2     4      2       /     16

        1      2      1

        float kernel[9] = float[]( 1.0 / 16, 2.0 / 16, 1.0 / 16, 2.0 / 16, 4.0 / 16, 2.0 / 16, 1.0 / 16, 2.0 / 16, 1.0 / 16 );

5.边缘检测

        卷积矩阵:

        1      1      1

        1      -8      1

         1       1      1

参考自https://learnopengl-cn.github.io

猜你喜欢

转载自blog.csdn.net/jfy307596479/article/details/84635994