Web3D – die Zukunft der Interaktivität: 3D-Animationen für Webseiten erstellen
Wenn ein Bild mehr als tausend Worte sagt, sagt dann eine interaktive 3D-Grafik auch mehr als tausend Bilder? Polyeder, auch Vielflächner genannt, sind ein gutes Beispiel. Besonders bei den komplexeren Exemplaren dieser dreidimensionalen Körper fällt es bisweilen schwer, sich allein anhand einer statischen Darstellung eine Vorstellung von der räumlichen Struktur eines solchen Objekts zu machen. Ein Problem, das sich leicht lösen lässt mit einem rotierenden GIF oder noch besser: einer interaktiven 3D-Darstellung, die man selbst frei bewegen kann.
Ein Polyeder (erweiterte Sphenocorona). Eine interaktive 3D-Darstellung wäre hier verständlicher.
Solche 3D-Modelle treffen wir heute oft beim Online-Shopping an. Mal können wir ein Produkt lediglich drehen und von allen Seiten betrachten, mal können wir in einer Art Konfigurator Materialien und Komponenten nach unseren Vorstellungen tauschen und bisweilen lässt sich ein Produkt sogar direkt in unserer eigenen Wohnung platzieren.
Die Technik, die es möglich gemacht hat, solche 3D-Modelle ohne Zusatz-Software in Browsern darzustellen, heißt WebGL. Sie wird von jedem halbwegs modernen Browser unterstützt. Vereinfacht gesagt, können Sie dadurch ein 3D-Modell ähnlich wie einen Textabschnitt oder ein Bild einfach in eine HTML-Seite einfügen und der Browser kümmert sich um die korrekte Darstellung. Um dem 3D-Modell, wie oben beschrieben, interaktive Funktionen hinzuzufügen, kommt JavaScript zum Einsatz, eine Standard-Webtechnologie, die heutzutage für einen Großteil der Interaktivität auf Webseiten verantwortlich ist.
Die Kombination von WebGL und JavaScript ermöglicht dabei enorme Freiheiten. Egal ob Sie ihr 3D-Modell lediglich drehen oder hineinzoomen können wollen oder einen komplexen 3D-Produkt-Konfigurator erstellen möchten, die Technik selbst setzt aktuell nur wenige Grenzen. Natürlich kann diese Fülle an Möglichkeiten schnell überfordern und zudem ist nicht jeder ein erfahrener JavaScript-Programmierer. Daher haben sich bereits zahlreiche Hilfswerkzeuge etabliert, die Sie bei der Erstellung Ihrer Web3D-Inhalte unterschiedlich stark unterstützen. 3 Beispiele möchte ich kurz vorstellen:
- Three.js ist ein kostenlose JavaScript-Bibliothek, die eine Reihe von Funktionen bereitstellt, um komplexe 3D-Darstellungen im Web zu erstellen. Die Bearbeitung erfolgt hier rein auf Code-Ebene im Editor der Wahl. Three.js ist daher eher für Autoren geeignet, die schon eine gewisse Programmier-Erfahrung besitzen.
- Babylon.js ist eine kostenlose Java-Script-Bibliothek und eine 3D-Engine. Auch hier erfolgt die Bearbeitung auf Code-Ebene. Babylon.js bietet auf der eigenen Website mit dem „Playground“ aber einen Editor an, der auch eine Vorschau der aktuellen 3D-Szene bereitstellt. Häufig verwendete Code-Fragmente lassen sich zudem leicht suchen und automatisch einfügen. Babylon.js ist dadurch eine einsteigerfreundlichere Alternative zur reinen Programmierung mit Three.js.
- Verge3D geht noch einen Schritt weiter als Babylon.js. Hier arbeitet man nicht mehr direkt mit JavaScript-Code, sondern mit sogenannten „Puzzles“, die JavaScript in eine visuelle Programmiersprache überführen. Funktionen und Elemente sind hier durch Bausteine repräsentiert, die sich aneinanderstecken lassen. JavaScript-Kenntnisse sind daher fast überhaupt nicht erforderlich. Nur Bausteine, die auch logisch zusammenpassen, können miteinander verbunden werden. Verge3D bietet eine kostenlose Demo, für die Vollversion fallen aber Kosten je nach Unternehmensgröße an.
Ein Demo-Projekt in Babylon.js. Links der Code und rechts die interaktive Live-Ansicht der 3D-Szene. Die Sonnentextur ist animiert, die Sonne lässt sich drehen und man kann in die Szenen hineinzoomen.
Die Fülle an Funktionen, die die Web3D-Technologie bietet, stellt den Redakteur gleichzeitig auch vor Herausforderungen. Zum einen erfordert eine direkt im Browser angezeigte 3D-Szene eine hinreichend starke Hardware. Mag eine 3D-Szene auf dem eigenen Smartphone noch flüssig laufen, kann die gleiche Szene auf dem 8 Jahre alten Laptop des Kollegen möglicherweise nur mühselig vor sich hinruckeln. Hier muss man die Komplexität der Szene und die vorgesehene Ziel-Hardware gut aufeinander abstimmen und gegebenenfalls testen.
Ein weiterer Punkt ist die rein didaktische Sicht auf das eigene 3D-Projekt. Interaktive 3D-Inhalte sind hervorragende Mittel bei der Wissensvermittlung, sei es in der technischen Dokumentation oder allgemein im Bildungswesen. Welche der vielen Funktionen und Elemente wir allerdings einsetzen, ist entscheidend für die Verständlichkeit eines 3D-Inhaltes und den Mehrwert, den dieser Inhalt letztendlich gegenüber einem Bild oder Video bietet. Hier sind gründliche Vorüberlegungen und ein gutes Konzept sehr wichtig und oft ist weniger mehr. In einem Folgeartikel möchte ich daher auf diese Aspekte genauer eingehen.
Quellen:
- Abbildung 1: Erweiterte Sphenocorona
- Abbildung 2: Babylon.js-Demo: Particle Sun
