WebGLRenderingContext: blendFunc() 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.blendFunc() Methode der WebGL API definiert, welche Funktion für die Mischung der Pixelarithmetik verwendet wird.

Syntax

js
blendFunc(sfactor, dfactor)

Parameter

sfactor

Ein GLenum, das einen Multiplikator für die Quell-Mischfaktoren angibt. Der Standardwert ist gl.ONE. Mögliche Werte siehe unten.

dfactor

Ein GLenum, das einen Multiplikator für die Ziel-Mischfaktoren angibt. Der Standardwert ist gl.ZERO. Mögliche Werte siehe unten.

Rückgabewert

Keiner (undefined).

Ausnahmen

  • Wenn sfactor oder dfactor 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 Quell- und Ziel-Faktoren verwendet werden, wird ein gl.INVALID_ENUM Fehler ausgelöst.

Konstanten

Die folgenden Konstanten können für sfactor und dfactor verwendet werden.

Die Formel für die Mischfarbe kann wie folgt beschrieben werden: Farbe(RGBA) = (Quellfarbe * sfactor) + (Zielfarbe * dfactor). Die RGBA-Werte liegen zwischen 0 und 1.

Im Folgenden stehen RS, GS, BS, AS jeweils für die rot, grün, blau und alpha Komponente der Quelle, während RD, GD, BD, AD jeweils für die rot, grün, blau und alpha Komponente des Ziels stehen. Ebenso stehen RC, GC, BC, AC jeweils für die rot, grün, blau und alpha Komponente einer konstanten Farbe. Sie sind alle Werte zwischen 0 und 1, inklusive.

Konstante Faktor Beschreibung
gl.ZERO 0,0,0,0 Multipliziert alle Farben mit 0.
gl.ONE 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 dem Quell-Alphawert.
gl.ONE_MINUS_SRC_ALPHA 1-AS, 1-AS, 1-AS, 1-AS Multipliziert alle Farben mit 1 minus dem Quell-Alphawert.
gl.DST_ALPHA AD, AD, AD, AD Multipliziert alle Farben mit dem Ziel-Alphawert.
gl.ONE_MINUS_DST_ALPHA 1-AD, 1-AD, 1-AD, 1-AD Multipliziert alle Farben mit 1 minus dem Ziel-Alphawert.
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 von entweder dem Quell-Alphawert oder dem Wert von 1 minus dem Ziel-Alphawert. Der Alphawert wird mit 1 multipliziert.

Beispiele

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

js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);

Um die aktuelle Mischfunktion abzurufen, fragen Sie die BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB und BLEND_DST_ALPHA Konstanten ab, die eine der Mischfunktionskonstanten zurückgeben.

js
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
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