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

时间:2014-04-09 09:49:12

标签: javascript webgl framebuffer stencil-buffer

徘徊,如果有人可以帮助我。我目前正在使用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 个答案:

答案 0 :(得分:6)

继续代码停止的地方

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 renderbuffer
  • COLOR_ATTACHMENT0 = RGBA / UNSIGNED_BYTE质地+ DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer

所以,你有3个选择。

  1. 仅分配一个模板缓冲区并祈祷它可以正常工作

  2. 仅分配模板缓冲区,附加它和颜色纹理,然后调用gl.checkFramebufferComplete以查看它是否有效。如果没有打印错误

  3. 使用保证可在任何地方使用的DEPTH_STENCIL附件。

  4. 我选择#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);