WebGPU-Einstieg für Spieleentwickler

WebGPU ist der Nachfolger von WebGL. Es ist hardwarenäher, expliziter und auf moderne GPUs ausgelegt. Wenn du 2026 ein neues 3D-Projekt startest, lohnt es sich, WebGPU zu lernen.

WebGPU-Tutorial: 10 Projekte vom Setup bis zum 3D-Rendering mit Licht und Animation

1) Browser-Unterstützung prüfen

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

Stand 2026 ist WebGPU in Chrome, Edge, Firefox und Safari verfügbar.

2) Ein Device holen

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

Der Adapter steht für die physische GPU. Das Device ist deine Schnittstelle dorthin.

Beide Aufrufe können fehlschlagen. requestAdapter() liefert null, wenn das System keine nutzbare GPU hat, und requestDevice() kann rejecten. Sichere das ab, bevor du weitermachst:

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

Der Adapter ist außerdem verbraucht, sobald du ein Device daraus erzeugst. Fordere also einen neuen an, wenn du ein weiteres Device brauchst.

3) Das Canvas konfigurieren

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Shader in WGSL schreiben

WebGPU nutzt WGSL (WebGPU Shading Language), nicht GLSL.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Ein Shader-Modul erstellen

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Eine Render-Pipeline erstellen

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Ein Frame rendern

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) Buffer in WebGPU

const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Bind Groups für Uniforms

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU gegen WebGL

Aspekt	WebGL	WebGPU
API-Stil	OpenGL-artig, zustandsbehaftet	Modern, explizit
Shader	GLSL	WGSL
Compute	Eingeschränkt (Erweiterungen)	Von Haus aus dabei
Multithreading	Schwierig	Dafür entworfen
Browser-Unterstützung	Überall	Alle großen Browser (Chrome, Edge, Safari 26, Firefox)

Wann WebGPU sinnvoll ist

• Neue Projekte für moderne Browser
• Rechenlastige Aufgaben (Physik, KI, prozedurale Generierung)
• Wenn du feingranulare Kontrolle über GPU-Ressourcen brauchst

Verwandt

• WebGL-Grundlagen
• Web Workers für Spiellogik
• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026 — Entscheidungsrahmen für WebGL, WebGPU und Wasm
• COOP/COEP und SharedArrayBuffer — nötige Header für Wasm-Threading mit WebGPU-Compute

Externe Ressourcen

• WebGPU specification — W3C-Spezifikation
• WGSL specification — Spezifikation der WebGPU Shading Language
• WebGPU Fundamentals — ausführliche Tutorial-Reihe
• Your first WebGPU app — Google-Codelab zum Mitmachen