This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
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.
blendEquation(mode)
modeA GLenum specifying how source and destination colors are combined. Must be either:
gl.FUNC_ADD: source + destination (default value)gl.FUNC_SUBTRACT: source - destinationgl.FUNC_REVERSE_SUBTRACT: destination - sourceWhen using the EXT_blend_minmax extension:
ext.MIN_EXT: Minimum of source and destinationext.MAX_EXT: Maximum of source and destinationWhen using a WebGL 2 context, the following values are available additionally:
gl.MIN: Minimum of source and destinationgl.MAX: Maximum of source and destinationIf mode is not one of the three possible values, a gl.INVALID_ENUM error is thrown.
None (undefined).
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
| Specification |
|---|
| WebGL Specification> # 5.14.3> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
blendEquation |
9 | 12 | 4 | 12 | 5.1 | 25 | 4 | 12 | 8 | 1.5 | 4.4.3 | 8 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquation