WebGLRenderingContext.blendEquation()

The WebGLRenderingContext.blendEquation() method of the WebGL API is used to set both the RGB blend equation and alpha blend equation to a single equation.

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

Syntax

void gl.blendEquation(mode);

Parameters

mode

A GLenum specifying how source and destination colors are combined. Must be either:

gl.FUNC_ADD: source + destination,
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.

default value: gl.FUNC_ADD

Exception

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

Return value

None.

Examples

To set the blend equation, use:

gl.blendEquation(gl.FUNC_ADD);
gl.blendEquation(gl.FUNC_SUBTRACT);
gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);

To get the 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

Specification
WebGL Specification (WebGL) # 5.14.3

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