OES_draw_buffers_indexed.blendEquationSeparateiOES() — Methode · JavaScript-Referenz

Signatur

OES_draw_buffers_indexed.blendEquationSeparateiOES(buf, modeRGB, modeAlpha)

Beschreibung

Die Methode blendEquationSeparateiOES() gehört zur WebGL2-Erweiterung OES_draw_buffers_indexed. Sie ist die pro Zeichenpuffer wirkende Variante von WebGL2RenderingContext.blendEquationSeparate(): Statt für alle Farbanhänge eines Framebuffers dieselbe Mischgleichung zu verwenden, lässt sich für jeden einzelnen Anhang (COLOR_ATTACHMENTi bzw. Draw-Buffer-Index i) eine eigene Gleichung für RGB und eine eigene für Alpha setzen.

Das ist vor allem bei Multiple Render Targets (MRT) nützlich, etwa beim Deferred Shading oder bei ordnungsunabhängiger Transparenz (Weighted Blended OIT). Dort schreibt ein Fragment-Shader gleichzeitig in mehrere Ausgaben, die unterschiedlich kombiniert werden müssen – z. B. additiv für akkumulierte Farbe, aber mit MIN/MAX für Tiefen- oder Gewichtswerte.

Damit die Gleichung wirkt, muss Blending für den betreffenden Puffer aktiviert sein – entweder global mit gl.enable(gl.BLEND) oder gezielt mit ext.enableiOES(gl.BLEND, buf). Die passenden Faktoren setzt man mit blendFuncSeparateiOES().

Parameter

Name	Typ	Beschreibung
$buf Pflicht	number (GLuint)	Index des Zeichenpuffers, für den die Gleichungen gelten sollen. Muss kleiner als `gl.getParameter(gl.MAX_DRAW_BUFFERS)` sein.
$modeRGB Pflicht	GLenum	Mischgleichung für die RGB-Komponenten: `gl.FUNC_ADD`, `gl.FUNC_SUBTRACT`, `gl.FUNC_REVERSE_SUBTRACT`, `gl.MIN` oder `gl.MAX`.
$modeAlpha Pflicht	GLenum	Mischgleichung für die Alpha-Komponente; es gelten dieselben Werte wie für `modeRGB`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Fehler werden über gl.getError() gemeldet.

Beispiele

Erweiterung laden und Gleichung für Puffer 1 setzen

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
const ext = gl?.getExtension('OES_draw_buffers_indexed');

if (!ext) {
  console.log('OES_draw_buffers_indexed nicht verfügbar');
} else {
  ext.enableiOES(gl.BLEND, 1);
  // RGB additiv, Alpha als Maximum
  ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.MAX);
  console.log(gl.getError() === gl.NO_ERROR);
}

true

MRT-Setup für Weighted Blended OIT

const gl = document.querySelector('canvas').getContext('webgl2');
const ext = gl.getExtension('OES_draw_buffers_indexed');

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// ... Texturen an COLOR_ATTACHMENT0 und COLOR_ATTACHMENT1 anhängen ...
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);

gl.enable(gl.BLEND);
// Puffer 0: Akkumulation (Farbe * Gewicht) – alles additiv
ext.blendEquationSeparateiOES(0, gl.FUNC_ADD, gl.FUNC_ADD);
ext.blendFuncSeparateiOES(0, gl.ONE, gl.ONE, gl.ONE, gl.ONE);
// Puffer 1: Revealage – multiplikativ über ZERO / ONE_MINUS_SRC_COLOR
ext.blendEquationSeparateiOES(1, gl.FUNC_ADD, gl.FUNC_ADD);
ext.blendFuncSeparateiOES(1, gl.ZERO, gl.ONE_MINUS_SRC_COLOR, gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);

Gesetzte Gleichungen pro Puffer abfragen

const gl = document.createElement('canvas').getContext('webgl2');
const ext = gl.getExtension('OES_draw_buffers_indexed');

ext.blendEquationSeparateiOES(2, gl.FUNC_SUBTRACT, gl.MIN);

const rgb = gl.getIndexedParameter(gl.BLEND_EQUATION_RGB, 2);
const alpha = gl.getIndexedParameter(gl.BLEND_EQUATION_ALPHA, 2);
console.log(rgb === gl.FUNC_SUBTRACT, alpha === gl.MIN);

true true

// Wichtig · Fallstricke

Nur WebGL2: Die Erweiterung gibt es nicht für WebGL1-Kontexte. Prüfe immer, ob getExtension() null zurückgibt, bevor du sie benutzt.
Ist buf größer oder gleich MAX_DRAW_BUFFERS, wird INVALID_VALUE erzeugt; ungültige Gleichungswerte führen zu INVALID_ENUM.
Ein späterer Aufruf von gl.blendEquation() oder gl.blendEquationSeparate() überschreibt die Einstellungen für alle Puffer, auch die per Index gesetzten.
Bei MIN und MAX werden die Blend-Faktoren ignoriert.
Browser-Unterstützung: Chromium-basierte Browser und Firefox unterstützen die Erweiterung auf den meisten Desktop-GPUs; auf Mobilgeräten und in Safari ist sie nicht garantiert – plane einen Fallback mit mehreren Render-Durchgängen ein.

Siehe auch

OES_draw_buffers_indexed OES_draw_buffers_indexed.blendFuncSeparateiOES() OES_draw_buffers_indexed.blendEquationiOES() OES_draw_buffers_indexed.blendFunciOES() OES_draw_buffers_indexed.disableiOES()