OES_draw_buffers_indexed
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2022.
TheOES_draw_buffers_indexed extension is part of theWebGL API and enables the use of different blend options when writing to multiple color buffers simultaneously.
WebGL extensions are available using theWebGLRenderingContext.getExtension() method. For more information, see alsoUsing Extensions in theWebGL tutorial.
Note:This extension is only available toWebGL2 contexts.
Instance methods
OES_draw_buffers_indexed.blendEquationiOES()Sets both the RGB and alpha blend equations for a particular draw buffer.
OES_draw_buffers_indexed.blendEquationSeparateiOES()Sets the RGB and alpha blend equations separately for a particular draw buffer.
OES_draw_buffers_indexed.blendFunciOES()Defines which function is used when blending pixels for a particular draw buffer.
OES_draw_buffers_indexed.blendFuncSeparateiOES()Defines which function is used when blending pixels for RGB and alpha components separately for a particular draw buffer.
OES_draw_buffers_indexed.colorMaskiOES()Sets which color components to enable or to disable when drawing or rendering for a particular draw buffer.
OES_draw_buffers_indexed.disableiOES()Disables blending for a particular draw buffer.
OES_draw_buffers_indexed.enableiOES()Enables blending for a particular draw buffer.
Examples
Using theOES_draw_buffers_indexed extension
Enable the extension with a call toWebGLRenderingContext.getExtension().
const ext = gl.getExtension("OES_draw_buffers_indexed");You can now enable blending, set blending equation, blending function, and color mask for a particular draw buffer.
// For gl.DRAW_BUFFER0ext.enableiOES(gl.BLEND, 0);ext.blendEquationiOES(0, gl.FUNC_ADD);ext.blendFunciOES(0, gl.ONE, gl.ONE);ext.colorMaskiOES(0, 1, 0, 0, 0);// For gl.DRAW_BUFFER1ext.enableiOES(gl.BLEND, 1);ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.FUNC_SUBTRACT);ext.blendFuncSeparateiOES( 1, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ZERO,);ext.colorMaskiOES(1, 0, 1, 0, 0);To retrieve settings for a particular draw buffer, useWebGL2RenderingContext.getIndexedParameter().
// For gl.DRAW_BUFFER0gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 0);gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 0);gl.getIndexedParameter(gl.BLEND_SRC_RGB, 0);gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 0);gl.getIndexedParameter(gl.BLEND_DST_RGB, 0);gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 0);gl.getIndexedParameter(gl.COLOR_WRITEMASK, 0);// For gl.DRAW_BUFFER1gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 1);gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 1);gl.getIndexedParameter(gl.BLEND_SRC_RGB, 1);gl.getIndexedParameter(gl.BLEND_SRC_ALPHA, 1);gl.getIndexedParameter(gl.BLEND_DST_RGB, 1);gl.getIndexedParameter(gl.BLEND_DST_ALPHA, 1);gl.getIndexedParameter(gl.COLOR_WRITEMASK, 1);You can useWebGLRenderingContext.getParameter() to see how many draw buffers are available.
const maxDrawBuffers = gl.getParameter(gl.MAX_DRAW_BUFFERS);Specifications
| Specification |
|---|
| WebGL OES_draw_buffers_indexed Extension Specification |
Browser compatibility
Loading…