Was ist WebGL? 3D-Grafik im Browser einfach erklärt

Mit WebGL können Webseiten interaktive 2D- und 3D-Grafiken direkt im Browser darstellen. In einem 3D-Produktkonfigurator lässt sich damit zum Beispiel ein Fahrzeug drehen, heranzoomen und in verschiedenen Lackfarben betrachten. Sobald jemand eine neue Farbe auswählt, aktualisiert sich die Ansicht direkt auf der Seite.

Wie funktioniert WebGL?

WebGL steht für Web Graphics Library. Es ist eine JavaScript-Schnittstelle, über die eine Webanwendung Grafiken in einem HTML-Canvas darstellen kann. Das Canvas ist der Bereich auf der Seite, in dem die Szene erscheint. Der Browser kann dabei die Grafikhardware des Geräts nutzen. In einem kompatiblen Browser ist dafür kein zusätzliches Plug-in erforderlich.

Bei einem Produktkonfigurator verarbeitet die Anwendung die Eingaben. Wählt eine Kundin etwa einen anderen Stoff für ein Sofa, ändert die Anwendung das Material am 3D-Modell. Über WebGL wird die Szene mit dem neuen Stoff dargestellt. Auch beim Drehen oder Zoomen wird die Ansicht laufend neu berechnet.

WebGL 1 orientiert sich an OpenGL ES 2.0. WebGL 2 unterstützt einen großen Teil der Funktionen von OpenGL ES 3.0 und bietet damit zusätzliche Möglichkeiten für die Darstellung. Technische Dokumentation zu WebGL bei MDN

Wo wird WebGL eingesetzt?

• Produktkonfiguratoren: Kunden vergleichen Farben, Materialien und Ausstattungsvarianten und betrachten das Ergebnis aus verschiedenen Blickwinkeln.
• Interaktive Produktansichten: Interessenten können ein Produkt drehen und Details untersuchen, die auf einem einzelnen Produktfoto schwer zu erkennen sind.
• Spiele, Lernanwendungen und Datenvisualisierung: Nutzer bewegen sich durch eine Szene, erkunden ein Modell oder wechseln die Perspektive auf einen Datensatz.

Was ist bei der Entwicklung eines WebGL-Konfigurators wichtig?

Ein Konfigurator soll auf dem Smartphone ebenso verständlich bedienbar sein wie am Desktop. Bei der Entwicklung spielen deshalb die 3D-Daten, die Bedienung und die Produktlogik zusammen.

1. 3D-Modelle für den Browser aufbereiten. CAD-Daten enthalten oft Details, die in der Produktansicht kaum sichtbar sind. Eine für das Web aufbereitete Version kann diese Details vereinfachen und sichtbare Merkmale wie Nähte, Kanten oder Oberflächen gezielt erhalten.
2. Ladezeit und Darstellung auf Zielgeräten testen. Große Texturen und komplexe Modelle können die Ladezeit verlängern und die Darstellung verlangsamen. Ein Test auf typischen Smartphones zeigt, ob sich das Produkt nach dem Laden flüssig drehen und zoomen lässt.
3. Darstellung und Produktregeln verbinden. Die Anwendung entscheidet, welche Optionen zusammenpassen. Ist ein bestimmtes Felgendesign nur für eine Ausstattung verfügbar, steuert die Produktlogik die Auswahl. WebGL stellt die gewählte Kombination dar.

Welche Vorteile und Grenzen hat WebGL?

WebGL ermöglicht eine frei drehbare Ansicht und macht Änderungen an einer Produktvariante direkt sichtbar. Das hilft besonders bei Produkten, deren Form, Oberflächen oder Optionen sich aus mehreren Blickwinkeln besser beurteilen lassen.

Wie flüssig die Ansicht läuft, hängt unter anderem vom Gerät und vom Aufwand der Szene ab. Ist WebGL auf einem Gerät nicht verfügbar, können Produktbilder und eine weiterhin bedienbare Variantenauswahl als Alternative dienen. Für Produkte mit wenigen Varianten und festen Ansichten kann eine bildbasierte Darstellung bereits ausreichen.

WebGL im Einsatz bei VisCircle

Bei der Entwicklung eines 3D-Produktkonfigurators kommt es darauf an, welche Entscheidungen Kunden online treffen sollen. Bei einem Fahrzeug können das Lackfarbe und Felgen sein, bei einem Sofa der Stoff und die Zusammenstellung der Module. Auf der Lösungsseite von VisCircle können Sie in einer interaktiven Fahrzeug-Demo selbst drehen, zoomen und Varianten ausprobieren. 3D-Produktkonfiguratoren von VisCircle und Live-Demo