Your Search Results

    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

    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.

    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

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: fscholz
     Last updated by: fscholz,