WebGLRenderingContext.getExtension() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.getExtension(name)

Beschreibung

Mit getExtension() schaltest du eine optionale WebGL-Erweiterung für einen bestimmten Rendering-Kontext frei. Viele Funktionen, die der WebGL-1.0-Kern nicht enthält, stehen nur als Erweiterung bereit, z. B. anisotrope Texturfilterung (EXT_texture_filter_anisotropic), Instanced Rendering (ANGLE_instanced_arrays), Vertex Array Objects (OES_vertex_array_object), Gleitkomma-Texturen (OES_texture_float) oder komprimierte Texturformate (WEBGL_compressed_texture_s3tc).

Die Methode gibt ein Erweiterungsobjekt zurück. Es enthält die zusätzlichen Konstanten und Funktionen der Erweiterung, z. B. ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT oder ext.drawArraysInstancedANGLE(). Manche Erweiterungen, etwa OES_texture_float, haben keine eigenen Mitglieder. Bei ihnen reicht schon der Aufruf, um das Verhalten des Kontexts zu ändern: Danach nimmt texImage2D() auch gl.FLOAT an.

Wird die Erweiterung nicht unterstützt, liefert die Methode null. Prüfe den Rückgabewert deshalb immer und sieh eine Ausweichlösung vor. Welche Erweiterungen verfügbar sind, zeigt getSupportedExtensions(). Die Methode gibt es genauso auf WebGL2RenderingContext. Dort gehören allerdings viele WebGL-1-Erweiterungen (Instancing, VAOs, Tiefentexturen) bereits zum Kern und müssen nicht mehr aktiviert werden.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name der Erweiterung, z. B. `"EXT_texture_filter_anisotropic"`. Groß- und Kleinschreibung spielt keine Rolle. Unbekannte Namen führen zum Rückgabewert `null`.

Rückgabewert

Typ

object | null

Beschreibung

Das Erweiterungsobjekt mit den Konstanten und Methoden der Erweiterung, oder null, wenn die Erweiterung nicht verfügbar ist. Bei mehreren Aufrufen auf demselben Kontext kommt dasselbe Objekt zurück.

Beispiele

Anisotrope Filterung mit Fallback aktivieren

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

const ext = gl.getExtension('EXT_texture_filter_anisotropic')
  ?? gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
  ?? gl.getExtension('MOZ_EXT_texture_filter_anisotropic');

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

if (ext) {
  const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, max);
  console.log(`Anisotropie aktiv: ${max}x`);
} else {
  console.log('Anisotrope Filterung nicht verfügbar');
}

Anisotropie aktiv: 16x

Instanced Rendering in WebGL 1 über ANGLE_instanced_arrays

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

if (!instancing) {
  throw new Error('Instancing wird nicht unterstützt');
}

// Attribut 1 soll pro Instanz statt pro Vertex weitergeschaltet werden
instancing.vertexAttribDivisorANGLE(1, 1);

// 6 Vertices, 1000 Instanzen (Shader und Puffer vorausgesetzt)
// instancing.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, 1000);
console.log(typeof instancing.drawArraysInstancedANGLE);

function

Gleitkomma-Texturen freischalten (Erweiterung ohne Mitglieder)

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

// Schon der Aufruf aktiviert das Verhalten – das Objekt selbst ist leer
const floatExt = gl.getExtension('OES_texture_float');

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
if (floatExt) {
  const data = new Float32Array(4 * 4 * 4);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 4, 4, 0, gl.RGBA, gl.FLOAT, data);
  console.log(gl.getError() === gl.NO_ERROR ? 'Float-Textur erstellt' : 'Fehler');
}

Float-Textur erstellt

Verfügbare Erweiterungen auflisten und gezielt aktivieren

const gl = document.createElement('canvas').getContext('webgl');
const supported = gl.getSupportedExtensions() ?? [];

const wanted = ['OES_vertex_array_object', 'WEBGL_depth_texture', 'OES_element_index_uint'];
const extensions = Object.fromEntries(
  wanted.map((name) => [name, supported.includes(name) ? gl.getExtension(name) : null])
);

for (const [name, ext] of Object.entries(extensions)) {
  console.log(`${name}: ${ext ? 'aktiv' : 'fehlt'}`);
}

OES_vertex_array_object: aktiv WEBGL_depth_texture: aktiv OES_element_index_uint: aktiv

// Wichtig · Fallstricke

Immer auf null prüfen: Welche Erweiterungen es gibt, hängt von Browser, GPU, Treiber und Betriebssystem ab. Auf Mobilgeräten fehlen viele davon.
Kontextverlust: Nach webglcontextlost und webglcontextrestored werden alle Erweiterungsobjekte ungültig. Rufe getExtension() dann erneut auf.
Nur pro Kontext gültig: Eine Erweiterung gilt nur für den Kontext, auf dem sie aktiviert wurde. Andere Canvas-Kontexte brauchen einen eigenen Aufruf.
Präfixe: Ältere Browser boten einige Erweiterungen nur mit Herstellerpräfix an (WEBKIT_, MOZ_). Moderne Browser brauchen das nicht mehr.
WebGL 2: Viele WebGL-1-Erweiterungen gehören in WebGL 2 zum Kern, etwa ANGLE_instanced_arrays, OES_vertex_array_object und WEBGL_draw_buffers. Unter WebGL 2 liefert ihr Aufruf null.
Datenschutz: WEBGL_debug_renderer_info verrät Informationen über die GPU und wird für Fingerprinting genutzt. Firefox und Safari geben dafür teils nur allgemeine Werte zurück.
Manche Erweiterungen, z. B. OES_texture_float_linear oder WEBGL_color_buffer_float, muss man zusätzlich zu ihrer Basiserweiterung aktivieren, damit Filterung oder Rendern in Float-Texturen funktioniert.

Siehe auch

WebGLRenderingContext.getSupportedExtensions() WebGLRenderingContext WebGL2RenderingContext WebGLRenderingContext.getParameter() HTMLCanvasElement.getContext()