WebGLRenderingContext.blendEquationSeparate()

The WebGLRenderingContext.blendEquationSeparate() method of the WebGL API is used to set the RGB blend equation and alpha blend equation separately.

The blend equation determines how a new pixel is combined with a pixel already in the WebGLFramebuffer.

Syntax

void gl.blendEquationSeparate(modeRGB, modeAlpha);

Parameters

modeRGB

A GLenum specifying how the red, green and blue components of source and destination colors are combined. Must be either:

  • gl.FUNC_ADD: source + destination (default value),
  • gl.FUNC_SUBTRACT: source - destination,
  • gl.FUNC_REVERSE_SUBTRACT: destination - source,
  • When using the EXT_blend_minmax extension:
    • ext.MIN_EXT: Minimum of source and destination,
    • ext.MAX_EXT: Maximum of source and destination.
  • When using a WebGL 2 context, the following values are available additionally:
    • gl.MIN: Minimum of source and destination,
    • gl.MAX: Maximum of source and destination.
modeAlpha

A GLenum specifying how the alpha component (transparency) of source and destination colors are combined. Must be either:

  • gl.FUNC_ADD: source + destination (default value),
  • gl.FUNC_SUBTRACT: source - destination,
  • gl.FUNC_REVERSE_SUBTRACT: destination - source,
  • When using the EXT_blend_minmax extension:
    • ext.MIN_EXT: Minimum of source and destination,
    • ext.MAX_EXT: Maximum of source and destination.
  • When using a WebGL 2 context, the following values are available additionally:
    • gl.MIN: Minimum of source and destination,
    • gl.MAX: Maximum of source and destination.

Return value

None.

Exceptions

If mode is not one of the three possible values, a gl.INVALID_ENUM error is thrown.

Examples

To set the blend equations, use:

gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT);

To get the current blend equations, query the BLEND_EQUATION, BLEND_EQUATION_RGB and BLEND_EQUATION_ALPHA constants which return gl.FUNC_ADD, gl.FUNC_SUBTRACT, gl.FUNC_REVERSE_SUBTRACT, or if the EXT_blend_minmax is enabled: ext.MIN_EXT or ext.MAX_EXT.

gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD;
// true

gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD;
// true

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
blendEquationSeparate
9
12
4
11
12
5.1
≤37
25
Yes
12
8
1.5
WebGL2
56
79
51
No
43
No
58
58
51
43
No
7.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquationSeparate