EXT_blend_minmax extension — Schnittstelle · JavaScript-Referenz

Signatur

interface EXT_blend_minmax

Beschreibung

EXT_blend_minmax ist eine WebGL-Erweiterung. Sie ergänzt die Blend-Gleichungen, die man mit gl.blendEquation() und gl.blendEquationSeparate() setzt, um zwei Modi: MIN_EXT berechnet pro Farbkanal min(Quelle, Ziel), MAX_EXT berechnet max(Quelle, Ziel). Die Blend-Faktoren aus gl.blendFunc() werden bei diesen Gleichungen ignoriert.

Man braucht das für Effekte, bei denen der hellste oder dunkelste Wert erhalten bleiben soll. Beispiele sind Maximum Intensity Projection (MIP) beim Volume Rendering, Leuchtspuren und Partikel ohne Übersättigung, das Aufbauen von Tiefen- oder Distanzkarten (z. B. JFA oder SDF), Schattenakkumulation und das Ermitteln einer Bounding-Box auf der GPU.

Die Erweiterung holt man mit gl.getExtension("EXT_blend_minmax"). Das Objekt hat keine Methoden, sondern nur die zwei Konstanten MIN_EXT (0x8007) und MAX_EXT (0x8008). In WebGL 2 gibt es die Funktion ohne Erweiterung, dort heißen die Konstanten gl.MIN und gl.MAX.

Parameter

Name	Typ	Default	Beschreibung
$MIN_EXT	GLenum (0x8007)		Konstante für `blendEquation()`: Ergebnis = komponentenweises Minimum aus Quell- und Zielfarbe.
$MAX_EXT	GLenum (0x8008)		Konstante für `blendEquation()`: Ergebnis = komponentenweises Maximum aus Quell- und Zielfarbe.

Rückgabewert

Typ

EXT_blend_minmax | null

Beschreibung

gl.getExtension("EXT_blend_minmax") gibt das Erweiterungsobjekt zurück. Unterstützt der Kontext die Erweiterung nicht, ist der Rückgabewert null.

Beispiele

Erweiterung abfragen und MAX-Blending aktivieren

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
const ext = gl.getExtension("EXT_blend_minmax");

if (ext) {
  gl.enable(gl.BLEND);
  gl.blendEquation(ext.MAX_EXT);
  console.log(gl.getParameter(gl.BLEND_EQUATION_RGB) === ext.MAX_EXT);
} else {
  console.warn("EXT_blend_minmax nicht verfügbar");
}

true

Kompatibel für WebGL 1 und WebGL 2

const getMinMax = (gl) => {
  if (typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext) {
    return { MIN: gl.MIN, MAX: gl.MAX };
  }
  const ext = gl.getExtension("EXT_blend_minmax");
  return ext ? { MIN: ext.MIN_EXT, MAX: ext.MAX_EXT } : null;
};

const gl = document.createElement("canvas").getContext("webgl2") ||
           document.createElement("canvas").getContext("webgl");
const minmax = getMinMax(gl);
console.log(minmax);

{ MIN: 32775, MAX: 32776 }

Getrennte Gleichungen: RGB additiv, Alpha als Maximum

const gl = document.querySelector("canvas").getContext("webgl");
const ext = gl.getExtension("EXT_blend_minmax");

if (ext) {
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.ONE, gl.ONE);
  // Farben addieren, Alpha behält den höchsten Wert
  gl.blendEquationSeparate(gl.FUNC_ADD, ext.MAX_EXT);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  // ... hier Partikel zeichnen mit gl.drawArrays(...)
}

Dunkelsten Wert behalten (MIN), z. B. für Schattenakkumulation

const gl = document.querySelector("canvas").getContext("webgl");
const ext = gl.getExtension("EXT_blend_minmax");

if (ext) {
  gl.enable(gl.BLEND);
  gl.blendEquation(ext.MIN_EXT);
  // Mit Weiß starten, damit MIN sinnvolle Ergebnisse liefert
  gl.clearColor(1, 1, 1, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

// Wichtig · Fallstricke

Blend-Faktoren wirken nicht: Bei MIN_EXT und MAX_EXT werden die mit blendFunc() gesetzten Faktoren ignoriert. Wer z. B. mit Alpha skalieren will, muss das schon im Fragment-Shader tun.
Startwert beachten: Für MIN den Framebuffer mit hohen Werten füllen (etwa Weiß), für MAX mit niedrigen Werten (etwa Schwarz/0). Sonst bleibt der Clear-Wert stehen.
Vorher gl.enable(gl.BLEND) aufrufen, sonst hat die Gleichung keine Wirkung.
WebGL 2: Dort ist die Erweiterung nicht verfügbar, denn die Funktion ist Kernbestandteil. Verwende stattdessen gl.MIN und gl.MAX, die Zahlenwerte sind identisch.
Kompatibilität: Die Erweiterung wird in praktisch allen WebGL-1-Implementierungen unterstützt (Chrome, Firefox, Safari, Edge, auch mobil). Trotzdem immer auf null prüfen.
Bei Float-Render-Targets (OES_texture_float + WEBGL_color_buffer_float) liefert MIN/MAX genaue Werte, ohne dass auf [0,1] begrenzt wird. Das ist nützlich für Distanz- oder Tiefenkarten.

Siehe auch

WebGLRenderingContext.blendEquation() WebGLRenderingContext.blendEquationSeparate() WebGLRenderingContext.blendFunc() WebGLRenderingContext.getExtension() WebGLRenderingContext WebGL2RenderingContext