opengl-es - 在WebGL2中使用drawBuffers时遇到一些问题

Question

我想将延迟渲染器和前向渲染器组合在一起。为了共享相同的深度缓冲区，我使用具有 4 个颜色附件的单个帧缓冲区对象，COLOR_ATTACHMENT0-2 用于 G 缓冲区渲染，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

我的代码有什么问题吗？这真的让我很困惑……谢谢。

Answer 1

如果我没记错的话，您必须对第一个缓冲区使用颜色附件 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 个帧缓冲区对象。一个包含前 3 个缓冲区，一个包含第四个缓冲区，一个包含所有 4 个缓冲区。然后你会做类似的事情

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 中只有这些组合才能保证工作

• 一种颜色附件(有或没有深度或深度模板)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  

• 两个颜色附件(有或没有深度或深度模板)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE
  

• 三种颜色附件(带或不带深度或深度模板)

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

• 四种颜色附件(有或没有深度或深度模板)

  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/驱动程序/浏览器/操作系统