WebGLRenderingContext: blendFuncSeparate()-Methode

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die WebGLRenderingContext.blendFuncSeparate()-Methode der WebGL API definiert, welche Funktion für das Blenden von Pixel-Arithmetik für RGB- und Alphakomponenten separat verwendet wird.

Syntax

js
blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)

Parameter

srcRGB

Ein GLenum, das einen Multiplikator für die roten, grünen und blauen (RGB) Quell-Mischfaktoren angibt. Der Standardwert ist gl.ONE. Für mögliche Werte siehe unten.

dstRGB

Ein GLenum, das einen Multiplikator für die roten, grünen und blauen (RGB) Ziel-Mischfaktoren angibt. Der Standardwert ist gl.ZERO. Für mögliche Werte siehe unten.

srcAlpha

Ein GLenum, das einen Multiplikator für den Alpha-Quell-Mischfaktor angibt. Der Standardwert ist gl.ONE. Für mögliche Werte siehe unten.

dstAlpha

Ein GLenum, das einen Multiplikator für den Alpha-Ziel-Mischfaktor angibt. Der Standardwert ist gl.ZERO. Für mögliche Werte siehe unten.

Rückgabewert

Keiner (undefined).

Ausnahmen

  • Wenn srcRGB, dstRGB, srcAlpha oder dstAlpha nicht einer der aufgeführten möglichen Werte ist, wird ein gl.INVALID_ENUM-Fehler ausgelöst.
  • Wenn eine konstante Farbe und ein konstanter Alphawert zusammen als Quellen (srcRGB) und Ziel (dstRGB) Faktoren verwendet werden, wird ein gl.INVALID_ENUM-Fehler ausgelöst.

Konstanten

Die folgenden Konstanten können für srcRGB, dstRGB, srcAlpha und dstAlpha verwendet werden.

Die Formeln für die Mischfaktoren können wie folgt beschrieben werden (alle RGBA-Werte liegen zwischen 0 und 1):

  • color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
  • color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)

In der folgenden Tabelle stehen RS, GS, BS, AS jeweils für die roten, grünen, blauen und alpha Komponenten der Quelle, während RD, GD, BD, AD jeweils für die roten, grünen, blauen und alpha Komponenten des Ziels stehen. Ebenso stehen RC, GC, BC, AC jeweils für die roten, grünen, blauen und alpha Komponenten einer konstanten Farbe. Sie sind alle Werte zwischen 0 und 1, inklusive.

Konstante RGB Faktor Alpha Faktor Beschreibung
gl.ZERO 0,0,0 0 Multipliziert alle Farben mit 0.
gl.ONE 1,1,1,1 1 Multipliziert alle Farben mit 1.
gl.SRC_COLOR RS, GS, BS AS Multipliziert alle Farben mit den Quellfarben.
gl.ONE_MINUS_SRC_COLOR 1-RS, 1-GS, 1-BS 1-AS Multipliziert alle Farben mit 1 minus jeder Quellfarbe.
gl.DST_COLOR RD, GD, BD AD Multipliziert alle Farben mit der Zielfarbe.
gl.ONE_MINUS_DST_COLOR 1-RD, 1-GD, 1-BD 1-AD Multipliziert alle Farben mit 1 minus jeder Zielfarbe.
gl.SRC_ALPHA AS, AS, AS AS Multipliziert alle Farben mit der Quellalpha-Farbe.
gl.ONE_MINUS_SRC_ALPHA 1-AS, 1-AS, 1-AS 1-AS Multipliziert alle Farben mit 1 minus der Quellalpha-Farbe.
gl.DST_ALPHA AD, AD, AD AD Multipliziert alle Farben mit der Zielalpha-Farbe.
gl.ONE_MINUS_DST_ALPHA 1-AD, 1-AD, 1-AD 1-AD Multipliziert alle Farben mit 1 minus der Zielalpha-Farbe.
gl.CONSTANT_COLOR RC, GC, BC AC Multipliziert alle Farben mit einer konstanten Farbe.
gl.ONE_MINUS_CONSTANT_COLOR 1-RC, 1-GC, 1-BC 1-AC Multipliziert alle Farben mit 1 minus einer konstanten Farbe.
gl.CONSTANT_ALPHA AC, AC, AC AC Multipliziert alle Farben mit einem konstanten Alphawert.
gl.ONE_MINUS_CONSTANT_ALPHA 1-AC, 1-AC, 1-AC 1-AC Multipliziert alle Farben mit 1 minus einem konstanten Alphawert.
gl.SRC_ALPHA_SATURATE min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD) 1 Multipliziert die RGB-Farben mit dem kleineren Wert entweder der Quellalpha-Farbe oder dem Wert von 1 minus der Zielalpha-Farbe. Der Alphawert wird mit 1 multipliziert.

Beispiele

Um die Mischfunktion zu verwenden, müssen Sie zuerst die Mischung mit WebGLRenderingContext.enable() mit dem Argument gl.BLEND aktivieren.

js
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);

Um die aktuelle Mischfunktion abzufragen, verwenden Sie die Konstanten BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB und BLEND_DST_ALPHA, die eine der Mischfunktionskonstanten zurückgeben.

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

Spezifikationen

Specification
WebGL Specification
# 5.14.3

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch