Получите некоторую проблему при использовании drawBuffers в WebGL2

Question

Я хочу объединить мой отложенный рендерер и передний рендер вместе. Для того, чтобы одну и ту же буфер глубины, я использую один объект буфера кадра с 4 цветовых пристрастий, COLOR_ATTACHMENT0-2 для G-буфера рендеринга, COLOR_ATTACHMENT3 для отложенного затенения и вперед рендеринга, вот код pesudo:

//**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.

когда lauching в Chrome, я получил это:

FrameBufferObject.ts: 151 WebGL: INVALID_OPERATION: drawBuffers: COLOR_ATTACHMENTi_EXT или NONE

Что случилось с моим кодом? Это действительно путает меня ... THX.

Answer 1

Я не удивлюсь, если ваш фактический код немного отличается от того, что вы публикуете здесь.

Посмотрите на источники Firefox для WebGLContext :: DrawBuffers над на https://dxr.mozilla.org/mozilla-central/source/dom/canvas/WebGLContextFramebufferOperations.cpp:

for (size_t i = 0; i < buffers.Length(); i++) { 
    // "If the GL is bound to a draw framebuffer object, the `i`th buffer listed in 
    // bufs must be COLOR_ATTACHMENTi or NONE. Specifying a buffer out of order, 
    // BACK, or COLOR_ATTACHMENTm where `m` is greater than or equal to the value of 
    // MAX_COLOR_ATTACHMENTS, will generate the error INVALID_OPERATION. 

    // WEBGL_draw_buffers: 
    // "The value of the MAX_COLOR_ATTACHMENTS_WEBGL parameter must be greater than or 
    // equal to that of the MAX_DRAW_BUFFERS_WEBGL parameter." 
    // This means that if buffers.Length() isn't larger than MaxDrawBuffers, it won't 
    // be larger than MaxColorAttachments. 
    if (buffers[i] != LOCAL_GL_NONE && 
     buffers[i] != LOCAL_GL_COLOR_ATTACHMENT0 + i) 
    { 
     ErrorInvalidOperation("%s: `buffers[i]` must be NONE or COLOR_ATTACHMENTi.", 
           funcName); 
     return; 
    } 
} 

Ваш код не удается, что чек. Может, у вас есть заказ?

[Редактировать] Как GMan указывает, второй вызов к drawbuffers, gl.drawBuffers([gl.COLOR_ATTACHMENT3]);, не соответствует этой проверки [/ Edit]

Answer 2

Если я правильно помню, вы должны использовать прикрепление цвет 0 для первый буфер, цвето приложение 1 для второго, вложение цвета 2 для 3-го и т.д ..

В других случаях это нормально

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 объектов фреймбуфера. Один с первыми тремя буферами, один с 4-м буфером и один со всеми 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 только эти комбинации гарантированно работают

• одно вложение цвета (с или без глубины depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE 
  

• два цвета вложений (с или без глубины depth_stencil)

  COLOR_ATTACHMENT0_WEBGL = RGBA/UNSIGNED_BYTE 
  COLOR_ATTACHMENT1_WEBGL = RGBA/UNSIGNED_BYTE 
  

• три цветовых вложений (с или без глубины или depth_stencil)

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

• четыре цвета вложения (с или без глубины или 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/Driver/Browser/OS