W3cubDocs

WebGLRenderingContext.blendFuncSeparate

The WebGLRenderingContext.blendFuncSeparate() method of the WebGL API defines which function is used for blending pixel arithmetic for RGB and alpha components separately.

Syntax

void gl.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha);

Parameters

srcRGB: A GLenum specifying a multiplier for the red, green and blue (RGB) source blending factors. The default value is gl.ONE. For possible values, see below.
dstRGB: A GLenum specifying a multiplier for the red, green and blue (RGB) destination blending factors. The default value is gl.ZERO. For possible values, see below.
srcAlpha: A GLenum specifying a multiplier for the alpha source blending factor. The default value is gl.ONE. For possible values, see below.
dstAlpha: A GLenum specifying a multiplier for the alpha destination blending factor. The default value is gl.ZERO. For possible values, see below.

Return value

None.

Exceptions

If srcRGB, dstRGB, srcAlpha, or dstAlpha 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 (srcRGB) and destination (dstRGB) factors, a gl.INVALID_ENUM error is thrown.

Constants

The following constants can be used for srcRGB, dstRGB, srcAlpha, and dstAlpha

The formulas for the blending factors can be described like this (all RGBA values are between 0 and 1):

color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)

Constant	RGB factor	Alpha factor	Description
`gl.ZERO`	0,0,0	0	Multiplies all colors by 0.
`gl.ONE`	1,1,1,1	1	Multiplies all colors by 1.
`gl.SRC_COLOR`	R_S, G_S, B_S	A_S	Multiplies all colors by the source colors.
`gl.ONE_MINUS_SRC_COLOR`	1-R_S, 1-G_S, 1-B_S	1-A_S	Multiplies all colors by 1 minus each source color.
`gl.DST_COLOR`	R_D, G_D, B_D	A_D	Multiplies all colors by the destination color.
`gl.ONE_MINUS_DST_COLOR`	1-R_D, 1-G_D, 1-B_D	1-A_D	Multiplies all colors by 1 minus each destination color.
`gl.SRC_ALPHA`	A_S, A_S, A_S	A_S	Multiplies all colors by the source alpha color.
`gl.ONE_MINUS_SRC_ALPHA`	1-A_S, 1-A_S, 1-A_S	1-A_S	Multiplies all colors by 1 minus the source alpha color.
`gl.DST_ALPHA`	A_D, A_D, A_D	A_D	Multiplies all colors by the destination alpha color.
`gl.ONE_MINUS_DST_ALPHA`	1-A_D, 1-A_D, 1-A_D	1-A_D	Multiplies all colors by 1 minus the destination alpha color.
`gl.CONSTANT_COLOR`	R_C, G_C, B_C	A_C	Multiplies all colors by a constant color.
`gl.ONE_MINUS_CONSTANT_COLOR`	1-R_C, 1-G_C, 1-B_C	1-A_C	Multiplies all colors by 1 minus a constant color.
`gl.CONSTANT_ALPHA`	A_C, A_C, A_C	A_C	Multiplies all colors by a constant alpha value.
`gl.ONE_MINUS_CONSTANT_ALPHA`	1-A_C, 1-A_C, 1-A_C	1-A_C	Multiplies all colors by 1 minus a constant alpha value.
`gl.SRC_ALPHA_SATURATE`	min(A_S, 1 - A_D), min(A_S, 1 - A_D), min(A_S, 1 - A_D)	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.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);

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.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	9	12	4	11	12	5.1
`SharedArrayBuffer` as a parameter	60	?	?	?	47	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	25	Yes	Yes	12	8.1	Yes
`SharedArrayBuffer` as a parameter	60	60	?	?	47	?	No