WebGLRenderingContext.blendFunc()
The WebGLRenderingContext.blendFunc()
method of the WebGL API defines which function is used for
blending pixel arithmetic.
Syntax
void gl.blendFunc(sfactor, dfactor);
Parameters
Return value
None.
Exceptions
- If sfactor or dfactor is not one of the listed possible values, a
gl.INVALID_ENUM
error is thrown. - If a constant color and a constant alpha value are used together as source and
destination factors, a
gl.INVALID_ENUM
error is thrown.
Constants
The following constants can be used for sfactor and dfactor.
The formula for the blending color can be described like this: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). The RBGA values are between 0 and 1.
Constant | Factor | Description |
---|---|---|
gl.ZERO |
0,0,0,0 | Multiplies all colors by 0. |
gl.ONE |
1,1,1,1 | Multiplies all colors by 1. |
gl.SRC_COLOR |
RS, GS, BS, AS | Multiplies all colors by the source colors. |
gl.ONE_MINUS_SRC_COLOR |
1-RS, 1-GS, 1-BS, 1-AS | Multiplies all colors by 1 minus each source color. |
gl.DST_COLOR |
RD, GD, BD, AD | Multiplies all colors by the destination color. |
gl.ONE_MINUS_DST_COLOR |
1-RD, 1-GD, 1-BD, 1-AD | Multiplies all colors by 1 minus each destination color. |
gl.SRC_ALPHA |
AS, AS, AS, AS | Multiplies all colors by the source alpha value. |
gl.ONE_MINUS_SRC_ALPHA |
1-AS, 1-AS, 1-AS, 1-AS | Multiplies all colors by 1 minus the source alpha value. |
gl.DST_ALPHA |
AD, AD, AD, AD | Multiplies all colors by the destination alpha value. |
gl.ONE_MINUS_DST_ALPHA |
1-AD, 1-AD, 1-AD, 1-AD | Multiplies all colors by 1 minus the destination alpha value. |
gl.CONSTANT_COLOR |
RC, GC, BC, AC | Multiplies all colors by a constant color. |
gl.ONE_MINUS_CONSTANT_COLOR |
1-RC, 1-GC, 1-BC, 1-AC | Multiplies all colors by 1 minus a constant color. |
gl.CONSTANT_ALPHA |
AC, AC, AC, AC | Multiplies all colors by a constant alpha value. |
gl.ONE_MINUS_CONSTANT_ALPHA |
1-AC, 1-AC, 1-AC, 1-AC | Multiplies all colors by 1 minus a constant alpha value. |
gl.SRC_ALPHA_SATURATE |
min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1 |
Multiplies the RGB colors by the smaller of either the source alpha value or the value of 1 minus the destination alpha value. The alpha value is multiplied by 1. |
Examples
To use the blend function, you first have to activate blending with
WebGLRenderingContext.enable()
with the argument gl.BLEND
.
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
To get the current blend function, query the BLEND_SRC_RGB
,
BLEND_SRC_ALPHA
, BLEND_DST_RGB
, and
BLEND_DST_ALPHA
constants which return one of the blend function constants.
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR;
// true
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'blendFunc' in that specification. |
Recommendation | Initial definition. In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification. |
OpenGL ES 2.0 The definition of 'glBlendFunc' in that specification. |
Standard | Man page of the OpenGL API. |
Browser compatibility
BCD tables only load in the browser
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.