GPU — Schnittstelle · JavaScript-Referenz

Signatur

interface GPU

Beschreibung

Das Interface GPU ist die Wurzel der WebGPU API. Eine Instanz erzeugt man nicht selbst. Man erreicht sie über navigator.gpu im Hauptthread bzw. über WorkerNavigator.gpu in Web Workern. Ist die Eigenschaft undefined, unterstützt der Browser WebGPU nicht oder die Seite läuft in keinem sicheren Kontext.

Die wichtigste Methode ist requestAdapter(). Sie liefert einen GPUAdapter, also eine physische oder softwarebasierte Grafikeinheit. Über adapter.requestDevice() erhält man daraus ein GPUDevice. Mit dem Device erzeugt man Puffer, Texturen, Shader und Pipelines. Über adapter.features und adapter.limits prüft man vorher, welche Funktionen und Grenzwerte die Hardware bietet.

Weitere Mitglieder:

getPreferredCanvasFormat() gibt das optimale Texturformat für ein <canvas> mit WebGPU-Kontext zurück, meist "bgra8unorm" oder "rgba8unorm".
wgslLanguageFeatures ist ein WGSLLanguageFeatures-Objekt (Set-ähnlich) mit den unterstützten WGSL-Spracherweiterungen.

Einsatzgebiete sind hardwarebeschleunigtes 3D-Rendering, GPU-Berechnungen (Compute Shader) wie Machine-Learning-Inferenz und Bildverarbeitung sowie Simulationen. Gegenüber WebGL bietet WebGPU eine modernere, explizite API, die sich an Vulkan, Metal und Direct3D 12 anlehnt.

Parameter

Name	Typ	Default	Beschreibung
$options	GPURequestAdapterOptions	{}	Optionen für `requestAdapter(options)`: `powerPreference`: `"low-power"` oder `"high-performance"`. Ist nur ein Hinweis an den Browser. `forceFallbackAdapter`: `boolean`, Standard `false`. Bei `true` wird ein Software-Adapter angefordert. `featureLevel`: `"core"` (Standard) oder `"compatibility"`, sofern unterstützt.

Beispiele

Unterstützung prüfen und Device anfordern

const initWebGPU = async () => {
  if (!navigator.gpu) {
    throw new Error('WebGPU wird von diesem Browser nicht unterstützt.');
  }

  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance'
  });
  if (!adapter) {
    throw new Error('Kein passender GPU-Adapter gefunden.');
  }

  const device = await adapter.requestDevice();
  device.lost.then((info) => {
    console.warn(`GPU-Device verloren: ${info.message}`);
  });

  return { adapter, device };
};

initWebGPU()
  .then(({ device }) => console.log('Device bereit:', device))
  .catch((err) => console.error(err.message));

Device bereit: GPUDevice { … }

Canvas mit bevorzugtem Format 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 mit einer Farbe füllen
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
  colorAttachments: [{
    view: context.getCurrentTexture().createView(),
    clearValue: { r: 0.1, g: 0.3, b: 0.6, a: 1 },
    loadOp: 'clear',
    storeOp: 'store'
  }]
});
pass.end();
device.queue.submit([encoder.finish()]);

console.log('Canvas-Format:', format);

Canvas-Format: bgra8unorm

Features, Limits und WGSL-Erweiterungen abfragen

const adapter = await navigator.gpu.requestAdapter();

const wantsF16 = adapter.features.has('shader-f16');
const device = await adapter.requestDevice({
  requiredFeatures: wantsF16 ? ['shader-f16'] : [],
  requiredLimits: {
    maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize
  }
});

console.log('shader-f16:', wantsF16);
console.log('WGSL-Features:', [...navigator.gpu.wgslLanguageFeatures]);

shader-f16: true WGSL-Features: ['readonly_and_readwrite_storage_textures', 'packed_4x8_integer_dot_product', …]

// Wichtig · Fallstricke

Nur in sicheren Kontexten: navigator.gpu gibt es nur unter HTTPS oder localhost. Eine Feature-Erkennung mit if (!navigator.gpu) ist Pflicht.
null statt Fehler: requestAdapter() wirft keinen Fehler, wenn keine GPU verfügbar ist. Das Promise wird dann mit null erfüllt, z. B. bei gesperrten Treibern, per Blockliste ausgeschlossener Hardware oder abgeschalteter Hardwarebeschleunigung. Den Rückgabewert daher immer prüfen.
Adapter nur einmal nutzbar: Nach einem erfolgreichen requestDevice() ist der Adapter verbraucht. Ein weiterer Aufruf liefert ein bereits verlorenes Device. In dem Fall erneut requestAdapter() aufrufen.
Device-Verlust: Auf device.lost reagieren, etwa bei einem Treiber-Reset, und die Initialisierung dann wiederholen.
Nur Hinweise: powerPreference ist lediglich ein Wunsch. Der Browser darf ihn ignorieren, etwa im Akkubetrieb.
Browser-Unterstützung: Chrome und Edge ab 113 (Windows, macOS, ChromeOS; Android ab 121). Safari ab 26. Firefox ab 141 unter Windows, andere Plattformen folgen schrittweise. Unter Linux in Chrome teils nur per Flag. Für breite Kompatibilität WebGL als Rückfalllösung vorsehen.
Datenschutz: adapter.info gibt bewusst nur eingeschränkte Hardware-Informationen preis, um Fingerprinting zu erschweren.

Siehe auch

Navigator.gpu CSS HID Ink URL