第十二章 帧缓冲对象(FBO)：离屏渲染的艺术

各位同学，欢迎来到第十二章。今天我们要聊一个非常实用的技术——帧缓冲对象，也就是FBO。

说实话，FBO这个概念我刚开始学的时候也觉得挺抽象的。什么叫"离屏渲染"？屏幕都不在了，你渲染给谁看？后来做项目多了才明白，这玩意儿太重要了。你想想看，游戏里的镜子效果、水面倒影、动态反射……这些炫酷的效果，背后都离不开FBO。

12.1 什么是帧缓冲对象？

先说说最基础的概念。

正常情况下，OpenGL渲染的结果会直接显示到屏幕上。这个"直接显示"的过程，其实是把数据写入到系统默认的帧缓冲里。这个默认的帧缓冲，你可以理解成一块专门给屏幕用的画布。

那FBO是什么呢？说白了，就是一块我们自己创建的画布。渲染的结果不往屏幕上画，而是画到我们自己准备的这块画布上。这块画布可以是一张纹理，也可以是一个渲染缓冲对象。

核心思想：FBO允许我们将渲染结果输出到纹理或缓冲中，而不是直接显示到屏幕。这就为后续的二次处理、特效叠加提供了可能。

我在项目中遇到过这样一个场景：需要做一个实时反射效果，水面要倒映周围的建筑。如果直接渲染到屏幕，你根本拿不到场景的"镜像"数据。但有了FBO，我可以先把场景从镜面角度渲染到一张纹理上，然后再把这张纹理贴到水面上。嗯，效果一下子就出来了。

12.2 FBO的工作流程

FBO的使用流程其实不复杂，我总结为三步：

  1. 创建FBO —— 生成一个帧缓冲对象ID
  2. 绑定附件 —— 把纹理或渲染缓冲对象挂到FBO上
  3. 切换渲染目标 —— 绑定FBO，渲染到纹理；解绑FBO，回到屏幕

来，我画了一张流程图，帮你理清这个逻辑：

FBO离屏渲染流程图 1. 创建FBO glGenFramebuffers() 2. 绑定附件 glFramebufferTexture2D() 3. 检查状态 glCheckFramebufferStatus() 完整？ 是 渲染 否 检查错误 4. 渲染到FBO 绑定 → 绘制 → 解绑 5. 使用纹理 采样 → 贴图 → 显示

12.3 创建FBO并绑定纹理

好，理论说完了，咱们直接上代码。我个人习惯把FBO的创建封装成一个函数，这样用起来方便。

// 生成FBO
GLuint fbo;
glGenFramebuffers(1, &fbo);

// 生成纹理（用来接收渲染结果）
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

// 绑定纹理到FBO
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);

// 检查FBO是否完整
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
    // 处理错误
}

// 解绑FBO，回到默认帧缓冲
glBindFramebuffer(GL_FRAMEBUFFER, 0);

小提示：纹理的尺寸最好设置成2的幂次，比如512x512、1024x1024。虽然现在的硬件对非2的幂次支持已经很好了，但有些老设备还是会出问题。我曾经在适配某款平板时踩过这个坑，折腾了半天才发现是纹理尺寸的问题。

12.4 离屏渲染的实际应用

有了FBO和纹理，我们就可以做很多有意思的事情了。这里我重点讲两个：动态反射和折射效果。

12.4.1 动态反射效果

动态反射的原理其实不复杂。你想想看，镜子里的世界是什么？是从镜子的视角看过去的场景。所以我们只需要：

  1. 把相机放到镜子的位置，朝向镜子的反射方向
  2. 用FBO把场景渲染到纹理上
  3. 把这张纹理贴到镜面模型上

这里有个关键点：反射矩阵的计算。说白了就是把相机位置沿着镜面做一次镜像变换。

// 计算反射矩阵
// 假设镜面在y=0平面
float reflectMatrix[16] = {
    1, 0, 0, 0,
    0, -1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
};

// 渲染到FBO
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glViewport(0, 0, texWidth, texHeight);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// 应用反射矩阵到视图矩阵
// ... 设置相机位置为镜像位置 ...

// 绘制场景
drawScene();

// 解绑FBO
glBindFramebuffer(GL_FRAMEBUFFER, 0);

// 渲染主场景，使用反射纹理
glBindTexture(GL_TEXTURE_2D, texture);
drawMirrorSurface();

注意：反射渲染时，需要开启裁剪面（glClipPlane），避免镜面背后的物体被渲染进来。另外，反射场景的深度测试也要处理好，否则会出现闪烁。我记得第一次做反射效果时，没注意裁剪面，结果镜子里出现了"穿模"的诡异画面。

12.4.2 折射效果

折射和反射的思路类似，但计算方式不同。折射需要用到斯涅尔定律，也就是光从一种介质进入另一种介质时发生的偏折。

在OpenGL里实现折射，我一般用环境映射的方式：

  1. 用立方体贴图（Cubemap）存储周围环境
  2. 在片元着色器中计算折射方向
  3. 采样立方体贴图得到折射颜色
// 片元着色器中的折射计算
#version 300 es
precision mediump float;

in vec3 v_normal;
in vec3 v_viewDir;

uniform samplerCube u_envMap;
uniform float u_refractRatio; // 折射率，比如水是1.33

out vec4 fragColor;

void main() {
    vec3 normal = normalize(v_normal);
    vec3 viewDir = normalize(v_viewDir);
    
    // 计算折射方向
    vec3 refractDir = refract(viewDir, normal, u_refractRatio);
    
    // 采样环境贴图
    vec4 refractColor = texture(u_envMap, refractDir);
    
    fragColor = refractColor;
}

当然，如果你想要更真实的折射效果，可以结合FBO来做。比如先渲染一个场景到立方体贴图的六个面，然后再用折射着色器采样。这种方法在制作水下效果时特别有用。

12.5 性能优化建议

FBO虽然好用，但也不能滥用。我总结了几条优化经验：

优化点 说明 建议
纹理尺寸 FBO纹理越大，性能开销越大 根据实际需求选择，不要盲目用最大尺寸
FBO复用 频繁创建销毁FBO很耗性能 在初始化时创建好，运行时复用
多附件 一个FBO可以挂多个纹理附件 需要多个输出时，用多附件代替多个FBO
深度缓冲 离屏渲染也需要深度测试 使用渲染缓冲对象(RBO)作为深度附件

关于RBO：如果你不需要把深度数据作为纹理使用，用渲染缓冲对象（Renderbuffer）比纹理更高效。因为RBO是专门为离屏渲染优化的，不需要像纹理那样支持采样操作。

12.6 一个完整的离屏渲染示例

最后，我给大家一个完整的示例框架。这个框架包含了FBO的创建、渲染、使用纹理的全流程。

class OffscreenRenderer {
private:
    GLuint fbo;
    GLuint colorTexture;
    GLuint depthRbo;
    int width, height;
    
public:
    OffscreenRenderer(int w, int h) : width(w), height(h) {
        // 创建纹理
        glGenTextures(1, &colorTexture);
        glBindTexture(GL_TEXTURE_2D, colorTexture);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, w, h, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        
        // 创建深度RBO
        glGenRenderbuffers(1, &depthRbo);
        glBindRenderbuffer(GL_RENDERBUFFER, depthRbo);
        glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, w, h);
        
        // 创建FBO并绑定附件
        glGenFramebuffers(1, &fbo);
        glBindFramebuffer(GL_FRAMEBUFFER, fbo);
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, colorTexture, 0);
        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, depthRbo);
        
        if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
            // 错误处理
        }
        
        glBindFramebuffer(GL_FRAMEBUFFER, 0);
    }
    
    void beginRender() {
        glBindFramebuffer(GL_FRAMEBUFFER, fbo);
        glViewport(0, 0, width, height);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    }
    
    void endRender() {
        glBindFramebuffer(GL_FRAMEBUFFER, 0);
    }
    
    GLuint getTexture() {
        return colorTexture;
    }
    
    ~OffscreenRenderer() {
        glDeleteFramebuffers(1, &fbo);
        glDeleteTextures(1, &colorTexture);
        glDeleteRenderbuffers(1, &depthRbo);
    }
};

使用的时候很简单：

OffscreenRenderer renderer(512, 512);

// 每一帧
renderer.beginRender();
drawScene();  // 渲染到纹理
renderer.endRender();

// 使用纹理
glBindTexture(GL_TEXTURE_2D, renderer.getTexture());
drawFinalScene();

嗯，到这里FBO的核心内容就讲完了。说实话，FBO这个东西刚开始用的时候会觉得有点绕，但一旦你理解了"离屏渲染"这个思路，很多特效的实现就豁然开朗了。动态反射、折射、阴影贴图、后期处理……这些高级效果，底层都是FBO在支撑。

各位同学，动手试试吧。先做一个简单的反射效果，把场景渲染到纹理，再贴到一个平面上。看到纹理上出现动态画面的时候，那种成就感还是很爽的。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →