WebGL2：不完整的帧缓冲区

Posted 2023-02-22

【中文标题】WebGL2：不完整的帧缓冲区

【英文标题】：WebGL2 : incomplete framebuffer

【发布时间】：2021-09-01 15:47:21

【问题描述】：

我正在将 C++/OpenGL 应用程序移植到 WebGL 中，并且正在尝试创建和配置帧缓冲区。

帧缓冲区有 3 种我们可以写入的纹理类型：vec2、vec2、uint。 (gl.RG32F, gl.RG32F, gl.R32UI)

这是我初始化帧缓冲区的方式：

var gbuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, gbuffer);

var z0_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, z0_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, output_canvas.width, output_canvas.height, 0, gl.RG, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, z0_texture, 0);

var zn_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, zn_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, output_canvas.width, output_canvas.height, 0, gl.RG, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, zn_texture, 0);

var n_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, n_texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32UI, output_canvas.width, output_canvas.height, 0, gl.RED_INTEGER, gl.UNSIGNED_INT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, n_texture, 0);

gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);

帧缓冲区不完整：gl.checkFramebufferStatus(gl.FRAMEBUFFER) 返回gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT 并显示警告：Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT1: Attachment has an effective format of RG32F, which is not renderable.

知道我的代码有什么问题吗？

【问题讨论】：

"附件的有效格式为RG32F，不可渲染" - 你有什么不明白的地方？ gl.RG32F 不是可呈现的格式。因此，您不能将其用于帧缓冲区。您必须使用可呈现颜色的格式。请参阅OpenGL ES 3.0 Specification - Table 3.13（WebGL 2.0 非常符合 OpenGL ES 3.0）

我不想渲染这些纹理。我在后期处理中使用它们。这就是我在 C++ 中所做的，但在 WebGL 中却做不到。

没有。你不能在 WebGL 中做同样的事情。在 OpenGL 中，RG32F 可以进行颜色渲染。但是，WebGL 基于 OpenGL ES。在 OpenGL ES 中，gl.RG32F 不是颜色可渲染格式。 “可渲染颜色”并不意味着您可以渲染这些纹理。这意味着您可以使用这种格式渲染到纹理中。

@Rabbid76 好的，谢谢。很高兴知道

【参考方案1】：

我不想渲染这些纹理。我在后期处理中使用它们。这就是我在 C++ 中所做的，但在 WebGL 中却做不到。

没有。你不能在 WebGL 中做同样的事情。

错误消息“附件的有效格式为 RG32F，不可渲染” - 表示 gl.RG32F 不是可渲染格式。因此，您不能将其用于帧缓冲区。您必须使用可呈现颜色的格式。请参阅OpenGL ES 3.0 Specification - Table 3.13（WebGL 2.0 非常符合 OpenGL ES 3.0）。 您不能在 WebGL 中像在 desktop OpenGL 中那样做同样的事情。在 桌面 中，OpenGL RG32F 是可渲染颜色的。但是，WebGL 基于 OpenGL ES。在 OpenGL ES 中，RG32 不是颜色可渲染格式。 “可渲染颜色”并不意味着您可以渲染这些纹理。这意味着您可以使用这种格式渲染到纹理中。