OpenGL帧缓存FrameBuffer

最新推荐文章于 2025-06-20 14:24:00 发布

春夜喜雨

最新推荐文章于 2025-06-20 14:24:00 发布

阅读量4.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：图形&渲染

本文链接：https://blog.youkuaiyun.com/chunyexiyu/article/details/97312380

图形&渲染专栏收录该内容

60 篇文章

订阅专栏

本文深入解析OpenGL中的FrameBuffer概念，包括其在现代显卡设备中的作用、构成元素如ColorBuffer、DepthBuffer和StencilBuffer，以及如何在WebGL中创建和应用自定义FrameBuffer进行纹理渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/05%20Framebuffers/
参考：https://en.wikipedia.org/wiki/Framebuffer
参考：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-render-to-texture.html

个人随笔 (Owed by: 春夜喜雨 http://blog.youkuaiyun.com/chunyexiyu)

FraneBuffer概念

概念上，FrameBuffer指驱动显示设备显示的位图内存区域，该内存区域包含了完整的帧数据。在现代的显卡设备核心中集成了相关framebuffer显示电路，该电路把内存中的位图转换成视频信号显示到显示设备上。

在OpenGL中，我们可以把FrameBuffer理解为一个渲染的目标帧对象，该对象中必不可少的是：颜色缓冲区ColorBuffer，另外可选的有：深度缓冲区DepthBuffer，模板缓冲区StencilBuffer。

这些ColorBuffer、DepthBuffer、StencilBuffer都可以归为一类屏幕缓存ScreenBuffer，它们的大小为屏幕渲染尺寸，当前通常ColorBuffer每个像素为32bit，DepthBuffer与StencilBuffer像素合用一个32位（DepthBuffer占24bit，Stencil占8Bit）。

我们建立的三维对象数据、定义的shader程序，最终都是把渲染出的屏幕着色、深度、模板写入到FrameBuffer中。

FrameBuffer的应用场景

在WebGL中，通常，在我们不指定的时候，缺省使用的默认的FrameBuffer。但OpenGL也提供了方法让我们自定义FrameBuffer，我们可以定义多个FrameBuffer。

例如：
我们可以把不同的三维物体，或同一物体的不同着色方式渲染到不同的FrameBuffer中，再把渲染出的FrameBuffer中对应的ColorBuffer、DepthStencilBuffer作为纹理，用于提供最终渲染结果的纹理采样，这样渲染的结果FrameBuffer中就可以有丰富的渲染纹理了。

一个经典的应用场景：
在一个FrameBuffer中渲染出一个茶壶，然后把这个FrameBuffer的ColorBuffer作为纹理贴到一个正方体的六个面上。

FrameBuffer的创建

webgl上的创建样例

创建一个FrameBuffer

var frameBuffer = gl.createFramebuffer();

绑定当前的FrameBuffer作为绘制目标帧（绘制输出到frameBuffer）

gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);

创建一个Texture，为FrameBuffer绑定texture作为ColorBuffer

var 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, 0);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

绘制操作，绘制操作与向canvas绘制方法一致
例如，先清理颜色缓冲区

gl.clearColor(1, 1, 1, 1); // set clear color
gl.clear(gl.COLOR_BUFFER_BIT); // clear color buffer

还原缺省的FrameBuffer（绘制输出到Canvas）

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

个人随笔 (Owed by: 春夜喜雨 http://blog.youkuaiyun.com/chunyexiyu)