WEBGL_draw_buffers

The WEBGL_draw_buffers extension is part of the WebGL API and enables a fragment shader to write to several textures, which is useful for deferred shading, for example.

WebGL extensions are available using the WebGLRenderingContext.getExtension() method. For more information, see also Using Extensions in the WebGL tutorial.

Constants

This extension exposes new constants, which can be used in the gl.framebufferRenderbuffer(), gl.framebufferTexture2D(), gl.getFramebufferAttachmentParameter()  ext.drawBuffersWEBGL(), and gl.getParameter() methods.

Copy Code

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

A GLenum specifying a color buffer.

Copy Code

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

A GLenum returning a draw buffer.

ext.MAX_COLOR_ATTACHMENTS_WEBGL

A GLint indicating the maximum number of framebuffer color attachment points.

ext.MAX_DRAW_BUFFERS_WEBGL

A GLint indicating the maximum number of draw buffers.

Methods

This extension exposes one new method.

ext.drawBuffersWEBGL()

Defines the draw buffers to which all fragment colors are written. (When using WebGL2, this method is available as gl.drawBuffers() by default).

Examples

Enabling the extension:

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

Binding multiple textures (to a tx[] array)  to different framebuffer color attachments:

var 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);

Mapping the color attachments to draw buffer slots that the fragment shader will write to using 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]
]);

Shader code that writes to multiple textures:

<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>

Specifications

Browser compatibility

[2] This extension was prefixed with MOZ_ or disabled behind the webgl.enable-draft-extensions preference in prior versions.

See also

• WebGLRenderingContext.getExtension()
• WebGL2RenderingContext.drawBuffers()
• WebGL deferred shading - Mozilla Hacks blog