Navigator.gpu — Eigenschaft · JavaScript-Referenz

Signatur

get Navigator.gpu

Beschreibung

navigator.gpu ist der Einstieg in die WebGPU-API. Mit dieser modernen Schnittstelle kann Webcode direkt auf die Grafikkarte zugreifen, und zwar sowohl zum Rendern als auch für allgemeine Berechnungen (Compute-Shader, etwa für maschinelles Lernen, Physiksimulationen oder Bildverarbeitung). Die Eigenschaft gibt ein GPU-Objekt zurück. Über dessen Methode requestAdapter() fordert man einen GPUAdapter an und erhält daraus mit adapter.requestDevice() ein GPUDevice, über das die gesamte weitere Arbeit läuft.

Außerdem bietet das GPU-Objekt die Methode getPreferredCanvasFormat(). Sie nennt das optimale Texturformat für ein <canvas> mit dem Kontext "webgpu". Die Eigenschaft wgslLanguageFeatures listet die unterstützten Erweiterungen der Shader-Sprache WGSL auf.

Die Eigenschaft gibt es auch in Web Workern als WorkerNavigator.gpu. Rechenintensive GPU-Aufgaben lassen sich so außerhalb des Hauptthreads ausführen. Weil WebGPU noch nicht überall verfügbar ist, sollte man vor der Nutzung immer prüfen, ob die Funktion unterstützt wird ("gpu" in navigator), und bei Bedarf auf WebGL oder eine CPU-Berechnung ausweichen.

Rückgabewert

Typ

GPU

Beschreibung

Das GPU-Objekt des aktuellen Browsing-Kontexts bzw. Workers. Wird WebGPU nicht unterstützt, fehlt die Eigenschaft (undefined).

Beispiele

Unterstützung prüfen und GPUDevice anfordern

const initWebGPU = async () => {
  if (!('gpu' in navigator)) {
    console.warn('WebGPU wird nicht unterstützt – Fallback auf WebGL.');
    return null;
  }

  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance'
  });
  if (!adapter) {
    console.warn('Kein passender GPU-Adapter gefunden.');
    return null;
  }

  const device = await adapter.requestDevice();
  device.lost.then((info) => console.error('GPU-Gerät verloren:', info.message));
  console.log('WebGPU bereit');
  return device;
};

const device = await initWebGPU();

WebGPU bereit

Canvas für WebGPU konfigurieren und leeren

const canvas = document.querySelector('canvas');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format, alphaMode: 'premultiplied' });

// Canvas in Blau leeren
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
  colorAttachments: [{
    view: context.getCurrentTexture().createView(),
    clearValue: { r: 0, g: 0.3, b: 0.8, a: 1 },
    loadOp: 'clear',
    storeOp: 'store'
  }]
});
pass.end();
device.queue.submit([encoder.finish()]);
console.log('Bevorzugtes Format:', format);

Bevorzugtes Format: bgra8unorm

Adapter-Informationen und WGSL-Features auslesen

const adapter = await navigator.gpu?.requestAdapter();
if (adapter) {
  const { vendor, architecture } = adapter.info;
  console.log(`GPU: ${vendor} (${architecture})`);
  console.log('Max. Texturgröße 2D:', adapter.limits.maxTextureDimension2D);
  console.log('WGSL-Features:', [...navigator.gpu.wgslLanguageFeatures]);
}

GPU: nvidia (ampere) Max. Texturgröße 2D: 8192 WGSL-Features: ["readonly_and_readwrite_storage_textures", ...]

// Wichtig · Fallstricke

Nur in sicheren Kontexten: navigator.gpu gibt es ausschließlich über HTTPS oder localhost. Bei HTTP fehlt die Eigenschaft.
Browser-Unterstützung: In Chrome und Edge ab Version 113 standardmäßig aktiv (Linux und Android teilweise erst später). In Safari ab Version 26, in Firefox ab Version 141 unter Windows; auf anderen Plattformen ist WebGPU dort teils noch nicht freigegeben oder nur per Flag nutzbar. Deshalb immer auf Unterstützung prüfen.
requestAdapter() kann null liefern, obwohl navigator.gpu vorhanden ist, zum Beispiel wenn Treiber gesperrt sind oder keine passende Hardware da ist. Diesen Fall immer abfangen.
Geräteverlust: Ein GPUDevice kann jederzeit verloren gehen, etwa durch einen Treiber-Reset. Deshalb auf device.lost reagieren und die Ressourcen neu anlegen.
Datenschutz: Adapter-Informationen (adapter.info) lassen sich für Fingerprinting missbrauchen. Browser geben sie deshalb teilweise nur eingeschränkt oder allgemein gehalten heraus.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung.

Siehe auch

GPU Navigator Navigator.hid Navigator.ink Navigator.oscpu