JavaScript WebGL 帧缓冲区对象

引子

帧缓冲区对象

示例

观察及思考

参考资料

How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。

• Origin
• My GitHub

示例会在帧缓冲区里面绘制一张图片，然后将其作为纹理再次绘制显示出来。

基于使用图片示例的逻辑，主要有下面几个方面的变化：

• 数据
• 帧缓冲区对象
• 绘制

createFramebuffer 函数创建帧缓冲区对象，删除对象的函数是 deleteFramebuffer 。

创建好后，需要将帧缓冲区的颜色关联对象指定一个纹理对象，示例创建的纹理对象有几个特点：1 纹理的宽高跟绘制区域宽高一致；2 使用 texImage2D 时最后一个参数为 null ，也就是预留了一个空白的存储纹理对象的区域；3 创建好的纹理对象放到了帧缓冲区对象上，就是这行代码 framebuffer.texture = texture 。

bindFramebuffer 函数将帧缓冲区绑定到目标上，然后使用 framebufferTexture2D 将前面创建的纹理对象绑定到帧缓冲区的颜色关联对象 gl.COLOR_ATTACHMENT0 上。

checkFramebufferStatus 检查帧缓冲区对象配置是否正确。

示例，只需将缓冲区顶点调整为对应整个缓冲区大小。

Back to top

WebGL编程指南帧缓冲示例

WebGL Framebuffers

WebGL display framebuffer?