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 (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
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.0 The definition of 'blendEquation' in that specification. |
Recommendation | Initial definition for WebGL. |
OpenGL ES 2.0 The definition of 'glBlendEquation' in that specification. |
Standard | Man page of the OpenGL ES 2.0 API. |
OpenGL ES 3.0 The definition of 'glBlendEquation' in that specification. |
Standard | Man page of the OpenGL ES 3.0 API. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 9 | 12 | 4.0 (2.0) | 11 | 12 | 5.1 |
WebGL 2 | No support [2] | No support | Nightly build [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | 25 | 4.0 (2.0) | 1.0 | ? | 12 | 8.0 |
WebGL 2 | No support | No support | No support | No support | No support | No support | No support |
[1] WebGL 2 is enabled by default in Firefox Nightly. To enable it in a release version of Firefox, set the preference webgl.enable-prototype-webgl2
to true
in about:config.
[2] To use an experimental implementation of WebGL 2 in Chrome, you have to start Chrome with the runtime flag --enable-unsafe-es3-apis
.