WebGLRenderingContext.getSupportedExtensions() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.getSupportedExtensions()

Beschreibung

Mit getSupportedExtensions() fragst du ab, welche optionalen WebGL-Erweiterungen Browser, Treiber und Grafikhardware im aktuellen Kontext bereitstellen. Die Methode liefert ein Array von Zeichenketten wie "OES_texture_float", "WEBGL_depth_texture" oder "EXT_texture_filter_anisotropic".

Wenn eine Erweiterung in der Liste steht, ist sie nur verfügbar, aber noch nicht aktiv. Aktiviert wird sie erst durch gl.getExtension(name). Das liefert ein Erweiterungsobjekt mit zusätzlichen Konstanten und Methoden zurück. getSupportedExtensions() eignet sich daher vor allem zur Funktionserkennung, für Diagnoseseiten und dafür, beim Start einen passenden Rendering-Pfad zu wählen (z. B. Float-Texturen oder ein Fallback).

Die Methode gibt es auf WebGLRenderingContext und auf WebGL2RenderingContext. In WebGL 2 sind viele Erweiterungen aus WebGL 1 schon im Kern enthalten (z. B. OES_vertex_array_object, ANGLE_instanced_arrays) und tauchen deshalb nicht mehr in der Liste auf.

Rückgabewert

Typ

string[] | null

Beschreibung

Ein Array mit den Namen aller unterstützten Erweiterungen. Ist der Kontext verloren (gl.isContextLost() ist true), kommt null zurück.

Beispiele

Alle unterstützten Erweiterungen auflisten

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

if (!gl) {
  console.log('WebGL wird nicht unterstützt.');
} else {
  const extensions = gl.getSupportedExtensions() ?? [];
  console.log(`${extensions.length} Erweiterungen verfügbar:`);
  extensions.forEach((name) => console.log(' -', name));
}

28 Erweiterungen verfügbar: - ANGLE_instanced_arrays - EXT_blend_minmax - OES_texture_float - WEBGL_depth_texture - ... (hängt von Browser und GPU ab)

Erweiterung prüfen und gezielt aktivieren

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

const supports = (name) => gl.getSupportedExtensions()?.includes(name) ?? false;

if (supports('EXT_texture_filter_anisotropic')) {
  const ext = gl.getExtension('EXT_texture_filter_anisotropic');
  const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, max);
  console.log('Anisotrope Filterung aktiv, Stufe:', max);
} else {
  console.log('Anisotrope Filterung nicht verfügbar – Fallback auf LINEAR.');
}

Anisotrope Filterung aktiv, Stufe: 16

Rendering-Pfad anhand der Fähigkeiten wählen

const detectCapabilities = (gl) => {
  const list = new Set(gl.getSupportedExtensions() ?? []);
  const isWebGL2 = typeof WebGL2RenderingContext !== 'undefined'
    && gl instanceof WebGL2RenderingContext;
  return {
    webgl2: isWebGL2,
    floatTextures: isWebGL2 || list.has('OES_texture_float'),
    renderToFloat: list.has(isWebGL2 ? 'EXT_color_buffer_float' : 'WEBGL_color_buffer_float'),
    compressedS3TC: list.has('WEBGL_compressed_texture_s3tc'),
  };
};

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
console.log(detectCapabilities(gl));

{ webgl2: true, floatTextures: true, renderToFloat: true, compressedS3TC: true }

// Wichtig · Fallstricke

Verfügbar heißt noch nicht aktiv: Konstanten und Funktionen einer Erweiterung kannst du erst nach gl.getExtension(name) nutzen. In manchen Fällen hat die Aktivierung auch Nebenwirkungen, z. B. bei OES_texture_float.
Rückgabewert null: Bei verlorenem Kontext (Event webglcontextlost) ist das Ergebnis null. Nutze deshalb ?. oder ?? [], bevor du Array-Methoden aufrufst.
Nicht auf feste Listen verlassen: Welche Erweiterungen erscheinen, hängt von Browser, Betriebssystem, Treiber und GPU ab. Auf demselben Gerät kann die Liste zwischen WebGL 1 und WebGL 2 verschieden sein. Frag die Liste deshalb immer zur Laufzeit ab.
Präfixe: Ältere Browser haben Erweiterungen mit Anbieter-Präfix gemeldet (WEBKIT_, MOZ_). Moderne Browser geben nur die Namen ohne Präfix zurück.
Datenschutz: Die Liste der Erweiterungen wird für Browser-Fingerprinting ausgenutzt. Manche Browser (z. B. Firefox mit resistFingerprinting, Tor Browser) geben deshalb eine gekürzte Liste aus. WEBGL_debug_renderer_info kann fehlen oder eingeschränkt sein.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt, auch in Web Workers mit OffscreenCanvas.

Siehe auch

WebGLRenderingContext.getExtension() WebGLRenderingContext.getUniformLocation() WebGLRenderingContext.getParameter() WebGLRenderingContext.getTexParameter() WebGLRenderingContext.getVertexAttrib()