OES\_draw\_buffers\_indexed
===========================

The **`OES_draw_buffers_indexed`** extension is part of the WebGL API and enables the use of different blend options when writing to multiple color buffers simultaneously.

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

**Note:** This extension is only available to WebGL2 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 the `OES_draw_buffers_indexed` extension

Enable the extension with a call to `WebGLRenderingContext.getExtension()`.


```js
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.


```js
// For gl.DRAW\_BUFFER0
ext.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\_BUFFER1
ext.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, use `WebGL2RenderingContext.getIndexedParameter()`.


```js
// For gl.DRAW\_BUFFER0
gl.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\_BUFFER1
gl.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 use `WebGLRenderingContext.getParameter()` to see how many draw buffers are available.


```js
const maxDrawBuffers = gl.getParameter(gl.MAX\_DRAW\_BUFFERS);
```

Specifications
--------------

| Specification |
| --- |
| WebGL OES\_draw\_buffers\_indexed Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.