WEBGL_debug_renderer_info extension — Schnittstelle · JavaScript-Referenz

Signatur

interface WEBGL_debug_renderer_info

Beschreibung

Die Erweiterung WEBGL_debug_renderer_info ist Teil der WebGL-API. Sie stellt zwei Konstanten bereit, mit denen man über gl.getParameter() den unmaskierten Hersteller und Renderer der Grafikhardware bzw. des Treibers abfragen kann. Die normalen Parameter gl.VENDOR und gl.RENDERER geben aus Datenschutzgründen oft nur allgemeine Werte wie "WebKit" oder "WebKit WebGL" zurück.

Man erhält die Erweiterung über gl.getExtension("WEBGL_debug_renderer_info"). Ist sie nicht verfügbar, liefert der Aufruf null. Das zurückgegebene Objekt hat keine Methoden, sondern nur zwei Konstanten:

UNMASKED_VENDOR_WEBGL (0x9245) – Hersteller des Grafiktreibers, z. B. "NVIDIA Corporation" oder "Google Inc. (Intel)".
UNMASKED_RENDERER_WEBGL (0x9246) – Renderer-Bezeichnung, z. B. "ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0)".

Typische Einsatzzwecke sind Fehlerberichte und Telemetrie (welche GPU verursacht Rendering-Fehler?), das Umgehen bekannter Treiberfehler (Workarounds für bestimmte GPUs) sowie das Wählen einer passenden Qualitätsstufe für Grafikeinstellungen. Die gelieferten Zeichenketten sind nicht standardisiert und sollten nur tolerant (z. B. per Teilstring-Suche) ausgewertet werden.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Beim Abruf über `gl.getExtension(name)`: exakt `"WEBGL_debug_renderer_info"`.

Rückgabewert

Typ

WEBGL_debug_renderer_info | null

Beschreibung

gl.getExtension() liefert ein Objekt mit den Konstanten UNMASKED_VENDOR_WEBGL und UNMASKED_RENDERER_WEBGL oder null, wenn die Erweiterung nicht unterstützt oder gesperrt ist. gl.getParameter() mit einer der Konstanten gibt einen string zurück.

Beispiele

GPU-Hersteller und Renderer auslesen

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

if (!gl) {
  console.log('WebGL wird nicht unterstützt');
} else {
  const ext = gl.getExtension('WEBGL_debug_renderer_info');
  if (ext) {
    const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
    const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
    console.log('Hersteller:', vendor);
    console.log('Renderer:', renderer);
  } else {
    console.log('Erweiterung nicht verfügbar');
  }
}

Hersteller: Google Inc. (NVIDIA) Renderer: ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 Direct3D11 vs_5_0 ps_5_0, D3D11)

Wiederverwendbare Funktion mit Rückfall auf maskierte Werte

const getGpuInfo = () => {
  const gl = document.createElement('canvas').getContext('webgl');
  if (!gl) return null;

  const ext = gl.getExtension('WEBGL_debug_renderer_info');
  const info = {
    vendor: gl.getParameter(ext ? ext.UNMASKED_VENDOR_WEBGL : gl.VENDOR),
    renderer: gl.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : gl.RENDERER),
    unmasked: Boolean(ext)
  };

  // Kontext freigeben, um GPU-Ressourcen zu sparen
  gl.getExtension('WEBGL_lose_context')?.loseContext();
  return info;
};

console.log(getGpuInfo());

{ vendor: 'Apple Inc.', renderer: 'Apple GPU', unmasked: true }

Qualitätsstufe anhand der GPU wählen

const chooseQuality = (gl) => {
  const ext = gl.getExtension('WEBGL_debug_renderer_info');
  if (!ext) return 'mittel';

  const renderer = String(gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)).toLowerCase();

  if (/swiftshader|llvmpipe|software/.test(renderer)) return 'niedrig'; // Software-Rendering
  if (/rtx|radeon rx|apple m\d/.test(renderer)) return 'hoch';
  return 'mittel';
};

const gl = document.createElement('canvas').getContext('webgl');
if (gl) console.log('Qualität:', chooseQuality(gl));

Qualität: hoch

// Wichtig · Fallstricke

Datenschutz und Fingerprinting: Die unmaskierten GPU-Angaben sind ein beliebtes Merkmal für Browser-Fingerprinting. Firefox (ab Version 92) gibt die Werte deshalb vereinfacht bzw. gerundet aus, Safari liefert oft nur allgemeine Bezeichnungen wie "Apple GPU". Datenschutz-Browser (z. B. Tor Browser, Brave) sperren die Erweiterung oder verfälschen die Werte. Verlassen Sie sich also nie auf exakte Zeichenketten.

Deprecation-Hinweis in Firefox: Firefox gibt die unmaskierten Werte inzwischen auch direkt über gl.RENDERER/gl.VENDOR aus und zeigt beim Abruf der Erweiterung eine Warnung in der Konsole an. Prüfen Sie daher auch die Standardparameter.

Immer auf null prüfen, bevor auf die Konstanten zugegriffen wird – sonst gibt es einen TypeError.
Die Zeichenketten sind nicht standardisiert; unter Windows enthalten sie oft ein ANGLE (…)-Präfix.
Das Erzeugen eines WebGL-Kontexts nur zum Auslesen kostet Ressourcen; Browser begrenzen die Zahl gleichzeitiger Kontexte. Kontext nach Gebrauch mit WEBGL_lose_context freigeben.
Für GPU-abhängige Workarounds besser Fähigkeiten (Feature Detection, z. B. gl.getParameter(gl.MAX_TEXTURE_SIZE)) prüfen als Gerätenamen.

Siehe auch

WEBGL_debug_shaders extension WEBGL_depth_texture extension WEBGL_draw_buffers extension WEBGL_color_buffer_float extension WEBGL_lose_context extension