如何将 WebGL 帧缓冲区中的内容绘制到画布的后缓冲区中？答案

【问题标题】：How can I draw contents from a WebGL framebuffer into my canvas' backbuffer?如何将 WebGL 帧缓冲区中的内容绘制到画布的后缓冲区中？
【发布时间】：2013-11-05 17:26:26
【问题描述】：

我有一个现有的帧缓冲区（带有颜色和深度信息），我需要将它与画布的后缓冲区（绘图缓冲区）合成。如何将一个帧缓冲区中的内容绘制到后台缓冲区中？

或者，如果有直接操作绘图缓冲区的方法，我可以将我的信息直接放入其中，而无需创建第二个帧缓冲区。现在写我正在使用以下方法将纹理写入帧缓冲区：

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

但这不适用于绘图缓冲区，因为当 gl.FRAMEBUFFER 未绑定时它会引发错误（而且我不知道将其绑定到绘图缓冲区的方法）。

【问题讨论】：

我不确定我是否听懂了你的问题。帧缓冲区只是附件的组合。这些附件可以是渲染缓冲区和纹理。任何纹理都可以轻松渲染。这意味着您的问题基本上变成了“我如何渲染纹理”，我猜您已经知道了。
嘿，嘿......我的问题比这更复杂一点。 ;o) 我想知道如何获取已经存在的纹理并将其设置为绘图缓冲区的 color_attachment（所以，我不是在绘制要应用此纹理的多边形，我实际上是在使用纹理作为整个渲染场景）。然后我将对深度附件执行相同的操作，然后在绘图缓冲区中渲染另一组几何图形以创建复合场景……这更有意义吗？
我还没关注。如果您只是要在纹理上绘制一些多边形，然后将该纹理作为绘图缓冲区，然后在顶部绘制我的多边形，为什么不首先将所有多边形都绘制到绘图缓冲区？否则，将纹理作为四边形绘制到绘图缓冲区上，然后在其上绘制你的东西。 WebGL 没有办法让你的纹理成为绘图缓冲区的颜色附件。绘图缓冲区由 WebGL 专门管理（至少在 WebGL 版本 1 中）
第一次渲染实际上并没有在我的机器上完成。它由渲染服务器提供。但是你提出了一个很好的观点。我可以把它放在一个帧缓冲区中，然后将我的三角形绘制到同一个帧缓冲区，然后我可以将生成的纹理绘制到绘图缓冲区中的一个矩形上。谢谢！ ——如果你想把它写成答案，我会接受的。 :o)

标签： canvas webgl draw framebuffer

【解决方案1】：

要从主屏幕缓冲区中获取数据，您需要将 TexImage2D 其数据复制到另一个纹理。

还要注意您是否使用设置为 true 的“preserveDrawingBuffer”构建了 WebGL 上下文。上下文创建的默认值为 false，这意味着在您将控制权返回给浏览器之后，您无法指望主绘图缓冲区的内容仍然存在。

preserveDrawingBuffer=false 通常是个好主意，因为它会对性能产生重大影响。

【讨论】：

我实际上是在尝试另一个方向......将纹理塞入主屏幕缓冲区，而不是读出它。知道该怎么做吗？