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 | Status | Comment |
WebGL 1.0The definition of 'blendEquation' in that specification. | Recommendation | Initial definition for WebGL. |
OpenGL ES 2.0The definition of 'glBlendEquation' in that specification. | Standard | Man page of the OpenGL ES 2.0 API. |
OpenGL ES 3.0The definition of 'glBlendEquation' in that specification. | Standard | Man page of the OpenGL ES 3.0 API. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
blendEquation
|
Chrome
Full support 9 |
Edge
Full support 12 |
Firefox
Full support 4 |
IE
Full support 11 |
Opera
Full support 12 |
Safari
Full support 5.1 |
WebView Android
Full support Yes |
Chrome Android
Full support 25 |
Firefox Android
Full support Yes |
Opera Android
Full support 12 |
Safari iOS
Full support 8 |
Samsung Internet Android
Full support 1.5 |
WebGL2
|
Chrome
Full support 56 |
Edge
Full support 79 |
Firefox
Full support 51 |
IE
No support No |
Opera
Full support 43 |
Safari
No support No |
WebView Android
Full support 58 |
Chrome Android
Full support 58 |
Firefox Android
Full support 51 |
Opera Android
Full support 43 |
Safari iOS
No support No |
Samsung Internet Android
Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
WebGLRenderingContext.blendEquation() by Mozilla Contributors is licensed under CC-BY-SA 2.5.