Webentwicklung: WebGL-Bibliotheken für ein interaktives 3D-Web
Die Bibliotheken Three.js und Babylon.js enthalten Werkzeuge, um dreidimensionale Szenen im Browser einfacher umzusetzen.
- Sebastian Springer
Um das Web dreidimensional erlebbar zu machen, braucht es moderne Browsertechniken. So beherrscht das svg
-Element Vektorgrafiken und mit dem canvas
-Element sind Pixelgrafiken umsetzbar. Außerdem erlaubt das canvas
-Element das Zeichnen von 3D-Grafiken. Solche nativen 3D-Elemente eröffnen weitere neue Möglichkeiten: Operationen wie Drehen, Zoomen und Verschieben erzeugen den Eindruck, dass Betrachter einer 3D-Szene tatsächlich damit interagieren können. Immersive User Experience fasst dieses Eintauchen in eine künstliche Welt zusammen.
Derzeitige Browsertechniken enthalten Elemente, die zusammengefügt die User Experience ausmachen: das Erzeugen von Elementen, deren Oberflächengestaltung, Interaktionsmöglichkeiten, Beleuchtung und Kameraführung. Die Techniken kommen vor allem bei Produktpräsentationen und im E-Commerce-Bereich zum Einsatz. Aber auch Browserspiele stützen sich auf diese Schnittstellen.
Die Web Graphics Library (WebGL) ist seit vielen Jahren fester Teil der Browserschnittstellen und die Basis für 3D-Objekte. Technische Grundlage einer 3D-Applikation im Browser ist das HTML-Canvas-Element, das die Zeichenfläche bildet. Es verfügt über unterschiedliche Kontexttypen: den 2D-Kontext für das Zeichnen zweidimensionaler Grafiken und mehrere 3D-Kontexte wie die JavaScript-APIs WebGL und WebGPU zum Rendern von 3D-Inhalten. WebGL basiert auf der Spezifikation OpenGL ES 2.0. Daher ist die Schnittstelle portabel und lässt sich auf viele verschiedene Geräte übertragen.