WebGLRenderingContext: blendFuncSeparate() 方法
注意：此功能在 Web Workers 中可用。
WebGLRenderingContext.blendFuncSeparate() 方法属于 WebGL API，它定义了如何分别对 RGB 和 Alpha 分量进行像素混合算术运算。
语法
js
blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)
参数
返回值
无（undefined）。
异常
- 如果 srcRGB、dstRGB、srcAlpha 或 dstAlpha 不是列出的可能值之一，则会抛出
gl.INVALID_ENUM错误。 - 如果同时使用常量颜色和常量 Alpha 值作为源（
srcRGB）和目标（dstRGB）因子，则会抛出gl.INVALID_ENUM错误。
常量
以下常量可用于 srcRGB、dstRGB、srcAlpha 和 dstAlpha：
混合因子的计算公式如下（所有 RGBA 值介于 0 和 1 之间）：
- color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
- color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)
在下表中，RS、GS、BS、AS 分别代表源的红、绿、蓝和Alpha分量，而 RD、GD、BD、AD 分别代表目标的红、绿、蓝和Alpha分量。同样，RC、GC、BC、AC 分别代表常量颜色的红、绿、蓝和Alpha分量。它们的值都介于 0 和 1 之间（包含）。
| 常量 | RGB 因子 | Alpha 因子 | 描述 |
|---|---|---|---|
gl.ZERO |
0,0,0 | 0 | 将所有颜色乘以 0。 |
gl.ONE |
1,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.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
要获取当前的混合函数，请查询 BLEND_SRC_RGB、BLEND_SRC_ALPHA、BLEND_DST_RGB 和 BLEND_DST_ALPHA 常量，它们会返回一个混合函数常量。
js
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
规范
| 规范 |
|---|
| WebGL 规范 # 5.14.3 |
浏览器兼容性
加载中…