WebGLRenderingContext: blendEquationSeparate() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

注意:此功能在 Web Workers 中可用。

WebGLRenderingContext.blendEquationSeparate() 方法是 WebGL API 的一部分,用於分別設定 RGB 混合方程和 Alpha 混合方程。

混合方程決定了新畫素如何與已在 WebGLFramebuffer 中的畫素進行組合。

語法

js
blendEquationSeparate(modeRGB, modeAlpha)

引數

modeRGB

一個 GLenum,指定了源顏色和目標顏色的紅、綠、藍分量如何組合。必須是以下之一:

  • gl.FUNC_ADD: 源 + 目標 (預設值),

  • gl.FUNC_SUBTRACT: 源 - 目標,

  • gl.FUNC_REVERSE_SUBTRACT: 目標 - 源,

  • 使用 EXT_blend_minmax 擴充套件時

    • ext.MIN_EXT: 源和目標中的最小值,
    • ext.MAX_EXT: 源和目標中的最大值。
  • 使用 WebGL 2 上下文時,還可以使用以下值:

    • gl.MIN: 源和目標中的最小值,
    • gl.MAX: 源和目標中的最大值。
modeAlpha

一個 GLenum,指定了源顏色和目標顏色的 Alpha 分量(透明度)如何組合。必須是以下之一:

  • gl.FUNC_ADD: 源 + 目標 (預設值),

  • gl.FUNC_SUBTRACT: 源 - 目標,

  • gl.FUNC_REVERSE_SUBTRACT: 目標 - 源,

  • 使用 EXT_blend_minmax 擴充套件時

    • ext.MIN_EXT: 源和目標中的最小值,
    • ext.MAX_EXT: 源和目標中的最大值。
  • 使用 WebGL 2 上下文時,還可以使用以下值:

    • gl.MIN: 源和目標中的最小值,
    • gl.MAX: 源和目標中的最大值。

返回值

無(undefined)。

異常

如果 mode 不是這三個可能值之一,則會丟擲 gl.INVALID_ENUM 錯誤。

示例

要設定混合方程,請使用:

js
gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT);

要獲取當前的混合方程,請查詢 BLEND_EQUATIONBLEND_EQUATION_RGBBLEND_EQUATION_ALPHA 常量,它們會返回 gl.FUNC_ADDgl.FUNC_SUBTRACTgl.FUNC_REVERSE_SUBTRACT,或者如果啟用了 EXT_blend_minmax 擴充套件:ext.MIN_EXText.MAX_EXT

js
gl.getParameter(gl.BLEND_EQUATION_RGB) === gl.FUNC_ADD;
// true

gl.getParameter(gl.BLEND_EQUATION_ALPHA) === gl.FUNC_ADD;
// true

規範

規範
WebGL 規範
# 5.14.3

瀏覽器相容性

另見