WebGL Entwickler für 3D im Browser.
WebGL ist die Schnittstelle, über die eine Website die Grafikkarte nutzt. Damit laufen 3D-Szenen direkt im Browser — ohne App, ohne Plugin. Ich entwickle solche Anwendungen mit Three.js, optimiere sie für schwache Geräte und binde sie in bestehende Websites ein.
Grafikkarte statt Bilddatei.
WebGL ist ein Browser-Standard, mit dem JavaScript direkt auf die Grafikkarte zugreift. Dadurch lassen sich 3D-Modelle in Echtzeit darstellen, drehen und verändern. Die Bibliothek Three.js nimmt die aufwendige Low-Level-Arbeit ab und ist der verbreitetste Weg, WebGL produktiv einzusetzen.
Ein Foto zeigt eine Ansicht. Eine WebGL-Szene zeigt alle Ansichten, die der Besucher sehen will — in dem Moment, in dem er sie sehen will. Das Modell liegt als Geometrie im Speicher, die Grafikkarte berechnet jedes Bild neu, bis zu 60-mal pro Sekunde.
Die eigentliche Arbeit liegt dabei selten im „3D anzeigen“, sondern darin, dass es auf allen Geräten flüssig läuft. Ein Gaming-PC schafft fast alles. Ein drei Jahre altes Mittelklasse-Smartphone nicht. Genau dazwischen entscheidet sich, ob eine 3D-Anwendung beeindruckt oder ruckelt.
Wo ich einsteige
- Neue 3D-Anwendungen: Konfiguratoren, Produkt-Viewer, Explosionsansichten, Digital Twins
- Bestehende Szenen retten: WebGL-Projekte, die ruckeln, zu groß sind oder auf Mobilgeräten abstürzen
- Integration: 3D-Module in WordPress, Shops oder bestehende Web-Apps einbinden
- White-Label: WebGL-Umsetzung für Agenturen, die den Kundenkontakt behalten
Worauf es bei WebGL ankommt.
Draw Calls
Jedes Objekt kostet einen Aufruf an die Grafikkarte. Hunderte Einzelteile werden zusammengefasst oder instanziert, sonst bricht die Bildrate ein.
Texturen & Speicher
Große Texturen füllen den Grafikspeicher schneller als man denkt. Komprimierte Formate wie KTX2 halbieren den Bedarf oft.
Geometrie
CAD-Daten haben Millionen Dreiecke. Für den Browser werden sie reduziert und mit Draco komprimiert — sichtbar gleich, ein Bruchteil der Größe.
Licht & Schatten
Echtzeit-Schatten sind teuer. Oft wirkt vorberechnetes Licht besser und läuft auf jedem Gerät.
Geräte-Erkennung
Die Szene misst, was das Gerät schafft, und passt Auflösung und Effekte an — statt für alle das Maximum zu versuchen.
Lazy Loading
WebGL startet erst, wenn die Szene sichtbar wird. Der Seitenaufbau bleibt schnell, auch mit schwerem 3D weiter unten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
AXIOM Maschinenbau
Explosionsansicht einer Antriebseinheit — Hotspots erklären jede Baugruppe.
Ausprobieren ↗
TAKT Digital Twin
Eine Fertigungszelle läuft in Echtzeit im Browser.
Ausprobieren ↗
EICHWERK Konfigurator
Möbelkonfigurator mit Live-Preis, komplett prozedural gebaut.
Ausprobieren ↗FAQ — WebGL Entwickler.
Was ist der Unterschied zwischen WebGL und Three.js?
WebGL ist die Browser-Schnittstelle zur Grafikkarte und arbeitet auf sehr niedriger Ebene mit Shadern, Puffern und Matrizen. Three.js ist eine JavaScript-Bibliothek, die darauf aufsetzt und Kameras, Licht, Materialien und Modelle als handliche Objekte bereitstellt. In der Praxis wird fast jede WebGL-Anwendung mit Three.js oder einer ähnlichen Bibliothek gebaut, weil reines WebGL für komplette Anwendungen unverhältnismäßig aufwendig ist.
Läuft WebGL auf allen Geräten?
WebGL wird von allen aktuellen Browsern auf Windows, macOS, Android und iOS unterstützt. Die Frage ist weniger ob, sondern wie gut: Leistungsschwache Geräte brauchen reduzierte Modelle und weniger Effekte. Deshalb gehört eine Geräte-Erkennung, die Qualität und Auflösung anpasst, zu jeder ernsthaften Umsetzung.
Was ist mit WebGPU?
WebGPU ist der modernere Nachfolger und bietet mehr Leistung, ist aber noch nicht auf allen Geräten verlässlich verfügbar. Three.js unterstützt beide Wege. Für Projekte, die heute auf möglichst vielen Geräten laufen sollen, ist WebGL weiterhin die sichere Basis, mit der Option, später umzusteigen.
Übernimmst du auch bestehende WebGL-Projekte?
Ja. Häufig geht es um Szenen, die auf Mobilgeräten ruckeln, zu lange laden oder abstürzen. Ich analysiere zuerst, wo die Leistung verloren geht, etwa bei Draw Calls, Texturen oder Geometrie, und optimiere gezielt, statt das Projekt neu zu bauen.
Arbeitest du auch für Agenturen?
Ja, als White-Label-Entwickler. Die Agentur behält Kundenkontakt und Branding, ich liefere die WebGL-Umsetzung im Hintergrund.
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