WebGLRenderingContext: blendEquation() method
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
Parameters
-
mode
-
A GLenum
specifying how 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
Exception
If mode is not one of the three possible values, a gl.INVALID_ENUM
error is thrown.
Return value
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;
gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD;
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 |
blendEquation |
9 |
12 |
4 |
11 |
12 |
5.1 |
4.4.3 |
25 |
4 |
12 |
8 |
1.5 |
See also