webGL - 如何在帧缓冲区旁边设置模板缓冲区并使用它？

Posted 2023-02-22

【中文标题】webGL - 如何在帧缓冲区旁边设置模板缓冲区并使用它？

【英文标题】：webGL - How do I set up a stencil buffer alongside a frame buffer and use it?

【发布时间】：2014-04-09 09:49:11

【问题描述】：

如果有人可以帮助我，我会徘徊。我目前正在使用 webGL 将我的内容渲染到帧缓冲区，以便它可以用作项目其他部分的纹理。这就像一个冠军。但是，我现在需要在渲染到帧缓冲区时使用模板缓冲区，因为我正在使用它来屏蔽。我似乎无法弄清楚如何创建/附加模板缓冲区以使用我的帧缓冲区？到目前为止，这是我的代码：

// next time to create a frame buffer and texture
this.frameBuffer = gl.createFramebuffer();
this.texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D,  this.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );

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

所以我的问题是，如何创建模板缓冲区并将其与上面创建的 frameBuffer 一起使用？

谢谢大家！

【参考方案1】：

从您的代码停止的地方继续

var renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.STENCIL_INDEX8, width, height);
gl.framebufferRenderbuffer(
   gl.FRAMEBUFFER, gl.STENCIL_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);

注意：您没有通过调用texImage2D 来设置纹理的大小。模板缓冲区的大小必须与纹理的大小相匹配。

此外，不能保证仅使用模板缓冲区在所有平台上都有效。不幸的是，OpenGL ES 不保证任何帧缓冲区附件组合都能正常工作:(幸运的是 WebGL 可以。它只需要 3 种组合就可以工作。

COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理 COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理 + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 渲染缓冲区 COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理 + DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL 渲染缓冲区

所以，您有 3 个选项。

只分配一个模板缓冲区并祈祷它可以工作

只分配一个模板缓冲区，附加它和颜色纹理，然后调用gl.checkFramebufferComplete 看看它是否有效。如果不打印错误

使用DEPTH_STENCIL 附件，保证在任何地方都能正常工作。

我会选择 #3 :) 在这种情况下代码更改为

var renderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height);
gl.framebufferRenderbuffer(
   gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);

【讨论】：

这太完美了！你的建议就像一个魅力！非常感谢:)

我们最近尝试在桌面 OpenGL 中使用单独的模板/深度附件：它适用于英特尔 IGP，但不适用于 NVIDIA GPU。

WebGL 比 OpenGL 有更强的保证。