The WebGLRenderingContext.blendFunc()
method of the WebGL API defines which function is used for blending pixel arithmetic.
Syntax
void gl.blendFunc(sfactor, dfactor);
Parameters
sfactor
- A
GLenum
specifying a multiplier for the source blending factors. The default value isgl.ONE
. For possible values, see below. dfactor
- A
GLenum
specifying a multiplier for the destination blending factors. The default value isgl.ZERO
. For possible values, see below.
Errors thrown
If sfactor or dfactor is not one of the listed possible values, a gl.INVALID_ENUM
error is thrown.
Return value
None.
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 color. |
gl.ONE_MINUS_SRC_ALPHA |
1-AS, 1-AS, 1-AS, 1-AS | Multiplies all colors by 1 minus the source alpha color. |
gl.DST_ALPHA |
AD, AD, AD, AD | Multiplies all colors by the destination alpha color. |
gl.ONE_MINUS_DST_ALPHA |
1-AD, 1-AD, 1-AD, 1-AD | Multiplies all colors by 1 minus the destination alpha color. |
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 color or the value of 1 minus the destination alpha color. 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, the following constants can't be used, but are defined in OpenGL: CONSTANT_COLOR , ONE_MINUS_CONSTANT_COLOR , CONSTANT_ALPHA , ONE_MINUS_CONSTANT_ALPHA . |
OpenGL ES 2.0 The definition of 'glBlendFunc' in that specification. |
Standard | Man page of the OpenGL API. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 9 | 4.0 (2.0) | 11 | 12 | 5.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | 25 | (Yes) | ? | 12 | 8.1 |