WebGPU ist der W3C-Standard für GPU-Programmierung im Browser und ersetzt WebGL. Der Entwurf wurde 2023 als W3C-Kandidatenempfehlung veröffentlicht; Chrome, Edge, Firefox und Safari liefern die API inzwischen aus. WebGPU ist bewusst modern gestaltet: Sie bildet nativ auf Vulkan, Metal und Direct3D 12 ab und bringt erstmals Compute-Shader in den Browser — etwa für Machine-Learning-Inferenz und Physik-Simulationen.

Adapter und Device

Der Einstieg erfolgt asynchron über das navigator.gpu-Objekt:

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

Der Adapter repräsentiert die physikalische GPU, das Device die logische Schnittstelle, über die alle Ressourcen erzeugt werden. Ist kein Adapter verfügbar (etwa ohne GPU), liefert requestAdapter() null — dann muss der Code einen Fallback bieten.

Shader in WGSL

Statt GLSL verwendet WebGPU die WebGPU Shading Language (WGSL). Shader werden als Modul kompiliert:

const module = device.createShaderModule({
  code: `@vertex fn vs_main() -> @builtin(position) vec4<f32> { ... }`
});

Pipeline und Render-Pass

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: { module, entryPoint: 'vs_main' },
  fragment: { module, entryPoint: 'fs_main', targets: [{ format: 'bgra8unorm' }] }
});
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({ colorAttachments: [...] });
pass.setPipeline(pipeline);
pass.draw(3, 1, 0, 0);
pass.end();
device.queue.submit([encoder.finish()]);

Ressourcen wie Puffer und Texturen entstehen über createBuffer() beziehungsweise createTexture(); Bind-Groups (createBindGroup()) koppeln Shader-Ressourcen an die Pipeline. Compute-Pipelines nutzen createComputePipeline() und dispatchWorkgroups().

Implementierungen

  • Dawn: Googles C++-Implementierung, Grundlage von Chromium und vielen nativen Projekten.
  • wgpu: Rust-Implementierung, unter anderem in Firefox und in Rust-Spiele-Engines wie Bevy.
  • Über Dawn und wgpu läuft WebGPU-Code auch nativ außerhalb des Browsers — gleiche Shader, gleiche API.

Verwandte Themen: JavaScript-Befehle, Metal-Befehle, Vulkan-Befehle.