WebGL – Grafische Frontends mit Animationen und Userinteraktion
Webseiten werden mit der Zeit immer aufwendiger und zunehmend interaktiver. Bisherige Designs haben sich hauptsächlich auf zweidimensionaler Ebene bewegt, doch immer mehr Browser unterstützen inzwischen 3D-Technologien wie etwa WebGL oder CSS3. Auch Microsofts Internet Explorer wird WebGL mit Version 11 unterstützen. Für Unternehmen bedeutet dies: ansprechendere Designs und mehr Möglichkeiten.
Was ist WebGL?
WebGL steht für “Web Graphics Library” und ist eine in modernen Browsern integrierte Bibliothek zur hardwarebeschleunigten Darstellung von 3D-Grafiken. Es basiert auf OpenGL ES (Open Graphics Library for Embedded System), einer Spezifikation für eine plattform- und sprachenunabhängige Programmierschnittstelle zur Entwicklung von 3D-Computergrafik, und wird von der Khronos Group entwickelt. In der Programmierung unterscheidet es sich stark von bisher verwendeten Techniken in der Webentwicklung. Der Quellcode besteht wie gewohnt aus Javascript, erfordert aber bei Verzicht auf weitere Bibliotheken ein ausgeprägtes Wissen über 3D-Programmierung im Allgemeinen.
Bisherige Technologien
Flash
Flash wurde ursprünglich für die Animation von Formen und Vektorgrafiken konzipiert und wird auch zu diesen Zwecken eingesetzt. Einen hohen Bekanntheitsgrad erreichte es jedoch, als es von YouTube und vielen anderen Plattformen für die Wiedergabe von Medien eingesetzt wurde. Seit 2011 unterstützt Flash mit Stage3D auch hardwarebeschleunigtes 3D und ist damit ebenfalls fähig, Webseiten zu bereichern – die Performance ist vergleichbar mit der von WebGL. Die Programmierung in Flash wird jedoch über die eigene Sprache ActionScript gelöst.
CSS3
CSS3 ist die Weiterentwicklung von CSS2, der Technologie, die momentan das Layout von Webseiten bestimmt. In der neuen Version werden zwei- sowie dreidimensionale Transformationen auf gewöhnliche DOM-Elemente und Animationen ermöglicht. Mit CSS3 lassen sich so ebenfalls 3D-Elemente darstellen. Da CSS3 darauf beruht, HTML-Elemente zur Darstellung zu nutzen, eignet es sich weniger zur Darstellung von vordefinierten 3D-Modellen. Vielmehr bringt es ganze Elemente der Webseite, wie beispielsweise ein Menü oder ein Logo, in einen 3D-Kontext. Dies ist hauptsächlich für kreative Designs nützlich. Meist wird CSS3 mit Javascript kombiniert, um Animationen zu steuern. Im Gegensatz zu WebGL kann bei CSS3 auf die 3D-Elemente zugegriffen werden, als wären sie ganz normale HTML-Elemente. Dies erhöht die benötigte Rechenleistung leicht, dafür erfordert es aber nur sehr wenig neues Wissen für Web-Entwickler.
Silverlight
Silverlight ist ein Browser-Plugin von Microsoft, das für die Ausführung von Applikationen im Web konzipiert ist. Es basiert auf einer reduzierten Version des .NET Frameworks. Nachdem Silverlight sich zunächst auf traditionelle zweidimensionale Applikationen beschränkte, führte es mit Version 5 die hardwarebeschleunigte Darstellung von 3D-Elementen ein. Da zur Nutzung erst ein Plugin installiert werden muss, benötigt die Verwendung mehr Vertrauen des Users in den Anbieter als bei Verwendung bekannterer oder integrierter Lösungen.
Anwendungsmöglichkeiten in Web-Shops
WebGL benötigt zur Darstellung von 3D-Grafiken ein “Canvas” Element. Es gehört zur HTML5 Spezifikation und kann wie jedes andere HTML-Element beliebig auf Webseiten positioniert werden. So können Teile der Seite einfach mit 3D-Inhalten versehen werden. Ganze Webseiten mit WebGL umzusetzen ist zwar möglich, aber nicht empfehlenswert, da WebGL-Inhalte vom DOM (Document Object Model) der eigentlichen Seite getrennt sind und nicht über gewohnte Methoden angesprochen werden können. Für diesen Zweck führt CSS3 momentan Methoden zur 3D Transformation von HTML-Elementen ein, die auch schon in vielen Browsern experimentell zur Verfügung stehen. In Web-Shops können beispielsweise 3D-Ansichten von Produkten angeboten werden. Viele Shops bieten bereits eine 3D-Ansicht, meist handelt es sich dabei aber um eine Reihe von Fotos, die geschickt ausgetauscht werden.
Doch WebGL kann zu wesentlich komplexeren Dingen eingesetzt werden als zur Ausgabe vordefinierter 3D-Modelle. Die Dynamik der 3D-Programmierung erlaubt es beispielsweise den Kunden, Artikel im Shop selbst zu konfigurieren und die Auswirkungen in Echtzeit zu betrachten. Denkbar ist hier fast alles, vom Austausch einzelner Komponenten bis zur Angabe von Maßen und dem Hinzufügen eigener Grafiken. Gerade für Web-Shops, die ihren Kunden Individualität bieten möchten, ist dies eine interessante Möglichkeit, sich von der Konkurrenz abzuheben.
Browser-Unterstützung heute
WebGL wird zwar bereits von vielen Browsern unterstützt, ist aber oftmals noch deaktiviert, da die Implementierung noch nicht vollständig ist. Aktiv ist es bereits in den jeweils neusten Versionen von Google Chrome, Mozilla Firefox und Opera. Natürlich fehlt an dieser Stelle momentan noch einer der wichtigsten Browser überhaupt, der Internet Explorer von Microsoft. Nachdem zunächst die Chancen schlecht standen, dass der Internet Explorer WebGL unterstützten wird, zeigte eine Vorab-Version des Internet Explorers 11, dass auch er nun WebGL unterstützen wird. Entscheidet man sich heute dafür, 3D-Inhalte für seinen Web-Shop zu nutzen, sollten diese stets optional angeboten werden. Selbst falls der Browser des Kunden WebGL bereits unterstützt, benötigt man je nach Komplexität der Anwendung eine dedizierte Grafikkarte mit aktuellen Treibern, um diese auch performant darstellen zu können. Natürlich kann im Falle fehlender Unterstützung Fallback-Content angezeigt werden.
Browserunterstützung in der Zukunft
Obwohl die meisten Browser WebGL bereits nahezu vollständig implementiert haben, wird es noch einige Zeit dauern, bevor es weitläufig genutzt werden kann. Dies liegt hauptsächlich daran, dass der Internet Explorer in Version 11 erst mit Windows 8.1 erscheint und ältere Versionen WebGL nur über ein Drittanbieter-Plugin unterstützen, das manuell installiert werden muss. Nach wie vor nutzt ein Großteil der User im Web den Internet Explorer als primären Browser. Folglich muss gewartet werden, bis sich die neue Version in der breiten Masse durchsetzt. Gerade im B2B-Bereich kann diese Entwicklung sehr lange dauern, da ein Update des Betriebssystems der Arbeitsplatzrechner meist mit enormen Kosten verbunden ist. Bei Privatkunden ist diese Hemmschwelle weniger präsent, meist wird beim Kauf eines neuen Rechners auch gleich das neueste Betriebssystem mitgeliefert.
Wird WebGL Flash ablösen?
Momentan wird Flash weiträumiger unterstützt als WebGL. Dies wird sich aber ändern, sobald der Internet Explorer 11 verbreiteter ist. Da Flash hauptsächlich durch die Möglichkeit der Medienwiedergabe seine Popularität erhalten hat und genau dieser Teil momentan durch das HTML5 “Video” Element ersetzt wird, wird die Nutzung von Flash für diesen Zweck stark zurückgehen. Auf vielen Seiten wird es bereits als Fallback-Lösung genutzt, die einspringt, falls der Browser die HTML5 Funktionalität noch nicht unterstützt. Im 3D Bereich ist es schwer zu sagen, welche Technologie sich letztlich durchsetzt. WebGL hat den Vorteil, dass es mit Javascript angesteuert werden kann – eine Sprache, die Web-Entwicklern bereits bekannt sein sollte und damit auch näher an der klassischen Web-Programmierung liegt. ActionScript hingegen muss unter Umständen erst erlernt werden. Aufgrund der Nähe von WebGL zu Javascript ist deshalb davon auszugehen, dass WebGL auf Dauer die führende Technologie sein wird. Webseitenbetreiber, die frühzeitig auf diese Technologie umstellen, können sich so wichtige Marktanteile sichern.
Weiterführende Links:
Autoren
Marc Berghaus
Marc Berghaus ist seit Anfang 2012 als E-Commerce und Front-End Entwickler bei NEXUS Netsoft tätig. Sein Schwerpunkt liegt in der Kombination von Shop-Modulen mit den zugehörigen Animationen im Front-End Bereich. Ihn interessieren neue Technologien und alternative Herangehensweisen.
Sebastian Scheel
Sebastian Scheel ist Leiter des Team E-Commerce der Internetagentur NEXUS Netsoft GmbH in Langenfeld. Mit seinem Team plant und realisiert er unter anderem Online-Shop-Lösungen mit OXID eShop und Magento.
www.nexus-netsoft.com
scheelnexus-netsoftcom
www.xing.com/companies/nexusnetsoftgmbh
