在WebGL2中使用drawBuffers时遇到麻烦 [英] Get some trounble when using drawBuffers in WebGL2

问题描述

我想将延迟渲染器和正向渲染器结合在一起.为了共享相同的深度缓冲区，我使用具有4个颜色附件的单个帧缓冲区对象，GOL缓冲区渲染使用COLOR_ATTACHMENT0-2，延迟着色和前向渲染使用COLOR_ATTACHMENT3，这是伪代码:

//**Gbufffer part**
Bind G-Buffer FBO
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);
draw the G buffer

//**Lighting part**
Bind Lighting buffer FBO

//**Shading part**
Bind G-Buffer FBO
gl.drawBuffers([gl.COLOR_ATTACHMENT3]);

//**Forward rendring part**
//Still use the G-Buffer FBO and COLOR_ATTACHMENT3
draw forward material

使用此功能时，我在firefox中犯了一个错误:

错误:WebGL:drawBuffers:buffers[i]必须为NONE或COLOR_ATTACHMENTi.

在Chrome中启动时，我得到了:

FrameBufferObject.ts:151 WebGL:INVALID_OPERATION:drawBuffers:COLOR_ATTACHMENTi_EXT或NONE

我的代码有什么问题?这真让我感到困惑... THX.

解决方案

如果我没记错的话，第一个缓冲区必须使用颜色附件0，第二个缓冲区必须使用颜色附件1，第三个缓冲区使用颜色附件2，等等. >

换句话说，没关系

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.COLOR_ATTACHMENT1,  // color attachment 1 to draw buffer 1
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 2
]);

这也可以

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.NONE,               // NONE to draw buffer 1
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 2
]);

不是！

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 1 ERROR!
  gl.COLOR_ATTACHMENT1,  // color attachment 1 to draw buffer 2 ERROR!
]);

所以在你的情况下.

gl.drawBuffers([
   gl.COLOR_ATTACHMENT3,  // color attachment 3 to draw buffer 0 ERROR!
]);

必须始终匹配0到0、1到1、2到2，依此类推.

如果这确实是您要执行的操作，则应制作3个framebuffer对象.一个带有前三个缓冲区，一个带有第四个缓冲区，一个带有所有四个缓冲区.然后你会做类似的事情

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

.. draw stuff ..

gl.bindFramebuffer(gl.FRAMEBUFFER, oneAttachmentFB);
gl.drawBuffers([gl.COLOR_ATTACHMENT0]);

.. draw stuff ..

gl.bindFramebuffer(gl.FRAMEBUFFER, fourAttachmentFB);
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1,
                gl.COLOR_ATTACHMENT2, gl.COLOR_ATTACHMENT3]);

.. draw stuff ..

在该版本中，不能保证各种组合都能正常工作.目前尚不清楚WebGL2的限制是什么，但是在WebGL1中只有这些组合可以保证工作

• 一种颜色附件(带有或不带有depth或depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  

• 两个颜色附件(带有或不带有depth或depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  

• 三个颜色附件(带有或不带有depth或depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT2_WEBGL = RGBA/UNSIGNED_BYTE
  

• 四个颜色附件(带有或不带有depth或depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT2_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT3_WEBGL = RGBA/UNSIGNED_BYTE
  

取决于GPU/驱动程序/浏览器/操作系统，所有其他组合可能有效也可能无效

I want to combine my deferred renderer and forward renderer together. In order to share the same depth buffer, I use a single frame buffer object with 4 color attachments, COLOR_ATTACHMENT0-2 for G-buffer rendering, COLOR_ATTACHMENT3 for deferred shading and forward rendering, here's the pesudo code:

//**Gbufffer part**
Bind G-Buffer FBO
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);
draw the G buffer

//**Lighting part**
Bind Lighting buffer FBO

//**Shading part**
Bind G-Buffer FBO
gl.drawBuffers([gl.COLOR_ATTACHMENT3]);

//**Forward rendring part**
//Still use the G-Buffer FBO and COLOR_ATTACHMENT3
draw forward material

when using this, I got a mistake in firefox:

Error: WebGL: drawBuffers: buffers[i] must be NONE or COLOR_ATTACHMENTi.

when lauching in Chrome, I got this:

FrameBufferObject.ts:151 WebGL: INVALID_OPERATION: drawBuffers: COLOR_ATTACHMENTi_EXT or NONE

What's wrong with my code? This really confuse me...THX.

解决方案

If I remember correctly you must use color attachment 0 for the first buffer, color attachment 1 for the second, color attachment 2 for the 3rd etc..

In otherwords this is ok

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.COLOR_ATTACHMENT1,  // color attachment 1 to draw buffer 1
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 2
]);

This is also ok

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.NONE,               // NONE to draw buffer 1
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 2
]);

This is not!!

gl.drawBuffers([
  gl.COLOR_ATTACHMENT0,  // color attachment 0 to draw buffer 0
  gl.COLOR_ATTACHMENT2,  // color attachment 2 to draw buffer 1 ERROR!
  gl.COLOR_ATTACHMENT1,  // color attachment 1 to draw buffer 2 ERROR!
]);

So in your case.

gl.drawBuffers([
   gl.COLOR_ATTACHMENT3,  // color attachment 3 to draw buffer 0 ERROR!
]);

The must always match 0 to 0, 1 to 1, 2 to 2, etc.

If that's really what you're doing you should make 3 framebuffer objects. One with the first 3 buffers, one with the 4th buffer, and one with all 4 buffers. Then you'd do something like

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

.. draw stuff ..

gl.bindFramebuffer(gl.FRAMEBUFFER, oneAttachmentFB);
gl.drawBuffers([gl.COLOR_ATTACHMENT0]);

.. draw stuff ..

gl.bindFramebuffer(gl.FRAMEBUFFER, fourAttachmentFB);
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1,
                gl.COLOR_ATTACHMENT2, gl.COLOR_ATTACHMENT3]);

.. draw stuff ..

In edition to that, various combos are not guaranteed to work. It's unclear what the limits are in WebGL2 but in WebGL1 only these combinations are guaranteed to work

• one color attachment (with or without depth or depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  

• two color attachments (with or without depth or depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  

• three color attachments (with or without depth or depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT2_WEBGL = RGBA/UNSIGNED_BYTE
  

• four color attachments (with or without depth or depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT2_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT3_WEBGL = RGBA/UNSIGNED_BYTE
  

All other combinations may or may not work depending on the GPU/Driver/Browser/OS

这篇关于在WebGL2中使用drawBuffers时遇到麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！