WebGLRenderingContext.blendFuncSeparate() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)

Beschreibung

blendFuncSeparate() gibt an, wie WebGL beim aktiven Blending (gl.enable(gl.BLEND)) die Farbe eines neuen Fragments (Quelle) mit der Farbe im Framebuffer (Ziel) verrechnet. Anders als bei blendFunc() legst du die Faktoren für die RGB-Kanäle und den Alphakanal getrennt fest.

Mit der Standard-Blend-Gleichung FUNC_ADD gilt: Ergebnis.rgb = Quelle.rgb × srcRGB + Ziel.rgb × dstRGB und Ergebnis.a = Quelle.a × srcAlpha + Ziel.a × dstAlpha. Die Gleichung selbst lässt sich mit blendEquation() bzw. blendEquationSeparate() ändern.

Gebraucht wird das vor allem, wenn der Alphawert im Framebuffer eine Rolle spielt, z. B. beim Rendern auf ein transparentes Canvas, das der Browser mit der Seite zusammensetzt, oder bei Offscreen-Render-Targets, die später weiterverarbeitet werden. Ein typisches Muster: RGB mit SRC_ALPHA, ONE_MINUS_SRC_ALPHA mischen, Alpha dagegen mit ONE, ONE_MINUS_SRC_ALPHA, damit sich die Deckkraft sauber aufsummiert.

Die Einstellung ist Teil des globalen WebGL-Zustands. Sie gilt für alle folgenden Zeichenaufrufe, bis du sie wieder änderst. Den aktuellen Zustand kannst du mit gl.getParameter(gl.BLEND_SRC_RGB), gl.BLEND_DST_RGB, gl.BLEND_SRC_ALPHA und gl.BLEND_DST_ALPHA auslesen.

Parameter

Name	Typ	Default	Beschreibung
$srcRGB Pflicht	GLenum	gl.ONE	Faktor für die RGB-Werte der Quelle. Beispiele: `gl.ZERO`, `gl.ONE`, `gl.SRC_COLOR`, `gl.ONE_MINUS_SRC_COLOR`, `gl.DST_COLOR`, `gl.ONE_MINUS_DST_COLOR`, `gl.SRC_ALPHA`, `gl.ONE_MINUS_SRC_ALPHA`, `gl.DST_ALPHA`, `gl.ONE_MINUS_DST_ALPHA`, `gl.CONSTANT_COLOR`, `gl.ONE_MINUS_CONSTANT_COLOR`, `gl.CONSTANT_ALPHA`, `gl.ONE_MINUS_CONSTANT_ALPHA`, `gl.SRC_ALPHA_SATURATE`.
$dstRGB Pflicht	GLenum	gl.ZERO	Faktor für die RGB-Werte des Ziels (Framebuffer). Gleiche Konstanten wie bei `srcRGB`. `gl.SRC_ALPHA_SATURATE` ist in WebGL 1 hier nicht erlaubt.
$srcAlpha Pflicht	GLenum	gl.ONE	Faktor für den Alphawert der Quelle. Gleiche Konstanten wie bei `srcRGB`.
$dstAlpha Pflicht	GLenum	gl.ZERO	Faktor für den Alphawert des Ziels. Gleiche Konstanten wie bei `dstRGB`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Fehler meldet WebGL über gl.getError().

Beispiele

Alpha-Blending für ein transparentes Canvas

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl', { premultipliedAlpha: true, alpha: true });

gl.enable(gl.BLEND);
// RGB normal mischen, Alpha korrekt aufsummieren
gl.blendFuncSeparate(
  gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, // RGB
  gl.ONE, gl.ONE_MINUS_SRC_ALPHA        // Alpha
);

gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
// ... anschließend Zeichenaufrufe (gl.drawArrays / gl.drawElements)

Aktuellen Blend-Zustand auslesen

const gl = document.createElement('canvas').getContext('webgl');

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ZERO);

console.log(gl.getParameter(gl.BLEND_SRC_RGB) === gl.SRC_ALPHA);
console.log(gl.getParameter(gl.BLEND_DST_RGB) === gl.ONE_MINUS_SRC_ALPHA);
console.log(gl.getParameter(gl.BLEND_SRC_ALPHA) === gl.ONE);
console.log(gl.getParameter(gl.BLEND_DST_ALPHA) === gl.ZERO);

true true true true

Additives Leuchten, Ziel-Alpha bleibt erhalten

const gl = document.querySelector('canvas').getContext('webgl');

const drawGlowParticles = (drawCall) => {
  gl.enable(gl.BLEND);
  // Farbe additiv (Partikel, Lichteffekte), Ziel-Alpha unverändert lassen
  gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ZERO, gl.ONE);
  drawCall();
  // Zustand für nachfolgende Objekte zurücksetzen
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
};

drawGlowParticles(() => {
  // gl.drawArrays(gl.POINTS, 0, particleCount);
});

// Wichtig · Fallstricke

Blending muss aktiviert sein: Ohne gl.enable(gl.BLEND) hat der Aufruf keine sichtbare Wirkung.
Ungültige Kombination: Werden ein Konstant-Farb-Faktor (CONSTANT_COLOR / ONE_MINUS_CONSTANT_COLOR) und ein Konstant-Alpha-Faktor (CONSTANT_ALPHA / ONE_MINUS_CONSTANT_ALPHA) gleichzeitig als Quell- und Zielfaktor verwendet, meldet WebGL INVALID_OPERATION. Ungültige Enum-Werte erzeugen INVALID_ENUM.
Premultiplied Alpha: Das Canvas nutzt standardmäßig premultipliedAlpha: true. Wenn deine Farben schon mit Alpha vormultipliziert sind, nimm eher ONE, ONE_MINUS_SRC_ALPHA für RGB, sonst werden Ränder zu dunkel oder bekommen Farbsäume.
Reihenfolge: Klassisches Alpha-Blending hängt von der Zeichenreihenfolge ab. Transparente Objekte also von hinten nach vorne sortieren.
Kompatibilität: Wird in allen modernen Browsern unterstützt und ist in WebGL2RenderingContext genauso vorhanden. In WebGL 2 sind zusätzlich MIN/MAX als Blend-Gleichung ohne Erweiterung verfügbar.

Siehe auch

WebGLRenderingContext.blendFunc() WebGLRenderingContext.blendEquationSeparate() WebGLRenderingContext.blendEquation() WebGLRenderingContext.blendColor() WebGLRenderingContext.enable() WebGLRenderingContext.getParameter() WebGLRenderingContext