Real-Time-3D-Grafiken mit WebGL direkt im Browser darstellen
Kommentare

3D-Grafiken gibt es bereits seit vielen Jahren in verschiedenen Bereichen, etwa der Datenvisualisierung oder Videospielen. So nutzen beispielsweise Engines wie die Unity Game Engine und auch der Playstation-4-Browser

3D-Grafiken gibt es bereits seit vielen Jahren in verschiedenen Bereichen, etwa der Datenvisualisierung oder Videospielen. So nutzen beispielsweise Engines wie die Unity Game Engine und auch der Playstation-4-Browser Teile von WebGL. Für die Darstellung im Browser ließen sich 3D-Grafiken bisher nur umständlich erstellen und in Websites einbinden, gerade, wenn es um komplexe 3D-Formen und –Animationen geht. Mit WebGL kann dies nun vereinfacht und das Erstellen von Real-Time-3D-Grafiken für den Browser ermöglicht werden, ohne auf zusätzliche Plug-ins angewiesen zu sein. Guillaume Lecollinet erklärt, was hinter der Technologie steckt und wie sie funktioniert.

Was 3D-Grafiken mit WebGL so besonders macht

Web-Content lässt sich mit der Implementierung von 3D-Grafiken deutlich aufwerten, etwa, wenn Produktinformationen hervorgehoben oder interaktive Grafiken erstellt werden sollen.

Mit WebGL lassen sich 3D-Effekte erstellen, die in jedem Web-Dokument genutzt werden können, da die Technologie direkt im Browser läuft und keine zusätzlichen Erweiterungen benötigt. So können zum Beispiel mit CSS bearbeitete DOM-Elemente mit Real-Time-3D-Grafiken versehen werden, wodurch ein interaktiver Effekt entsteht und dem Nutzer eine bessere User Experience geboten wird.

Gerade komplexere Animationen und Formen lassen sich mit den Features, die WebGL mit sich bringt – zum Beispiel Modelle, Texturen oder Schattierungen – einfacher erstellen, als etwa mit CSS-3D-Transforms. Stattdessen eignet es sich besonders für das Erstellen von einfachen Übergangseffekten oder 3D-Slideshows – wenngleich WebGL auch beim Designen von grafisch anspruchsvollen Slideshows den Entwicklern das Leben deutlich einfacher macht.

Ein weiterer Vorteil von WebGL ist auch, dass es von vielen Browsern bereits unterstützt wird, sowohl in Desktop-, als auch in mobilen Browsern.

Beispiele zur Nutzung von WebGL und 3D-Grafiken

Um 3D-Grafiken mit WebGL im Browser darzustellen, bietet sich die Nutzung der three.js-Library an, womit 3D-Szenen erstellt und bearbeitet werden können – sogar Spiele lassen sich damit mit Minimalaufwand entwickeln. Für die Entwicklung eigener 3D-Modelle gibt es ebenso allerhand Tools, zum Beispiel der Open-Source-3D-Editor Blender.

Guillaume Lecollinet verdeutlicht mit einer kurzen Demo, wie WebGL genutzt werden kann, etwa indem ein einfaches 3D-Modell in die Website geladen, eine Bouncing-Animation mit JavaScript zu einem Modell hinzugefügt oder das 3D-Modell Schatten auf der Seite wirft.

Das sind jedoch nur einige Beispiele, was Entwickler mit WebGL anstellen können, um 3D-Grafiken im Browser darzustellen, denn wie Lecollinet sagt:

With the Power of hardware-accelerated 3D graphics, WebGL truly offers endless possibilities for designers and developers.

Aufmacherbild: 3d technology von Shutterstock / Urheberrecht: Ollyy

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -