WebGLRenderingContext: blendFunc() method

Note: This feature is available in Web Workers.

The WebGLRenderingContext.blendFunc() method of the WebGL API defines which function is used for blending pixel arithmetic.

Syntax

js
blendFunc(sfactor, dfactor)

Parameters

sfactor

A GLenum specifying a multiplier for the source blending factors. The default value is gl.ONE. For possible values, see below.

dfactor

A GLenum specifying a multiplier for the destination blending factors. The default value is gl.ZERO. For possible values, see below.

Return value

None (undefined).

Exceptions

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 RGBA values are between 0 and 1.

In the following table, RS, GS, BS, AS represent respectively the red, green, blue and alpha component of the source, while RD, GD, BD, AD represent respectively the red, green, blue and alpha component of the destination. Similarly, RC, GC, BC, AC represent respectively the red, green, blue and alpha component of a constant color. They are all values between 0 and 1, included.

ConstantFactorDescription
gl.ZERO0,0,0,0Multiplies all colors by 0.
gl.ONE1,1,1,1Multiplies all colors by 1.
gl.SRC_COLORRS, GS, BS, ASMultiplies all colors by the source colors.
gl.ONE_MINUS_SRC_COLOR1-RS, 1-GS, 1-BS, 1-ASMultiplies all colors by 1 minus each source color.
gl.DST_COLORRD, GD, BD, ADMultiplies all colors by the destination color.
gl.ONE_MINUS_DST_COLOR1-RD, 1-GD, 1-BD, 1-ADMultiplies all colors by 1 minus each destination color.
gl.SRC_ALPHAAS, AS, AS, ASMultiplies all colors by the source alpha value.
gl.ONE_MINUS_SRC_ALPHA1-AS, 1-AS, 1-AS, 1-ASMultiplies all colors by 1 minus the source alpha value.
gl.DST_ALPHAAD, AD, AD, ADMultiplies all colors by the destination alpha value.
gl.ONE_MINUS_DST_ALPHA1-AD, 1-AD, 1-AD, 1-ADMultiplies all colors by 1 minus the destination alpha value.
gl.CONSTANT_COLORRC, GC, BC, ACMultiplies all colors by a constant color.
gl.ONE_MINUS_CONSTANT_COLOR1-RC, 1-GC, 1-BC, 1-ACMultiplies all colors by 1 minus a constant color.
gl.CONSTANT_ALPHAAC, AC, AC, ACMultiplies all colors by a constant alpha value.
gl.ONE_MINUS_CONSTANT_ALPHA1-AC, 1-AC, 1-AC, 1-ACMultiplies all colors by 1 minus a constant alpha value.
gl.SRC_ALPHA_SATURATEmin(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1Multiplies 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.

js
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.

js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_COLOR;
// true

Specifications

See also