OpenGL学习19——帧缓冲区

2021-07-07 本文已影响0人蓬篙人

帧缓冲区（Framebuffers）

目前我们已经使用了多种类型的屏幕缓冲区：一个可以写入颜色的颜色缓冲区，一个可以写入深度值和测试深度信息的深度缓冲区，和一个允许我们基于特定条件丢弃片元的模板缓冲区。这些缓冲区的组合存储在GPU的内存中，统称为帧缓冲区（framebuffer）。

1. 创建一个帧缓冲区

像其它OpenGL对象的创建一样，我们使用glGenFramebuffers函数来创建帧缓冲区对象。

unsigned int fbo;
glGenFramebuffers(1, &fbo);

帧缓冲区对象的绑定。

// 参数
//  GL_FRAMEBUFFER: 可执行读写操作
//  GL_READ_FRAMEBUFFER: 只读帧缓冲区
//  GL_DRAW_FRAMEBUFFER: 只写缓冲区
glBindFramebuffer(GL_FRAMEBUFFER, fbo);

要完成帧缓冲区的设置我们还需要满足如下条件：
- 我们必须至少附加一个缓冲区（颜色，深度或模板缓冲区）。
- 应该至少有一个颜色附件（attachment）。
- 所有附件必须也是完整的（保留了内存）。
- 每个缓冲区应该拥有相同的样本（sample）。
要检查帧缓冲区是否完整设置，我们可以调用glCheckFramebufferStatus函数。

if(glCheckFramebufferStatus(GL_FRAMEBUFFER) == GL_FRAMEBUFFER_COMPLETE)
{
    // 执行操作
}

因为我们设置的帧缓冲区不是默认的帧缓冲区，因此所有渲染指令不会影响窗体的输出效果，所以也称为离线渲染（off-screen rendering）。如果要渲染到主窗体，我们可以激活默认帧缓冲区。

glBindFramebuffer(GL_FRAMEBUFFER, 0);

帧缓冲区的删除。

glDeleteFramebuffers(1, &fbo);

一个附件就是一个可以为帧缓冲区对象充当缓冲区的内存位置，我们可以把它看作是占用一定内存的一张图像。当创建附件时我们有两个选项：纹理对象或渲染缓冲区（readerbuffer）对象。
当附加一个纹理到帧缓冲区后，所有渲染指令都会写入纹理，就像它是一个普通的颜色/深度或模板缓冲区。使用纹理附件的好处就是我们可以轻易在着色器中使用。为帧缓冲区创建一个纹理附件大致与创建普通纹理一样。

unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
// 主要区别：将维度设置为屏幕尺寸（非必要），纹理数据参数传入NULL
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);

1. 第一个参数：帧缓冲区类型，只写、只读或两者。
2. 第二个参数：我们要附加的附件类型。该参数后缀0表示我们可以不止附加一个附件。
3. 第三个参数：附加的纹理类型。
4. 第四个参数：实际附加的纹理。
5. 第五个参数：mipmap层级，我们保持为0。

使用上述函数，我们可以使用附件类型GL_DEPTH_ATTACHMENT和纹理格式GL_DEPTH_COMPONENT来附加深度缓冲区；使用GL_STENCIL_ATTACHMENT和GL_STENCIL_INDEX来附加模板缓冲区。
我们也可以在单个纹理上同时附加深度和模板缓冲区，如下代码所示：

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);

渲染缓冲区对象（Renderbuffer objects）与纹理图像相似，一个渲染缓冲区对象实际上就是一个缓冲区，即一个字节、整数、像素或其他数据类型的数组。渲染缓冲区对象不能直接读取，因此相比纹理附件，在离线渲染时性能更好。
创建一个渲染缓冲区对象的代码与帧缓冲区的相似：

unsigned int rbo;
glGenRenderbuffers(1, &rbo);

绑定渲染缓冲区。

glBindRenderbuffer(GL_RENDERBUFFER, rbo);

创建深度和模板渲染缓冲区对象需使用glRenderbufferSorage函数。

glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);

附加渲染缓冲区对象。

glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

一般情况下，无需从缓冲区采样数据，使用渲染缓冲区对象；需要从缓冲区采样如颜色或深度值，则使用纹理附件。

2. 渲染到纹理附件

下面我们在附加到我们创建的帧缓冲区对象的一个纹理中渲染场景，然后将纹理绘制到占据整个屏幕的四方形上。

首先，我们创建和绑定帧缓冲区对象。

unsigned int framebuffer;
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

接下来，我们创建一个尺寸与窗体一样的图像纹理并附加到帧缓冲区。

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);
// attach texture to bound framebuffer
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texColorBuffer, 0);

因为我们希望离线渲染时也能够进行深度测试，因此我们将深度（和模板）附件附加到帧缓冲区。

unsigned int rbo;
glGenRenderbuffers(1, &rbo);
glBindRenderbuffer(GL_RENDERBUFFER, rbo);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);
glBindRenderbuffer(GL_RENDERBUFFER, 0);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
{
    std::cout << "ERROR::FRAMEBUFFER::Framebuffer is not complete!" << std::endl;
}
glBindFramebuffer(GL_FRAMEBUFFER, 0);

要将场景渲染到一个纹理中，我们需要完成以下步骤：
- 1. 在将帧缓冲区绑定为激活的缓冲区时进行场景渲染。
- 1. 绑定回默认帧缓冲区。
- 1. 使用我们新建的帧缓冲区的颜色缓冲区作为纹理绘制占据整个屏幕的四方形。
为了简单，我直接以标准设备坐标给出占据整个屏幕的四方形顶点数据，这样我们可以直接将其作为顶点着色器的输出。

float quadVertices[] = {
    // position   // texture
    -1.0f,  1.0f, 0.0f, 1.0f,
    -1.0f, -1.0f, 0.0f, 0.0f,
     1.0f, -1.0f, 1.0f, 0.0f,

    -1.0f,  1.0f, 0.0f, 1.0f,
     1.0f, -1.0f, 1.0f, 0.0f,
     1.0f,  1.0f, 1.0f, 1.0f,
};

四方形的顶点着色器。

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoords;

out vec2 TexCoords;

void main()
{
    TexCoords = aTexCoords;    
    gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0);
}

四方形的片元着色器。

#version 330 core
out vec4 FragColor;

in vec2 TexCoords;

uniform sampler2D screenTexture;

void main()
{   
    FragColor = texture(screenTexture, TexCoords);
}

渲染循环中的渲染过程。

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);
///////////////////////绘制场景///////////////////////
shader.use();
glm::mat4 model = glm::mat4(1.0f);
glm::mat4 view = camera.GetViewMatrix();
glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);
shader.setMat4("view", view);
shader.setMat4("projection", projection);
// cubes
glBindVertexArray(cubeVAO);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, cubeTexture);
model = glm::translate(model, glm::vec3(-1.0f, 0.0f, -1.0f));
shader.setMat4("model", model);
glDrawArrays(GL_TRIANGLES, 0, 36);
model = glm::mat4(1.0f);
model = glm::translate(model, glm::vec3(2.0f, 0.0f, 0.0f));
shader.setMat4("model", model);
glDrawArrays(GL_TRIANGLES, 0, 36);
// floor
glBindVertexArray(planeVAO);
glBindTexture(GL_TEXTURE_2D, floorTexture);
shader.setMat4("model", glm::mat4(1.0f));
glDrawArrays(GL_TRIANGLES, 0, 6);
glBindVertexArray(0);
///////////////////////////////////////////////////////
/////////////////////屏幕渲染/////////////////////////
glBindFramebuffer(GL_FRAMEBUFFER, 0);
glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
screenShader.use();
glBindVertexArray(quadVAO);
glDisable(GL_DEPTH_TEST);
glBindTexture(GL_TEXTURE_2D, texColorBuffer);
glDrawArrays(GL_TRIANGLES, 0, 6);
///////////////////////////////////////////////////////

渲染效果。

帧缓冲区渲染

3. 后处理（Post-processing）

因为现在整个场景被渲染为一个单一的纹理，所以我们可以通过操作场景纹理来创造一些有趣的后处理效果。下面给出几种后处理方法和渲染效果。

3.1 反色（Inversion）

我们用1.0减去从屏幕纹理采样到颜色来作为片元的输出颜色。

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

渲染效果。

反色渲染

3.2 灰度图（Grayscale）

将图像灰度化最简单的办法就是将颜色分量取均值。

vec4 Grayscale(vec3 texColor);

void main()
{   
    vec3 texColor = vec3(texture(screenTexture, TexCoords));
    FragColor = Grayscale(texColor);
}

vec4 Grayscale(vec3 texColor)
{
    float average = (texColor.x + texColor.y + texColor.z) / 3.0;
    return vec4(average, average, average, 1.0);
}

渲染效果。

灰度图渲染
一般人类的眼睛对于绿色光更加敏感，而蓝色光最不敏感，所以我们可以按一定权重进行灰度化处理。

vec4 WeighedGrayscale(vec3 texColor);

void main()
{   
    vec3 texColor = vec3(texture(screenTexture, TexCoords));
    FragColor = WeighedGrayscale(texColor);
}

vec4 WeighedGrayscale(vec3 texColor)
{
    float average = 0.2126 * texColor.x + 0.7152 * texColor.y + 0.0722 * texColor.z;
    return vec4(average, average, average, 1.0);
}

渲染效果，与直接平均其实很难分辨，但在复杂场景会显得更加真实。

权重灰度图渲染

3.3 核效果（Kernel effects）

一个核（Kernel，或者卷积矩阵） 就是一个与矩阵类似的值数组，以当前像素为中心，将周围像素值与核矩阵值相乘，并全部相加输出一个单一值。核的一个示例如下：
$\begin{bmatrix} 2 & 2 & 2 \\ 2 & -15 & 2 \\ 2 & 2 & 2 \end{bmatrix}$
网络上的大部分核的权重相加都为1，如果相加不等于1，意味着你从纹理采样后的颜色将比原来的纹理更亮或更暗。
下面我们以3X3的核来做展示，首先我们调整片元着色器。

vec4 Kernel();

const float offset = 1.0 / 300.0;

void main()
{   
    FragColor = Kernel();
}

vec4 Kernel()
{
    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];
    }

    return vec4(col, 1.0);
}

渲染效果，感觉图像被锐化（sharpen）。
锐化渲染

3.4 模糊（Blur）

创造模糊效果的核定义如下：
$\begin{bmatrix} 1 & 2 & 1 \\ 2 & 4 & 2 \\ 1 & 2 & 1\end{bmatrix} / 16$
核数组定义如下：

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

渲染效果。

模糊渲染

3.5 边缘检测（Edge detection）

边缘检测的核如下：
$\begin{bmatrix} 1 & 1 & 1 \\ 1 & -8 & 1 \\ 1 & 1 & 1\end{bmatrix}$
核数组定义如下：

float edgeDetectionKernel[9] = float[](
    1,  1,  1,
    1, -8,  1,
    1,  1,  1
);

渲染效果。

边缘检测渲染

OpenGL学习19——帧缓冲区

帧缓冲区（Framebuffers）

1. 创建一个帧缓冲区

2. 渲染到纹理附件

3. 后处理（Post-processing）

3.1 反色（Inversion）

3.2 灰度图（Grayscale）

3.3 核效果（Kernel effects）

3.4 模糊（Blur）

3.5 边缘检测（Edge detection）

猜你喜欢

热点阅读