JavaScript 中的 WebGL 帧缓冲区对象（FBO）与离屏渲染

描述
WebGL 的帧缓冲区对象（Framebuffer Object, FBO）是一种离屏渲染技术，允许将渲染结果输出到纹理（Texture）或渲染缓冲区（Renderbuffer），而不是直接显示到屏幕。FBO 是实现后期处理、阴影映射、环境映射等高级图形效果的核心机制。本节将深入讲解 FBO 的创建、绑定、附件管理以及离屏渲染的实现细节。

解题过程循序渐进讲解

第一步：理解 FBO 的基本概念
在标准渲染流程中，WebGL 将图形直接绘制到屏幕的帧缓冲区（即“默认帧缓冲区”）。FBO 则提供了一个自定义的帧缓冲区，可以挂载纹理或渲染缓冲区作为颜色、深度、模板附件，从而实现离屏渲染。离屏渲染完成后，可以将 FBO 中的纹理用于后续渲染（例如作为输入贴图），实现多重渲染效果。

第二步：创建与绑定 FBO
FBO 通过 gl.createFramebuffer() 创建，并通过 gl.bindFramebuffer(target, framebuffer) 绑定到上下文中。其中：

• target 只能是 gl.FRAMEBUFFER（在 WebGL 2 中还可以是 gl.READ_FRAMEBUFFER 和 gl.DRAW_FRAMEBUFFER 用于高级操作）。
• 绑定到 null 可切换回默认帧缓冲区。

示例代码：

const gl = canvas.getContext('webgl');
const fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);

第三步：为 FBO 添加附件
FBO 本身只是一个容器，需要附加渲染目标（颜色、深度、模板附件）才能使用。常见附件类型：

1. 颜色附件：通常是纹理对象（gl.TEXTURE_2D），用于存储颜色信息。
2. 深度附件：可以是渲染缓冲区（Renderbuffer）或深度纹理，用于深度测试。
3. 模板附件：渲染缓冲区，用于模板测试。

创建并附加纹理作为颜色附件的步骤：

// 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 分配存储空间（尺寸需与渲染区域一致）
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);
// 将纹理附加到 FBO 的颜色附件点
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

第四步：附加渲染缓冲区作为深度/模板附件
渲染缓冲区是一种优化存储对象，适用于不需要采样的情况（如深度、模板测试）：

const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
// 分配存储空间
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
// 附加到 FBO
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

第五步：检查 FBO 完整性
在渲染前，必须验证 FBO 配置是否正确：

const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status !== gl.FRAMEBUFFER_COMPLETE) {
  console.error('Framebuffer is incomplete:', status);
  // 常见问题：附件尺寸不一致、格式不支持等
}

第六步：离屏渲染与结果使用
绑定 FBO 后，所有绘制操作将输出到 FBO 的附件。渲染完成后，切换回默认帧缓冲区，即可将 FBO 中的纹理用于后续绘制：

// 1. 绑定 FBO 进行离屏渲染
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// ... 执行绘制（结果存入 texture）

// 2. 切回默认帧缓冲区
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 3. 使用 FBO 的纹理进行屏幕绘制
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
// ... 设置着色器并绘制到屏幕

第七步：性能优化与注意事项

1. 附件管理：及时删除不再需要的 FBO 和附件（gl.deleteFramebuffer、gl.deleteTexture）以防止内存泄漏。
2. 尺寸匹配：所有附件必须具有相同尺寸，且建议使用 2 的幂（NPOT）尺寸以保证兼容性。
3. 多目标渲染：WebGL 2 支持多渲染目标（MRT），可同时输出到多个颜色附件。
4. 抗锯齿：通过 gl.renderbufferStorageMultisample 实现多重采样抗锯齿（MSAA），但需注意纹理附件的限制。

第八步：典型应用场景

• 后期处理：将场景渲染到纹理，再对该纹理应用滤镜（模糊、色调映射等）。
• 阴影映射：从光源视角渲染深度图到 FBO，用于阴影计算。
• 环境反射：渲染立方体贴图（Cubemap）作为反射纹理。
• GPU 计算：将渲染结果作为后续渲染的输入，实现复杂算法。

通过以上步骤，你可以掌握 FBO 的核心操作，并能在实际项目中实现高性能的离屏渲染效果。