WebGL im Produktkonfigurator: Wann sich 3D im Browser lohnt
WebGL zeigt interaktive 3D-Grafik im Browser ohne Plugin, nutzt dafür aber die Grafikleistung des Kundengeräts. Ob sich 3D im Browser lohnt, entscheidet sich an der Zahl der Kombinationen, an der Frage, ob sich die Form mit den Optionen ändert, und daran, was auf schwachen Geräten passiert. Das Modell ist dabei der Engpass, nicht der Code.
WebGL zeigt interaktive 3D-Grafik im Browser ohne Plugin, nutzt dafür aber die Grafikleistung des Kundengeräts. 3D im Browser lohnt sich, wenn sich die Form des Produkts mit den Optionen ändert, das Produkt von allen Seiten geprüft werden soll oder die Zahl der Kombinationen für vorgerenderte Bilder zu groß ist. Bei überschaubarer Kombinationszahl sind Bilder oder Bildebenen einfacher, schneller und leichter zugänglich. Laut caniuse (September 2026) unterstützen etwa 97,13 % der Browsernutzer WebGL 2; das ist ein Browseranteil, keine Garantie, dass Ihre Szene auf jedem Gerät läuft.
Kurze Antwort
WebGL zeigt interaktive 3D-Grafik im Browser ohne Plugin, nutzt dafür aber die Grafikleistung des Kundengeräts. 3D im Browser lohnt sich, wenn sich die Form des Produkts mit den Optionen ändert, das Produkt von allen Seiten geprüft werden soll oder die Zahl der Kombinationen für vorgerenderte Bilder zu groß ist. Bei überschaubarer Kombinationszahl sind Bilder oder Bildebenen einfacher, schneller und leichter zugänglich. Laut caniuse (September 2026) unterstützen etwa 97,13 % der Browsernutzer WebGL 2; das ist ein Browseranteil, keine Garantie, dass Ihre Szene auf jedem Gerät läuft.
Was WebGL ist und was nicht
WebGL ist laut MDN eine JavaScript-Schnittstelle für interaktive 2D- und 3D-Grafik im Browser, ohne Plugins, gezeichnet in einem Canvas-Element. WebGL 1 entspricht im Kern OpenGL ES 2.0, WebGL 2 bietet einen großen Teil von OpenGL ES 3.0; die Khronos Group beschreibt es als offenen Standard ohne Lizenzgebühren. Was WebGL nicht ist: ein Konfigurator. Es ist die Grafikschnittstelle. Optionen, Regeln, Preis und Übergabe an die Bestellung müssen Sie zusätzlich bauen (dazu unser Artikel zum Produktkonfigurator). Und WebGL braucht passende Hardware: MDN weist etwa darauf hin, dass ein Texturkompressionsformat wie S3TC nicht auf jeder Grafikkarte vorhanden ist.
Brauchen Sie überhaupt 3D? Bilder pro Kombination als Alternative
Bilder pro Kombination
Die Zahl der Kombinationen ist das Produkt der Werte aller Optionen. Bei überschaubarer Zahl lässt sich jede Kombination als Bild vorrendern. Das lädt vorhersehbar, läuft auf jedem Gerät und lässt sich mit einem Alternativtext versehen.
Bildebenen
Wenn jede Option nur Farbe oder Material einer eigenen Fläche ändert, lassen sich Ebenen übereinanderlegen. Dann wächst die Zahl der Bilder mit der Summe der Werte statt mit dem Produkt: vier Optionen mit je fünf Werten ergeben 20 Ebenen statt 625 Kombinationen. Das gilt nur, solange die Optionen unabhängig voneinander sind und die Form gleich bleibt.
Echtes 3D
Ändert sich die Form oder soll der Kunde das Produkt drehen und von allen Seiten prüfen, reichen Ebenen nicht mehr. Dann beginnt die Entscheidung für 3D, mit allen Folgen für Modell, Ladezeit und Geräte.
Rechenbeispiel: Bilder, Ebenen oder 3D
Drei Optionen
5 Farben × 4 Materialien × 3 Größen = 60 Kombinationen. 60 vorgerenderte Bilder sind überschaubar.
Vier Optionen
4 Optionen mit je 5 Werten ergeben 625 Kombinationen. Als unabhängige Ebenen genügen 20 Bilder; als einzelne Bilder wären es 625.
Die Form ändert sich
Verändert eine Option die Silhouette, etwa durch Maße oder Zubehör, funktionieren Ebenen nicht mehr. Hier beginnt die Frage nach 3D.
Wann sich echtes 3D lohnt (unsere Einschätzung)
Die Form hängt von den Optionen ab
Maße, Zubehör oder Bauteile verändern die Silhouette; ein Foto pro Zustand ist nicht möglich.
Zu viele Kombinationen für Bilder
Die Zahl wächst durch Multiplikation schneller, als Sie Bilder erzeugen und pflegen können, und Ebenen greifen nicht.
Der Kunde muss von allen Seiten prüfen
Details auf der Rückseite, Innenseiten oder die Passform entscheiden über den Kauf.
Es gibt noch keine Fotos
Sonderanfertigungen existieren erst nach der Bestellung. Eine Vorschau ist dann das einzige Bild.
Was wir nicht behaupten
Das ist eine Einschätzung aus der Logik des Produkts, keine Messung. Belege, dass 3D die Kaufquote erhöht oder Retouren senkt, haben wir nicht; die Aussagen dazu in Anbieterblogs nennen keine Quelle.
Was im Browser des Kunden passieren muss
Laut caniuse unterstützen etwa 97,13 % der Browsernutzer weltweit WebGL 2 (Datenbasis StatCounter, September 2026). Das ist ein Anteil an Browsern, keine Zusage, dass Ihre Szene auf jedem Gerät läuft.
Kontext anfordern
Beim Anfordern des WebGL-Kontexts über getContext liefert der Browser null, wenn der Kontexttyp nicht unterstützt wird (MDN). Diesen Fall müssen Sie abfangen.
Leistung prüfen
Die Option failIfMajorPerformanceCaveat legt fest, ob ein Kontext auch bei niedriger Leistung oder ohne Hardware-Grafik erzeugt wird (MDN). Damit lassen sich schwache Geräte erkennen, bevor die Seite hakt.
Ressourcen laden
Modell und Texturen kommen komprimiert und gestaffelt. MDN rät, sich nicht auf Erweiterungen und Grenzwerte zu verlassen und komprimierte Texturen zu nutzen.
Rückfall bereithalten
Ohne Kontext, bei schwacher Leistung oder nach einem Kontextverlust (laut MDN möglich) braucht der Kunde einen gleichwertigen Weg zur Bestellung: Bilder und die normale Optionsauswahl.
Der Rückfall ist kein Sonderfall, sondern Teil des Konfigurators. Die Optionsauswahl muss ohne 3D funktionieren.
Entscheidungsweg: Bilder, Ebenen oder 3D
Wie viele Kombinationen? (Werte aller Optionen multiplizieren) überschaubar → vorgerenderte Bilder zu viele ↓ Ändert jede Option nur Farbe oder Material, unabhängig von den anderen? ja → Bildebenen nein (Form ändert sich oder Ansicht von allen Seiten nötig) ↓ 3D im Browser (WebGL) mit Geräteprüfung und Rückfall auf Bilder
Das Modell ist der Engpass, nicht der Code
Dateiformat
glTF 2.0 ist laut Khronos ein ISO/IEC-Standard (12113:2022); die Szene wird als JSON beschrieben und in einer einzigen Binärdatei (.glb) verpackt. Für Texturen gibt es KTX 2.0, einen Container für GPU-Texturen mit Basis-Universal-Kompression über die Erweiterung KHR_texture_basisu.
Dateigröße
Jason Grigsby von Cloud Four hat am 6. Februar 2024 vier Modelle gemessen: Mit Draco-Kompression waren die Dateien kleiner als 10 % der Ausgangsdateien (GLB und USDZ). Das ist die Messung eines Autors an vier Modellen, kein allgemeines Gesetz, aber ein Hinweis, wo sich Gewicht sparen lässt.
Wer liefert das Modell?
Kommt es aus Ihren CAD-Daten, von einem Dienstleister oder vom Hersteller? Jede Quelle liefert andere Dateigrößen und Rechte. Klären Sie, wer das Modell für den Browser aufbereitet und wer das bei jedem neuen Produkt wiederholt.
Augmented Reality
Für AR auf dem iPhone verlangt Apples Quick Look laut Cloud Four das Format USDZ. Soll AR dazukommen, ist das ein weiterer Dateityp.
Mobil, Ladezeit, Akku: messen statt versprechen
Budget festlegen
Legen Sie ein Größenbudget für Modell, Texturen und Skript fest und messen Sie es an der echten Seite. Zielwerte aus Anbieterblogs sind Ziele ohne Messmethode.
Auf echten Geräten testen
Testen Sie auf einem mittleren Android-Gerät, einem älteren iPhone und im gedrosselten Netz, nicht nur am Entwicklungsrechner. Akkuverbrauch und Erwärmung merken Sie dort.
Weniger zeichnen
MDN nennt als Maßnahmen: weniger Zeichenaufrufe, komprimierte Texturen, einen kleineren Canvas bei gleicher Darstellungsgröße auf der Seite und einen vorsichtigen Richtwert für die maximale Texturgröße (4096).
Kontextverlust einplanen
Der Browser kann den WebGL-Kontext verlieren. Die Seite muss danach neu aufbauen oder auf den Rückfall wechseln.
Sichtbarkeit und Bedienbarkeit: Suche, Tastatur, Screenreader
Suche
Eine Stuttgarter Agentur für WebGL nennt es selbst als Einschränkung: Suchmaschinen lesen den Inhalt eines Canvas nicht, Produkttext und Metadaten müssen als HTML danebenstehen. Wir halten das für die richtige Konsequenz: Produktname, Beschreibung, Optionen und Preis gehören in die Seite, nicht in die Szene.
Tastatur
Drehen per Maus oder Wischen darf nie der einzige Weg sein. Jede Geste braucht eine Schaltfläche (nach links und rechts drehen, zoomen, Ansicht zurücksetzen), erreichbar per Tastatur.
Screenreader
Optionen sind echte Formularelemente mit Beschriftung; die gewählte Konfiguration steht zusätzlich als Text da. Der Canvas bekommt eine Textalternative.
3D-Viewer für die Website: fertig einbetten oder selbst bauen?
Ein Viewer ist kein Konfigurator
Ein 3D-Viewer zeigt ein Modell zum Drehen und Zoomen. Ein Konfigurator ändert das Modell nach Regeln, berechnet den Preis und übergibt die Auswahl. Sollen Kunden das Produkt nur ansehen, genügt der Viewer; konfigurierbare Produkte brauchen mehr.
Fertig einbetten
Die Webkomponente model-viewer steht unter der Apache-2.0-Lizenz und unterstützt laut modelviewer.dev die jeweils zwei neuesten Hauptversionen der sich automatisch aktualisierenden Browser sowie die zwei neuesten Safari-Versionen auf macOS und iOS. Sie wiegt laut Cloud Four etwa 245 KB JavaScript. Auch eine Hosting-Plattform für 3D-Modelle ist möglich; Tarife und Bedingungen haben wir nicht geprüft, lesen Sie sie auf der Seite des Anbieters.
Selbst bauen
Eine eigene Szene (etwa mit einem Framework wie Three.js) ist nötig, wenn Regeln, Preis oder Zubehör die Szene verändern. Das ist der Teil, der Entwicklung kostet; der Viewer allein ist es nicht.
Was kostet ein Konfigurator mit 3D im Browser?
Wir nennen keine Summen
Die Preise, die wir gesichtet haben, sind Schätzungen einzelner Anbieter oder Autoren ohne Quelle und mischen die Posten. Wir nennen deshalb keine Summen.
Renderings
Fertige Bilder oder Animationen eines Produkts. Das ist eine andere Leistung als interaktives 3D im Browser; in unserer Recherche fanden sich zu 3D-Produktvisualisierung vor allem Preise für Renderings.
3D-Modell
Jedes Produkt braucht ein für den Browser aufbereitetes Modell. Die Zahl der Produkte und Varianten bestimmt diesen Posten, und er wiederholt sich bei jedem neuen Produkt.
Logik und Preis
Optionen, Regeln, Preisberechnung, Übergabe an die Bestellung: derselbe Aufwand wie bei jedem Konfigurator, mit oder ohne 3D.
Integration, Betrieb und Rückfall
Shop, ERP, Hosting, Pflege, Tests auf Geräten und der 2D-Rückfall.
Nächster Schritt: drei Fragen an Ihr Produkt
1. Wie viele Kombinationen entstehen, wenn Sie die Werte aller Optionen multiplizieren? 2. Ändert jede Option nur Farbe oder Material, oder ändert sich die Form? 3. Was sieht ein Kunde mit einem älteren Smartphone, wenn 3D nicht startet? Lauten die Antworten „wenige“, „nur Farbe“ und „Bilder reichen“, brauchen Sie kein 3D. Lauten sie „viele“, „Form“ und „wir haben einen Rückfall“, lohnt der Blick auf WebGL, am besten zuerst als kleiner Prototyp mit einem Produkt und Messung auf echten Geräten.
Fazit
- WebGL ist die Grafikschnittstelle im Browser, kein Konfigurator. Optionen, Preis und Bestellung bauen Sie zusätzlich.
- Prüfen Sie zuerst Bilder und Bildebenen: Die Zahl der Kombinationen ist ein Produkt, die der Ebenen eine Summe.
- 97,13 % WebGL-2-Unterstützung (caniuse, September 2026) ist ein Browseranteil, keine Garantie für Ihre Szene auf jedem Gerät.
- Das Modell ist der Engpass: Format, Kompression und die Quelle der Modelle entscheiden über die Ladezeit.
- Planen Sie Rückfall, Tastaturbedienung und HTML-Inhalte von Anfang an ein.
FAQ
Was ist der Unterschied zwischen 3D-Viewer und Konfigurator?
Bei wie vielen Nutzern läuft WebGL?
Brauche ich für einen 3D-Viewer auf der Website ein Plugin?
Wann reichen Bilder statt 3D?
Was kostet ein Konfigurator mit 3D im Browser?
Wie bleibt die Seite mit 3D schnell?
Sieht Google den Inhalt eines 3D-Konfigurators?
Erst prüfen, ob Bilder reichen. Dann 3D bauen.
Wir gehen mit Ihnen durch, wie viele Kombinationen Ihr Produkt hat, ob Bilder genügen und was ein Prototyp mit Rückfall leisten müsste.
Selbstcheck starten