2.10 帧缓冲区对象 (Framebuffer Objects - FBOs)

文档摘要

2.10 帧缓冲区对象 (Framebuffer Objects - FBOs) WebGL 帧缓冲区对象 (Framebuffer Objects - FBOs) 详解在 WebGL 的世界中，我们通常将渲染结果直接输出到屏幕上的默认帧缓冲区。然而，对于许多高级渲染技术和特效来说，我们需要进行离屏渲染 (Off-screen Rendering)，也就是将渲染结果存储在内存中的缓冲区，而不是直接显示在屏幕上。这时，帧缓冲区对象 (Framebuffer Objects - FBOs) 就成为了至关重要的工具。 FBOs 允许我们创建自定义的渲染目标，我们可以将渲染结果写入这些目标，并在后续的渲染过程中将这些结果作为纹理进行读取和使用。

2.10 帧缓冲区对象 (Framebuffer Objects - FBOs)

WebGL 帧缓冲区对象 (Framebuffer Objects - FBOs) 详解

在 WebGL 的世界中，我们通常将渲染结果直接输出到屏幕上的默认帧缓冲区。然而，对于许多高级渲染技术和特效来说，我们需要进行离屏渲染 (Off-screen Rendering)，也就是将渲染结果存储在内存中的缓冲区，而不是直接显示在屏幕上。这时，帧缓冲区对象 (Framebuffer Objects - FBOs) 就成为了至关重要的工具。

FBOs 允许我们创建自定义的渲染目标，我们可以将渲染结果写入这些目标，并在后续的渲染过程中将这些结果作为纹理进行读取和使用。这为实现各种高级效果，如后期处理、阴影贴图、反射、折射等，提供了强大的支持。

2.10.1 什么是帧缓冲区对象 (FBOs)？

帧缓冲区对象 (Framebuffer Object, FBO) 本质上是一个容器，它可以附加一个或多个附件 (Attachments)。这些附件可以是纹理 (Textures) 或渲染缓冲区对象 (Renderbuffer Objects)。FBO 自身并不存储像素数据，它只是管理和组织这些附件，使其能够作为渲染的目标。

我们可以将 FBO 视为一个自定义的渲染表面，它类似于屏幕上的默认帧缓冲区，但更加灵活可控。通过 FBO，我们可以：

渲染到纹理 (Render-to-Texture)： 将渲染结果直接写入纹理，以便在后续渲染过程中作为输入纹理使用。
离屏渲染 (Off-screen Rendering)： 在内存中进行渲染，渲染结果不直接显示在屏幕上，而是存储在 FBO 的附件中。
多渲染目标 (Multiple Render Targets - MRT)： 同时渲染到多个颜色附件，一次渲染过程可以输出多个渲染结果。
深度和模板缓冲区支持： FBO 可以包含深度和模板附件，用于深度测试、模板测试等操作。

与默认帧缓冲区的对比：

特性	默认帧缓冲区	帧缓冲区对象 (FBOs)
目标	屏幕显示	离屏渲染，渲染到纹理
创建	WebGL 上下文自动创建	需要手动创建和管理 (`gl.createFramebuffer()`)
附件	由 WebGL 上下文隐式管理，通常包含颜色、深度、模板缓冲区	可以自定义附件，纹理或渲染缓冲区对象
灵活性	有限，主要用于屏幕输出	高度灵活，可配置各种附件，支持高级渲染技术
性能	直接渲染到屏幕，效率较高	离屏渲染，可能涉及内存拷贝，需要考虑性能优化

2.10.2 FBO 的核心组件

一个完整的 FBO 通常由以下核心组件构成：

帧缓冲区对象 (Framebuffer Object - FBO)： 容器，管理附件。
纹理附件 (Texture Attachments)： 用于存储颜色数据，可以附加 2D 纹理、立方体纹理的面或纹理的特定层级。
渲染缓冲区对象 (Renderbuffer Objects - RBOs)： 专门用于存储深度和/或模板数据，优化了深度和模板测试的性能。
附件点 (Attachment Points)： 指定附件连接到 FBO 的位置，例如颜色附件点 (COLOR_ATTACHMENT0, COLOR_ATTACHMENT1, ...)、深度附件点 (DEPTH_ATTACHMENT)、模板附件点 (STENCIL_ATTACHMENT)、深度模板附件点 (DEPTH_STENCIL_ATTACHMENT)。

可以用 Mermaid 图来形象地展示 FBO 的结构：

详细解释各个组件：

帧缓冲区对象 (FBO)： 使用 gl.createFramebuffer() 创建，使用 gl.bindFramebuffer() 绑定为当前渲染目标，使用 gl.deleteFramebuffer() 删除。
纹理附件 (Texture Attachments)： 可以使用 gl.createTexture() 创建纹理，并使用 gl.texImage2D() 或 gl.texStorage2D() 等函数初始化纹理的存储空间和格式。纹理附件通常用于存储颜色信息，例如 RGB 或 RGBA 格式的像素数据。纹理的尺寸通常与渲染目标区域的尺寸一致。
渲染缓冲区对象 (RBO)： 使用 gl.createRenderbuffer() 创建，使用 gl.bindRenderbuffer() 绑定，使用 gl.renderbufferStorage() 分配存储空间和指定格式 (例如 DEPTH_COMPONENT16, DEPTH_STENCIL)，使用 gl.deleteRenderbuffer() 删除。RBO 专门为深度和模板缓冲区设计，通常比纹理附件在深度和模板测试方面性能更优，因为 RBO 的存储格式可以针对硬件进行优化。但 RBO 的缺点是其内容无法直接作为纹理采样，如果需要将深度或模板信息用于后续的着色器计算，则需要使用纹理附件来存储深度或模板数据。
附件点 (Attachment Points)： 预定义的常量，用于指定将附件连接到 FBO 的哪个位置。
- gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, ... , gl.COLOR_ATTACHMENTn：颜色附件点，用于连接颜色纹理或颜色渲染缓冲区。支持多个颜色附件点，实现多渲染目标 (MRT)。
- gl.DEPTH_ATTACHMENT：深度附件点，用于连接深度纹理或深度渲染缓冲区。
- gl.STENCIL_ATTACHMENT：模板附件点，用于连接模板纹理或模板渲染缓冲区。
- gl.DEPTH_STENCIL_ATTACHMENT：深度和模板附件点，用于连接深度和模板纹理或深度和模板渲染缓冲区 (例如 DEPTH24_STENCIL8 格式的纹理或渲染缓冲区)。

2.10.3 FBO 的创建、绑定和附件

使用 FBO 的基本流程如下：

创建 FBO 对象：


const framebuffer = gl.createFramebuffer();

创建附件 (纹理或渲染缓冲区)：

纹理附件 (颜色)：


const colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

渲染缓冲区附件 (深度)：


const depthRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

绑定 FBO 为当前帧缓冲区：
```
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
```
- 绑定 gl.FRAMEBUFFER 目标表示后续的渲染操作将渲染到绑定的 FBO 上。
- 如果需要渲染回屏幕上的默认帧缓冲区，需要绑定 null： gl.bindFramebuffer(gl.FRAMEBUFFER, null);
将附件连接到 FBO 的附件点：
- 纹理附件 (颜色) 连接到 COLOR_ATTACHMENT0：
```
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
```
  - gl.FRAMEBUFFER: 指定 FBO 目标。
  - gl.COLOR_ATTACHMENT0: 颜色附件点 0。
  - gl.TEXTURE_2D: 纹理目标类型 (2D 纹理)。
  - colorTexture: 要连接的纹理对象。
  - 0: 纹理的 mipmap 层级 (通常为 0，表示基本层级)。
- 渲染缓冲区附件 (深度) 连接到 DEPTH_ATTACHMENT：
```
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRenderbuffer);
```
  - gl.FRAMEBUFFER: 指定 FBO 目标。
  - gl.DEPTH_ATTACHMENT: 深度附件点。
  - gl.RENDERBUFFER: 渲染缓冲区目标类型。
  - depthRenderbuffer: 要连接的渲染缓冲区对象。
检查 FBO 的完整性：
```
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status !== gl.FRAMEBUFFER_COMPLETE) {
    console.error("Framebuffer is not complete: " + status.toString(16));
    // 根据 status 代码进行错误处理，例如：
    // gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
    // gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT
    // gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS
    // gl.FRAMEBUFFER_UNSUPPORTED
}
```
- gl.checkFramebufferStatus() 检查当前绑定的 FBO 是否完整可用。
- gl.FRAMEBUFFER_COMPLETE 表示 FBO 完整，可以进行渲染。
- 如果 FBO 不完整，渲染操作可能会失败或产生未定义的结果。常见的导致 FBO 不完整的原因包括：
  - 缺少附件： FBO 至少需要一个颜色附件才能完整 (除非只用于深度或模板渲染)。
  - 附件类型错误： 例如，将纹理连接到深度附件点。
  - 附件尺寸不一致： 所有附件的尺寸必须一致。
  - 不支持的格式： 某些附件格式可能不被硬件支持。
进行渲染操作： 在 FBO 绑定为当前帧缓冲区后，后续的 gl.drawArrays() 或 gl.drawElements() 等渲染命令会将结果写入到 FBO 的附件中。
解除 FBO 绑定 (可选)： 如果需要渲染到屏幕上的默认帧缓冲区，或者完成 FBO 的使用，可以解除 FBO 的绑定：
```
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
```
使用 FBO 附件中的纹理： 如果 FBO 包含纹理附件，可以在后续的渲染过程中将这些纹理作为输入纹理进行采样，例如在片段着色器中：
```
uniform sampler2D u_colorTexture;
varying vec2 v_texCoord;
void main() {
    vec4 colorFromFBO = texture2D(u_colorTexture, v_texCoord);
    // ... 使用 colorFromFBO 进行后续计算 ...
}
```
- 在 JavaScript 代码中，需要将 FBO 的纹理附件绑定到纹理单元，并传递纹理单元索引给着色器 uniform 变量。
删除 FBO 和附件 (释放资源)： 当 FBO 和其附件不再需要时，应该及时删除以释放 WebGL 资源：
```
gl.deleteFramebuffer(framebuffer);
gl.deleteTexture(colorTexture);
gl.deleteRenderbuffer(depthRenderbuffer);
```

2.10.4 代码实践：简单的 Render-to-Texture 示例

以下是一个简单的 WebGL 代码示例，演示如何使用 FBO 实现 Render-to-Texture。我们将渲染一个简单的彩色三角形到 FBO 的颜色纹理上，然后将这个纹理渲染到屏幕上。

HTML 结构 (index.html):


<!DOCTYPE html>
<html>
<head>
    <title>WebGL FBO Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="webglCanvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

JavaScript 代码 (main.js):


const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
    alert("WebGL not supported");
}
// 顶点着色器
const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec4 aVertexColor;
    varying vec4 vColor;
    varying vec2 vTexCoord;
    void main() {
        gl_Position = aVertexPosition;
        vColor = aVertexColor;
        vTexCoord = (aVertexPosition.xy + vec2(1.0, 1.0)) / 2.0; // 将顶点坐标映射到纹理坐标 [0, 1]
    }
`;
// 片段着色器 (用于渲染到 FBO)
const fsSourceFBO = `
    precision mediump float;
    varying vec4 vColor;
    void main() {
        gl_FragColor = vColor;
    }
`;
// 片段着色器 (用于渲染到屏幕，采样 FBO 纹理)
const fsSourceScreen = `
    precision mediump float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    void main() {
        gl_FragColor = texture2D(uTexture, vTexCoord);
    }
`;
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}
function createProgram(gl, vs, fs) {
    const program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
        return null;
    }
    return program;
}
// 初始化着色器程序
const shaderProgramFBO = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, vsSource), createShader(gl, gl.FRAGMENT_SHADER, fsSourceFBO));
const shaderProgramScreen = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, vsSource), createShader(gl, gl.FRAGMENT_SHADER, fsSourceScreen));
// 获取属性和 uniform 位置
const programInfoFBO = {
    program: shaderProgramFBO,
    attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgramFBO, 'aVertexPosition'),
        vertexColor: gl.getAttribLocation(shaderProgramFBO, 'aVertexColor'),
    },
};
const programInfoScreen = {
    program: shaderProgramScreen,
    attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgramScreen, 'aVertexPosition'),
    },
    uniformLocations: {
        textureSampler: gl.getUniformLocation(shaderProgramScreen, 'uTexture'),
    },
};
// 顶点数据
const positions = [
    // Triangle
    0.0,  0.5,  0.0,
    -0.5, -0.5,  0.0,
    0.5, -0.5,  0.0,
];
const colors = [
    1.0, 0.0, 0.0, 1.0, // Red
    0.0, 1.0, 0.0, 1.0, // Green
    0.0, 0.0, 1.0, 1.0, // Blue
];
// 创建顶点缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
// 设置 FBO 和纹理
const fboTextureWidth = 512;
const fboTextureHeight = 512;
const fboTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, fboTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, fboTextureWidth, fboTextureHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
const framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fboTexture, 0);
// 检查 FBO 完整性
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
    console.error("Framebuffer is not complete");
    return;
}
// 渲染到 FBO
function renderToFBO() {
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); // 绑定 FBO
    gl.viewport(0, 0, fboTextureWidth, fboTextureHeight); // 设置视口大小为 FBO 纹理尺寸
    gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空 FBO 颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.useProgram(programInfoFBO.program);
    // 设置顶点位置属性
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.vertexAttribPointer(programInfoFBO.attribLocations.vertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(programInfoFBO.attribLocations.vertexPosition);
    // 设置顶点颜色属性
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.vertexAttribPointer(programInfoFBO.attribLocations.vertexColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(programInfoFBO.attribLocations.vertexColor);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}
// 渲染到屏幕 (使用 FBO 纹理)
function renderToScreen() {
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); // 绑定默认帧缓冲区
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // 设置视口大小为 canvas 尺寸
    gl.clearColor(0.5, 0.5, 0.5, 1.0); // 清空默认帧缓冲区，使用灰色背景
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.useProgram(programInfoScreen.program);
    // 设置顶点位置属性 (渲染一个覆盖整个屏幕的矩形)
    const screenPositions = [
        -1.0,  1.0,
        -1.0, -1.0,
         1.0,  1.0,
         1.0, -1.0,
    ];
    const screenPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, screenPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenPositions), gl.STATIC_DRAW);
    gl.vertexAttribPointer(programInfoScreen.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(programInfoScreen.attribLocations.vertexPosition);
    // 绑定 FBO 纹理到纹理单元 0
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, fboTexture);
    gl.uniform1i(programInfoScreen.uniformLocations.textureSampler, 0); // 传递纹理单元 0 给 uniform sampler
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function render() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, canvas.width, canvas.height); // 初始化视口大小
    renderToFBO();
    renderToScreen();
    requestAnimationFrame(render); // 循环渲染
}
render(); // 开始渲染循环

代码解释：

创建 FBO 和纹理： 代码创建了一个纹理 fboTexture 和一个 FBO framebuffer。纹理被设置为 FBO 的颜色附件。
renderToFBO() 函数：
- 绑定 FBO 为当前帧缓冲区。
- 设置视口大小为 FBO 纹理的尺寸。
- 使用 shaderProgramFBO 渲染一个彩色三角形到 FBO 的颜色纹理上。
renderToScreen() 函数：
- 绑定默认帧缓冲区 (屏幕)。
- 设置视口大小为 canvas 的尺寸。
- 使用 shaderProgramScreen 渲染一个覆盖整个屏幕的矩形。
- 将 fboTexture 绑定到纹理单元 0，并在片段着色器中采样该纹理，从而将 FBO 渲染的结果显示到屏幕上。

运行效果： 你会看到一个彩色三角形被渲染到屏幕上，但实际上这个三角形是先被渲染到了 FBO 的纹理上，然后再从纹理采样并渲染到屏幕的。

2.10.5 FBO 的高级应用和优势

FBO 在 WebGL 中有着广泛的应用，尤其是在实现高级渲染效果方面。以下是一些常见的应用场景和 FBO 的优势：

后期处理效果 (Post-processing Effects)： 例如模糊 (Blur)、色彩校正 (Color Correction)、景深 (Depth of Field)、泛光 (Bloom) 等。通常先将场景渲染到 FBO，然后将 FBO 的纹理作为输入，进行后期处理，并将处理后的结果渲染到屏幕上。
阴影贴图 (Shadow Mapping)： 将场景从光源的角度渲染到 FBO 的深度纹理中，生成阴影贴图。然后在主渲染过程中，使用阴影贴图来计算阴影效果。
反射和折射 (Reflection and Refraction)： 可以使用 FBO 渲染反射或折射的场景，例如渲染水面或镜子的反射效果。
延迟渲染 (Deferred Rendering)： 将场景的几何信息 (位置、法线、颜色等) 渲染到多个 FBO 颜色附件 (G-Buffer) 中，然后在后续的渲染 Pass 中，使用 G-Buffer 进行光照计算，实现更复杂的光照效果和更高的渲染效率。
多通道渲染 (Multi-pass Rendering)： 某些渲染效果需要多次渲染 Pass 才能完成，FBO 可以作为中间渲染结果的存储介质，方便在多个 Pass 之间传递数据。
性能优化： 在某些情况下，离屏渲染可以提高性能，例如避免不必要的屏幕刷新，或者在复杂的场景中将渲染任务分解为多个 Pass，利用 FBO 进行中间结果的缓存和复用。

FBO 的优势总结：

灵活性和可控性： FBO 允许开发者自定义渲染目标，灵活配置附件，实现各种复杂的渲染流程。
离屏渲染能力： 实现各种离屏渲染技术，为高级渲染效果提供基础。
纹理复用： FBO 渲染的结果可以作为纹理在后续渲染过程中复用，避免重复计算，提高效率。
多渲染目标 (MRT)： 支持同时渲染到多个颜色附件，一次渲染可以输出多个结果，提高效率，尤其在延迟渲染等技术中非常重要。

2.10.6 总结

帧缓冲区对象 (FBOs) 是 WebGL 中一个非常核心和强大的概念。它为我们提供了离屏渲染的能力，使得我们可以实现各种高级渲染技术和特效。理解 FBO 的工作原理、创建和使用流程，以及其核心组件 (纹理附件、渲染缓冲区附件、附件点) 对于深入学习和应用 WebGL 高级渲染技术至关重要。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/222-webgl-3d%E5%9B%BE%E5%BD%A2%E7%BC%96%E7%A8%8B%E5%AE%9E%E6%88%98%E6%95%99%E7%A8%8B

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流