Was ist WebGPU? KI im Browser

01Was ist WebGPU?

Webseiten haben viele Jahre überwiegend den Prozessor (CPU) genutzt. Für den Zugriff auf die Grafikkarte gab es WebGL, das jedoch vor allem zum Zeichnen von Grafiken entwickelt wurde. Die kurze Antwort auf die Frage »Was ist WebGPU?« lautet: der neue Webstandard, der dem Browser die volle Leistung der Grafikkarte öffnet, für Grafik ebenso wie für Berechnungen.

WebGPU ist ein Standard, den Browserhersteller gemeinsam unter dem Dach des W3C entwickeln. Im Hintergrund nutzt er die modernen Grafik-Schnittstellen des Betriebssystems: Direct3D 12 unter Windows, Metal unter macOS und iOS, Vulkan unter Linux und Android. Entwickler schreiben eine einzige JavaScript-Schnittstelle, der Browser übersetzt sie in die Sprache des jeweiligen Geräts.

Die wichtigste Neuerung ist die Unterstützung von Compute Shadern. Damit lässt sich die Grafikkarte nicht nur zum Einfärben von Pixeln nutzen, sondern auch, um Tausende kleine Berechnungen parallel auszuführen. Genau auf solchen parallelen Matrixberechnungen beruht der Betrieb von KI-Modellen.

Die kleinen Programme, die auf der Grafikkarte laufen, heißen Shader. WebGPU verwendet dafür eine eigene Sprache namens WGSL (WebGPU Shading Language). Die meisten Webentwickler arbeiten nicht direkt damit; Grafik-Engines und KI-Bibliotheken erzeugen den WGSL-Code im Hintergrund. Um Performance-Probleme zu verstehen, hilft es dennoch, die Grundidee zu kennen: Der Prozessor beschreibt die Aufgabe, die Grafikkarte wendet dieselbe Operation gleichzeitig auf Tausende von Daten an.

02WebGPU und WebGL im Vergleich

WebGL ist die Webversion von OpenGL ES, einem älteren Desktop-Grafikstandard, und wird weiterhin breit eingesetzt. WebGPU wurde dagegen von Grund auf für die Funktionsweise heutiger Grafikkarten entworfen. Der Unterschied zwischen WebGPU und WebGL lässt sich so zusammenfassen:

03Wie funktioniert KI im Browser?

Um ein KI-Modell im Browser auszuführen, wird die Modelldatei (die Gewichte) auf das Gerät des Nutzers heruntergeladen und zwischengespeichert. Anschließend lassen JavaScript-Bibliotheken die Berechnungen des Modells über WebGPU auf der Grafikkarte ausführen. Das Ergebnis erscheint direkt auf der Seite, ohne den Umweg über einen Server.

Dafür müssen Entwickler nicht bei null anfangen. Open-Source-Bibliotheken wie ONNX Runtime Web, Transformers.js, TensorFlow.js und WebLLM bieten WebGPU-Unterstützung. Sie reduzieren das Ausführen fertiger Modelle im Browser auf wenige Zeilen Code.

Neben WebGPU wird häufig auch WebAssembly genannt. WebAssembly führt Code auf dem Prozessor mit nahezu nativer Geschwindigkeit aus, WebGPU nutzt die Grafikkarte. Viele Bibliotheken setzen beides ein und weichen auf Geräten ohne WebGPU auf WebAssembly aus. Details finden Sie in unserem Beitrag Was ist WebAssembly?.

04Vorteile von KI auf dem Gerät

On-Device-KI oder KI auf dem Gerät bedeutet, dass das Modell nicht auf einem Server in der Cloud, sondern auf dem eigenen Gerät des Nutzers läuft. Dieser Ansatz bietet Unternehmen und Nutzern wichtige Vorteile.

• Datenschutz: Foto, Ton oder Text verlassen das Gerät nicht; eine große Erleichterung für Anwendungen mit sensiblen Daten.
• Geringe Latenz: Ohne Hin- und Rückweg im Netzwerk kommt die Antwort sofort; entscheidend für Live-Kameraeffekte und Audioverarbeitung.
• Serverkosten: Da die Berechnung auf dem Gerät des Nutzers stattfindet, fallen nicht für jede Anfrage Serverkosten an.
• Offline-Betrieb: Nach dem einmaligen Download lässt sich das Modell auch ohne Internetverbindung nutzen.
• Skalierung: Mit wachsender Nutzerzahl steigt die Serverlast nicht, weil jeder Nutzer sein eigenes Gerät verwendet.

05Einsatzgebiete

KI im Browser ersetzt große Chatmodelle noch nicht vollständig; mit kleinen, fokussierten Modellen lässt sich aber schon heute vieles erledigen.

Bild und Kamera

Hintergrundentfernung, Fotoverbesserung, Objekterkennung und Live-Kameraeffekte lassen sich direkt auf dem Gerät umsetzen. Erlebnisse in einem Onlineshop, etwa ein Produkt im eigenen Zimmer ansehen oder eine Brille virtuell anprobieren, nutzen diese Technologie.

Text und Sprache

Kleine Sprachmodelle können im Browser Sprache in Text umwandeln, übersetzen, zusammenfassen und klassifizieren. Schreibvorschläge beim Ausfüllen von Formularen oder eine offline funktionierende Notiz-App sind Beispiele dafür.

3D und Visualisierung

Produktkonfiguratoren, Architektur- und Immobilienpräsentationen, Visualisierungen großer Datenmengen und Browserspiele profitieren von der Grafikseite von WebGPU. Verbinden sich solche Erlebnisse mit einem durchdachten UI/UX-Design, ist das Ergebnis beeindruckend.

06Browser-Unterstützung und Prüfung

WebGPU ist in Chromium-basierten Browsern (Chrome, Edge) auf dem Desktop weitgehend nutzbar; auch Safari und Firefox ziehen schrittweise nach. Auf Mobilgeräten und älterer Hardware kann die Lage abweichen. Die aktuelle Support-Tabelle prüfen Sie in der MDN-Dokumentation zu WebGPU.

Deshalb sollte jedes Projekt mit WebGPU eine Funktionsprüfung enthalten und für nicht unterstützte Geräte einen Fallback bereithalten. Der folgende Code prüft, ob der Browser WebGPU unterstützt.

• Den Code können Sie schnell testen, indem Sie ihn in der Entwicklerkonsole des Browsers ausführen.
• WebGPU ist nur in einem sicheren Kontext (HTTPS oder localhost) verfügbar.
• Wechseln Sie auf Geräten ohne Unterstützung zu einer Alternative auf Basis von WebGL oder WebAssembly.

async function webgpuHazirMi() {
  if (!navigator.gpu) {
    console.log('Bu tarayici WebGPU desteklemiyor.');
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.log('Uygun GPU bulunamadi.');
    return null;
  }
  const device = await adapter.requestDevice();
  console.log('WebGPU hazir.');
  return device;
}

webgpuHazirMi();

07Grenzen und Hinweise

Die größte Grenze ist die Modellgröße. Große Sprachmodelle belegen Gigabyte an Speicher; sie jedem Besucher herunterladen zu lassen, ist weder zeitlich noch bei Datenvolumen realistisch. Modelle für den Browser müssen klein, komprimiert (quantisiert) und auf eine bestimmte Aufgabe ausgerichtet sein.

Die zweite Grenze ist die Gerätevielfalt. Ein Modell, das auf einer starken Desktop-Grafikkarte flüssig läuft, kann auf einem Einsteiger-Smartphone langsam sein oder den Akku stärker belasten. Prüfen Sie anhand Ihrer Analysedaten, welche Geräte Ihre Zielgruppe nutzt.

Die dritte ist die Seitenperformance. Schwere Modelldateien und Berechnungen dürfen den ersten Seitenaufbau nicht bremsen. Das Modell erst zu laden, wenn Nutzer die entsprechende Funktion brauchen, schützt die Core-Web-Vitals-Werte (LCP ≤ 2,5 s, INP ≤ 200 ms). Diese Balance zu finden, ist Gegenstand einer Speed- und Performance-Optimierung.

08Wann lohnt sich WebGPU in Webprojekten?

WebGPU ist nicht für jede Website nötig. Für eine Unternehmenswebsite oder einen Standard-Onlineshop zählt eine schnelle, schlichte und barrierefreie Struktur viel mehr. WebGPU ist sinnvoll für KI-Verarbeitung mit Datenschutzanforderungen, Bild- und Audioverarbeitung in Echtzeit, aufwendige 3D-Erlebnisse und Berechnungen, bei denen Serverkosten gesenkt werden sollen.

Stellen Sie sich bei der Entscheidung diese Frage: Was verliere ich, wenn diese Funktion auf dem Server läuft? Lautet die Antwort Datenschutz, Latenz oder Kosten, ist WebGPU ein starker Kandidat. Den Ansatz, KI ins Zentrum des Produkts zu stellen, behandeln wir im Beitrag KI-native Anwendungen, den Einsatz von KI-Tools im Entwicklungsprozess im Beitrag Programmieren mit KI.

Aurora Yazılım wählt bei Webdesign-Projekten und branchenspezifischen Softwarelösungen die Technologie nach dem Bedarf aus und setzt einen neuen Standard nur dort ein, wo er echten Mehrwert schafft. Wenn Sie Ihr Projekt besprechen möchten, erreichen Sie uns über unsere Kontaktseite.