Расширение WEBGL_draw_buffers

Расширение WEBGL_draw_buffers является частью API WebGL и позволяет фрагментной программе записывать данные в несколько текстур, что полезно, например, для отложенного шейдинга.

Расширения WebGL доступны с помощью метода WebGLRenderingContext.getExtension(). Дополнительную информацию см. также в разделе Использование расширений в учебнике по WebGL.

Это расширение экспонирует новые константы, которые могут быть использованы в методах gl.framebufferRenderbuffer(), gl.framebufferTexture2D(), gl.getFramebufferAttachmentParameter() ext.drawBuffersWEBGL() и gl.getParameter().

ext.COLOR_ATTACHMENT0_WEBGL, ext.COLOR_ATTACHMENT1_WEBGL, ext.COLOR_ATTACHMENT2_WEBGL, ext.COLOR_ATTACHMENT3_WEBGL, ext.COLOR_ATTACHMENT4_WEBGL, ext.COLOR_ATTACHMENT5_WEBGL, ext.COLOR_ATTACHMENT6_WEBGL, ext.COLOR_ATTACHMENT7_WEBGL, ext.COLOR_ATTACHMENT8_WEBGL, ext.COLOR_ATTACHMENT9_WEBGL, ext.COLOR_ATTACHMENT10_WEBGL, ext.COLOR_ATTACHMENT11_WEBGL, ext.COLOR_ATTACHMENT12_WEBGL, ext.COLOR_ATTACHMENT13_WEBGL, ext.COLOR_ATTACHMENT14_WEBGL, ext.COLOR_ATTACHMENT15_WEBGL

Значение, определяющее буфер цвета.

ext.DRAW_BUFFER0_WEBGL, ext.DRAW_BUFFER1_WEBGL, ext.DRAW_BUFFER2_WEBGL, ext.DRAW_BUFFER3_WEBGL, ext.DRAW_BUFFER4_WEBGL, ext.DRAW_BUFFER5_WEBGL, ext.DRAW_BUFFER6_WEBGL, ext.DRAW_BUFFER7_WEBGL, ext.DRAW_BUFFER8_WEBGL ext.DRAW_BUFFER9_WEBGL, ext.DRAW_BUFFER10_WEBGL, ext.DRAW_BUFFER11_WEBGL, ext.DRAW_BUFFER12_WEBGL, ext.DRAW_BUFFER13_WEBGL, ext.DRAW_BUFFER14_WEBGL, ext.DRAW_BUFFER15_WEBGL

Значение, возвращающее буфер отрисовки.

ext.MAX_COLOR_ATTACHMENTS_WEBGL

Значение, указывающее максимальное количество точек присоединения цвета к буферу кадров.

ext.MAX_DRAW_BUFFERS_WEBGL

Значение, указывающее максимальное количество буферов отрисовки.

Это расширение экспонирует один новый метод.

ext.drawBuffersWEBGL()

Определяет буферы отрисовки, в которые записываются все фрагментные цвета. (При использовании WebGL2, этот метод доступен как gl.drawBuffers() по умолчанию).

Включение расширения:

const ext = gl.getExtension("WEBGL_draw_buffers");

Связывание нескольких текстур (в массив tx[] ) с разными цветовыми привязками буфера кадров:

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT0_WEBGL,
  gl.TEXTURE_2D,
  tx[0],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT1_WEBGL,
  gl.TEXTURE_2D,
  tx[1],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT2_WEBGL,
  gl.TEXTURE_2D,
  tx[2],
  0,
);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  ext.COLOR_ATTACHMENT3_WEBGL,
  gl.TEXTURE_2D,
  tx[3],
  0,
);

Сопоставление цветовых привязок с слотами буфера отрисовки, в которые будет записывать фрагментная программа, используя gl_FragData:

ext.drawBuffersWEBGL([
  ext.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
  ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
  ext.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2]
  ext.COLOR_ATTACHMENT3_WEBGL, // gl_FragData[3]
]);

Код шейдера, записывающий данные в несколько текстур:

<script type="x-shader/x-fragment">
  #extension GL_EXT_draw_buffers : require

  precision highp float;

  void main(void) {
    gl_FragData[0] = vec4(0.25);
    gl_FragData[1] = vec4(0.5);
    gl_FragData[2] = vec4(0.75);
    gl_FragData[3] = vec4(1.0);
  }
</script>

• WebGLRenderingContext.getExtension()
• WebGL2RenderingContext.drawBuffers()
• Блог Mozilla Hacks по отложенному шейдингу WebGL