WEBGL_draw_buffers extension

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

TheWEBGL_draw_buffers extension is part of theWebGL API and enables a fragment shader to write to several textures, which is useful fordeferred shading, for example.

WebGL extensions are available using theWebGLRenderingContext.getExtension() method. For more information, see alsoUsing Extensions in theWebGL tutorial.

Note:This extension is only available toWebGL1 contexts. InWebGL2, the functionality of this extension is available on the WebGL2 context by default. In WebGL 2, the constants are available without the "WEBGL" suffix and the new GLSL built-ins require GLSL#version 300 es.

Constants

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

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: AGLenum specifying a color buffer.
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: AGLenum returning a draw buffer.
ext.MAX_COLOR_ATTACHMENTS_WEBGL: AGLint indicating the maximum number of framebuffer color attachment points.
ext.MAX_DRAW_BUFFERS_WEBGL: AGLint indicating the maximum number of draw buffers.

Instance methods

This extension exposes one new method.

ext.drawBuffersWEBGL(): Defines the draw buffers to which all fragment colors are written. (When usingWebGL2, this method is available asgl.drawBuffers() by default).

Examples

Enabling the extension:

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

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

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

Mapping the color attachments to draw buffer slots that the fragment shader will write to usinggl_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:

html

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