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 |
瀏覽器相容性
載入中…