WebGPU oder WebGL? Was sich für 3D im Browser wirklich ändert.
WebGPU gilt als die Zukunft von 3D im Browser — schneller, moderner, näher an der Grafikkarte. Heißt das, dass bestehende WebGL-Projekte veraltet sind? Und sollte ein neues Projekt nur noch auf WebGPU setzen? Hier steht eine nüchterne Einordnung ohne Technik-Hype.
WebGL ist seit über zehn Jahren der Standard für 3D im Browser und läuft praktisch überall. WebGPU ist der moderne Nachfolger: effizienter bei vielen Objekten, mit echten Rechen-Shadern für Simulationen und KI-Anwendungen. Für typische Produktansichten, Konfiguratoren und Scroll-Animationen ist WebGL weiterhin völlig ausreichend. Three.js unterstützt beides — mit dem WebGPU-Renderer und automatischem Rückfall auf WebGL. Ein Umstieg lohnt sich, wenn ein Projekt an Grenzen stößt, nicht aus Prinzip.
Was die beiden sind.
Beide sind Programmierschnittstellen, über die eine Website die Grafikkarte nutzt. WebGL basiert auf OpenGL ES, einer Technik aus den 2000er-Jahren, und ist seit 2011 in Browsern verfügbar. Fast jede 3D-Website der letzten Jahre läuft damit, auch die Live-Demos auf dieser Seite. WebGPU orientiert sich an modernen Schnittstellen wie Vulkan, Metal und Direct3D 12. Es wurde vom W3C entwickelt und ist in Chrome seit 2023 verfügbar, andere Browser haben seitdem nachgezogen.
Die Unterschiede.
| WebGL | WebGPU | |
|---|---|---|
| Verfügbarkeit | Praktisch überall, auch auf alten Geräten | Aktuelle Browser, nicht auf allen älteren Geräten |
| Viele Objekte gleichzeitig | Wird schnell zum Engpass | Deutlich effizienter |
| Rechnen auf der Grafikkarte | Nur über Umwege | Compute-Shader direkt |
| Shader-Sprache | GLSL | WGSL |
| Werkzeuge und Beispiele | Riesiger Bestand | Wächst schnell |
| Typische Produktansicht | Völlig ausreichend | Kein spürbarer Vorteil |
Browser-Unterstützung.
WebGPU ist in Chrome und Edge auf Desktop und Android verfügbar, Apple hat es mit Safari 26 eingeführt, und Firefox hat mit Unterstützung unter Windows begonnen. Die Lücke liegt vor allem bei älteren Geräten, älteren Betriebssystemen und manchen Grafiktreibern. Für eine Website, die jeden Besucher erreichen soll, heißt das: Ohne Rückfallebene auf WebGL geht es noch nicht. Welche Browser-Versionen aktuell was können, zeigt die Übersicht auf caniuse.com.
Three.js und WebGPU.
Three.js bringt neben dem klassischen WebGLRenderer einen WebGPURenderer mit. Er nutzt WebGPU, wo es verfügbar ist, und fällt sonst automatisch auf WebGL 2 zurück. Dazu gehört ein eigenes Shader-System namens TSL (Three Shading Language), mit dem Materialien einmal geschrieben und für beide Schnittstellen übersetzt werden. Für den Umstieg bedeutet das: Standard-Materialien und geladene GLB-Modelle funktionieren meist ohne Änderung. Eigene Shader in GLSL müssen dagegen in TSL neu geschrieben werden.
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init(); // wählt WebGPU oder fällt auf WebGL 2 zurück
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
console.log(renderer.backend.isWebGPUBackend ? 'WebGPU aktiv' : 'WebGL-Rückfall');Der Import erfolgt aus three/webgpu statt aus three. Die Animationsschleife wird mit renderer.setAnimationLoop gestartet.
Wann sich WebGPU lohnt.
- Sehr viele Objekte: Tausende Einzelteile, etwa in digitalen Zwillingen großer Anlagen (Digitaler Zwilling).
- Partikel und Simulation: Hunderttausende Partikel, Flüssigkeiten, Physik — mit Compute-Shadern direkt auf der Grafikkarte.
- KI im Browser: Modelle für Bilderkennung oder Sprache, die lokal auf dem Gerät rechnen.
- Neue Projekte mit langer Lebensdauer, die ohnehin mit dem WebGPU-Renderer und Rückfall gebaut werden können.
Wann nicht.
- Produktansicht, Konfigurator, Scroll-Story: Hier ist nicht die Grafikschnittstelle der Engpass, sondern Modellgröße, Texturen und Ladezeit (Performance, GLB verkleinern).
- Bestehende Projekte mit eigenen Shadern, die gut laufen — der Umbau kostet, ohne dass Besucher etwas merken.
- Zielgruppe mit älteren Geräten, etwa in der Industrie mit langlebigen Rechnern.
Was mit bestehenden Projekten passiert.
Nichts. WebGL bleibt in allen Browsern erhalten, und es gibt keine Ankündigung, es abzuschalten. Ein WebGL-Projekt von heute läuft auch in einigen Jahren noch. Wer ein bestehendes Projekt ohnehin überarbeitet, kann den Renderer umstellen und prüfen, ob sich etwas verbessert. Wer neu startet, entscheidet nach Anforderung: Für die allermeisten Unternehmensprojekte ist das Ergebnis mit beiden gleich gut, der Unterschied liegt in der Umsetzung, nicht in der Schnittstelle. Wie die Wahl der Bibliothek aussieht: Three.js oder Babylon.js.
Wenn du Unterstützung brauchst.
Ich baue 3D-Projekte mit der Technik, die zum Ziel passt — WebGL, WebGPU oder beides mit Rückfall. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — WebGPU oder WebGL?.
Was ist der Unterschied zwischen WebGPU und WebGL?
WebGL ist die etablierte Schnittstelle für 3D im Browser und läuft praktisch überall. WebGPU ist der moderne Nachfolger, effizienter bei vielen Objekten und mit Compute-Shadern für Simulationen und KI.
Unterstützen alle Browser WebGPU?
Chrome und Edge unterstützen WebGPU, Safari seit Version 26, Firefox hat unter Windows begonnen. Ältere Geräte, Betriebssysteme und manche Grafiktreiber unterstützen es nicht, deshalb ist eine Rückfallebene auf WebGL sinnvoll.
Unterstützt Three.js WebGPU?
Ja, mit dem WebGPURenderer. Er nutzt WebGPU, wo verfügbar, und fällt sonst automatisch auf WebGL 2 zurück. Eigene Shader werden dafür in der Three Shading Language TSL geschrieben.
Wird WebGL abgeschaltet?
Nein. Es gibt keine Ankündigung, WebGL aus Browsern zu entfernen. Bestehende WebGL-Projekte laufen weiter.
Lohnt sich WebGPU für einen Produktkonfigurator?
Meist nicht. Bei Produktansichten und Konfiguratoren sind Modellgröße, Texturen und Ladezeit der Engpass, nicht die Grafikschnittstelle.
Wann ist WebGPU sinnvoll?
Bei sehr vielen Objekten wie in digitalen Zwillingen großer Anlagen, bei aufwendigen Partikelsystemen und Simulationen sowie bei KI-Anwendungen, die im Browser rechnen.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de