WebGLRenderingContext:blendFunc() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

备注: 此特性在 Web Worker 中可用。

WebGL APIWebGLRenderingContext.blendFunc() 方法定义了使用哪个函数来作为混合像素的算法。

语法

js
blendFunc(sfactor, dfactor)

参数

sfactor

一个指定源混合因子的乘数的 GLenum。默认值为 gl.ONE。有关可能的值,请参见下方。

dfactor

一个指定目标混合因子的乘数的 GLenum。默认值为 gl.ZERO。有关可能的值,请参见下方。

返回值

无(undefined)。

异常

  • 如果 sfactordfactor 不是列出的可能值之一,则抛出 gl.INVALID_ENUM 错误。
  • 如果使用恒定的颜色和恒定的 alpha 值作为源和目标因子,则抛出 gl.INVALID_ENUM 错误。

常量

下列常量可用于 sfactordfactor

混合颜色的公式可以这样描述:color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor)。RBGA 值在 0 到 1 之间。

在以下表格中,RS、GS、BS、AS 分别表示源颜色的红色绿色蓝色alpha 分量,而 RD、GD、BD、AD 分别表示目标颜色的红色绿色蓝色alpha 分量。它们都是介于 0 到 1 之间(包含)的值。

常量 因子 描述
gl.ZERO 0,0,0,0 将所有颜色乘以 0。
gl.ONE 1,1,1,1 将所有颜色乘以 1。
gl.SRC_COLOR RS, GS, BS, AS 将所有颜色与源颜色相乘。
gl.ONE_MINUS_SRC_COLOR 1-RS, 1-GS, 1-BS, 1-AS 将所有颜色与 1 减去每个源颜色相乘。
gl.DST_COLOR RD, GD, BD, AD 将所有颜色与目标颜色相乘。
gl.ONE_MINUS_DST_COLOR 1-RD, 1-GD, 1-BD, 1-AD 将所有颜色与 1 减去每个目标颜色相乘。
gl.SRC_ALPHA AS, AS, AS, AS 将所有颜色与源 alpha 值相乘。
gl.ONE_MINUS_SRC_ALPHA 1-AS, 1-AS, 1-AS, 1-AS 将所有颜色与 1 减去源 alpha 值相乘。
gl.DST_ALPHA AD, AD, AD, AD 将所有颜色与目标 alpha 值相乘。
gl.ONE_MINUS_DST_ALPHA 1-AD, 1-AD, 1-AD, 1-AD 将所有颜色与 1 减去目标 alpha 值相乘。
gl.CONSTANT_COLOR RC, GC, BC, AC 将所有颜色与一个常数颜色相乘。
gl.ONE_MINUS_CONSTANT_COLOR 1-RC, 1-GC, 1-BC, 1-AC 将所有颜色与 1 减去一个常数颜色相乘。
gl.CONSTANT_ALPHA AC, AC, AC, AC 将所有颜色与一个常数 alpha 值相乘。
gl.ONE_MINUS_CONSTANT_ALPHA 1-AC, 1-AC, 1-AC, 1-AC 将所有颜色与 1 减去一个常数 alpha 值相乘。
gl.SRC_ALPHA_SATURATE min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1 将 RGB 颜色乘以源 alpha 值和 1 减去目标 alpha 值中的较小值。alpha 值乘以 1。

示例

要使用混合函数,你首先必须使用具有 gl.BLEND 参数的 WebGLRenderingContext.enable() 来激活混合。

js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);

要获取当前的混合函数,可以查询 BLEND_SRC_RGBBLEND_SRC_ALPHABLEND_DST_RGBBLEND_DST_ALPHA 常量,这些常量会返回对应的混合函数常量值。

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

规范

Specification
WebGL Specification
# 5.14.3

浏览器兼容性

参见