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 API 的 WebGLRenderingContext.blendFunc()
方法定义了使用哪个函数来作为混合像素的算法。
语法
js
blendFunc(sfactor, dfactor)
参数
返回值
无(undefined
)。
异常
- 如果 sfactor 或 dfactor 不是列出的可能值之一,则抛出
gl.INVALID_ENUM
错误。 - 如果使用恒定的颜色和恒定的 alpha 值作为源和目标因子,则抛出
gl.INVALID_ENUM
错误。
常量
下列常量可用于 sfactor 和 dfactor。
混合颜色的公式可以这样描述: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_RGB
、BLEND_SRC_ALPHA
、BLEND_DST_RGB
和 BLEND_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 |