3D Web: Standards, Plugins und Frameworks auf einen Blick

WebGL: Native dritte Dimension im Browser mit JavaScript und OpenGL

WebGL ist die Abkürzung für Web Graphics Library und ist ein Bestandteil der meisten Browser – bis auf den Internet Explorer. Mit Hilfe von WebGL können hardwarebeschleunigte 3D-Grafiken nativ direkt im Browser ohne zusätzliche Plugins dargestellt werden. WebGL ist keine 3D-Engine im klassischen Sinne sondern eine standardisierte Low-Level-3D-Grafik-Programmierschnittstelle für Webbrowser, die auf OpenGL ES in Version 2.0 basiert und mit JavaScript zusammenspielt. Da WebGL eine DOM API ist, kann sie eigentlich aus allen DOM-kompatiblen Programmiersprachen wie JavaScript, Java oder Objective C verwendet werden.

WebGL wird zurzeit oft im Zusammenhang mit HTML5 genannt, obwohl es einer eigenen Spezifikation folgt und genau genommen gar kein Teil von HTML5 ist. Allerdings kann man das HTML5 Canvas Element benutzen, um darauf WebGL-Inhalte anzuzeigen und so 3D-Inhalte direkt in HTML integrieren. WebGL ist genau genommen auch kein W3C-Standard, sondern wird vom Khronos Consortium im Rahmen der WebGL Working Group entwickelt. Dort mischen vier der fünf großen Browserhersteller Google, Opera, Mozilla, Apple und 3D-Entwickler mit. Nur Microsoft ist außen vor und somit unterstützt der Internet Explorer bisher kein WebGL. Aufgrund der rasanten Entwicklung von WebGL mit neuester Entwurfsspezifikation vom 6. Januar 2012 ist aber zu hoffen, dass Microsoft doch noch in Zugzwang gerät und bald nachgibt - auch wenn sich der Internet Explorer in der neunten Version noch beharrlich weigert. Zum Nachrüsten der 3D-Unterstützung muss dazu entweder Chrome Frame oder das Plugin IEWebGL installiert werden. Beide laufen unter dem Internet Explorer 6 bis 9. Auch anfängliche Sicherheitsbedenken von Microsoft haben sich nicht bestätigt.

Hilfreiche Frameworks gegen enormen Programmieraufwand

Eine Kritik, die immer wieder in Bezug auf WebGL auftaucht, ist der enorme Programmieraufwand, dem sich Entwickler zu stellen haben. Einarbeitung in die OpenGL Shading Language (GLSL) als eigene Programmierumgebung und mathematisches Know-how sind unerlässlich. Aber Frameworks, die das Entwickeln von WebGL-Anwendungen und das Rendering von Inhalten erheblich erleichtern, schießen geradezu wie Pilze aus dem Boden. Einige Beispiele hierfür sind:

• SceneJS erstellt Objekte über COLLADA-Files, die mit JavaScript ansteuerbar sind.
• GLGE maskiert komplizierte WebGL-Zugriffe über eigene API.
• three.js ist eine 3D-Umgebung in JavaScript für Spieleentwickler.
• C3DL bietet schnelles Echtzeitrendering.
• Copperlicht ist für 3D-Games im Browser.
• SpiderGL ist ähnlich wie C3DL.
• PhiloGL ist ein auf Performance ausgelegtes JavaScript-Framework.
• X3DOM (ausgesprochen: X-free-dom) integriert X3D-Inhalte mit interaktiven Manipulationsmöglichkeiten.
• Google ANGLE soll WebGL auf Windows ohne OpenGL-Treiber ermöglichen.

Hier ein kleiner Einblick in die WebGL-Programmierung:

Wer es nicht so mit dem Programmieren hat, kann WebGL-Inhalte auch über 3D-Modelling-Software wie z.B. die OpenSource 3D-Software Blender oder das kommerzielle 3D-Visualisierungs- und Animationsprogramm Maya von Autodesk erstellen. Die 3D-Szenen werden dann nach WebGL exportiert. Das ist z.B. mit Inka3D, einem WebGL-Exportmodul für Maya oder dem Blender to WebGL Exporter möglich.

Adobe und die dritte Dimension

Und was ist mit Adobe? Es gibt schon lange „gefakte“ 3D-Actionscript-Frameworks, die uns eigentlich nur dreidimensionale Inhalte vorgaukeln. Dabei werden technisch gesehen dreidimensionale Szenen über die Standard Flash Graphics API in zweidimensionale Bilder gerendert. So erzeugte Inhalte sind zwar im Browser mit jeder Flashplayerversion problemlos abspielbar, aber leider auch sehr eingeschränkt in ihrer Performance. Das Umrendern von 3D zu 2D über Actionscript erzeugt enorme CPU-Last und es ist keine Hardwarebeschleunigung verfügbar. Bekannte Actionscript-Frameworks in diesem Bereich sind Papervision3D, Away3D oder Alternativa3D. Einige dieser Frameworks integrieren bereits die neue „echte“ 3D-Stage API von Adobe mit dem Codenamen Molehill.

Codename Molehill: Adobe Stage 3D API

Mit Molehill hat Adobe nun eine 3D-API ins Rennen gebracht, die dem eben erwähnten Performanceproblem auf die Sprünge hilft und eben genau die fehlende Hardwarebeschleunigung mitbringt. Auch wenn Adobe gerade in letzter Zeit wieder mal ins Kreuzfeuer geraten ist, weil sie die Entwicklung von Flash für mobile Geräte zugunsten von HTML5 eingestellt haben, kommt man in Bezug auf In-Browser-3D-Rendering mit Hardwareunterstützung neben WebGL um das Erwähnen von Adobes Stage 3D API nicht herum. Mit dem Flashplayer in Version 11 können jetzt 3D-Inhalte über das Plugin im Browser abgespielt werden, die mit Hilfe der Stage 3D API erstellt wurden. Molehill nutzt OpenGL für Mac OS X und DirectX für Windows. Zusätzlich bietet die Stage 3D-API eine Fallbacklösung falls keine kompatible Grafikkarte gefunden wird und schwenkt auf softwareunterstützes Rendering um – auch wenn die Performance dann mäßig sein wird, kann WebGL das bisher nicht. Ein echter Wermutstropfen bei Molehill ist allerdings die mangelnde Unterstützung für Linux, wie aus diesem Post hervorgeht.

Weitere 3D-Techniken und -Frameworks

Unity3D und Co.

Unity3D ist eine integrierte Authoringumgebung mit Game-Engine für die Erstellung von 3D-Spielen, anderen interaktiven Inhalten, Visualisierungen und Echtzeit-3D-Animationen. Es ist zwar ein eigenes Browserplugin für Unity notwendig, aber die Erstellung von 3D-Inhalten ist um einiges einfacher als mit Molehill oder WebGL. Zusätzlich gibt es vorgefertigte Charakterkontroller, Wassersimulatoren, Partikelgeneratoren, eine Physikengine und mehr. Auch iOS- und Android-Apps sind kein Problem. Unity3D wird z.B. von Disney und der BBC eingesetzt. Als Basisversion ist Unity3D kostenlos und kann für eigene Entwicklungen genutzt werden. Die kostenpflichtige Pro-Version bietet erweiterte Funktionalität. Hier noch ein Video-Beispiel zu Unity:

Ähnliche Softwarelösungen sind z.B. Director, Blender, Virtools, Torque Game Builder oder Gamestudio.

X3D

Extensible 3D oder kurz X3D ist der Nachfolger von VRML, verfügt aber über standardisierte Schnittstellen und mehr Möglichkeiten. Seit 2004 ist X3D als ISO-Standard spezifiziert. X3D benötigt ebenfalls ein Browserplugin. X3D ist eine auf XML basierende Beschreibungssprache für 3D-Modelle, die im Web angezeigt werden können. X3D wird wie WebGL durch das Web3D Consortium betreut. 2001 wurde X3D vom W3C-Konsortium als offizieller Standard für 3D-Inhalte im Web verabschiedet.

Collada

Collada (COLLAborative Design Activity) ist ein XML-basiertes offenes Austauschformat für Daten zwischen verschiedenen 3D-Programmen. Neben Modellen und Texturen können auch Einstellungen und angewandte Veränderungsschritte von Programm zu Programm exportiert werden. An der Entwicklung und Spezifikation des Formats sind verschiedene Hersteller von 3D-Programmen beteiligt. Auch Communitys, wie die um das Open Source-Programm Blender, wurden eingeladen das Format zu unterstützen und zu erweitern. Die Struktur von Collada-Dateien ist über XML Schema definiert.

Coppercube

Wer sich bei der Erstellung von 3D-Webinhalten nicht auf ein Auslieferungsformat festlegen möchte, kann auch Konverterfunktionalitäten von z.B. Coppercube verwenden und so eine Molehill- und eine WebGL-Version auf Basis von 3D Studio-, Autocad- oder Collada Dateien exportieren.

Fazit

Sowohl Molehill als auch WebGL greifen über Low-Level APIs direkt auf die nativen Fähigkeiten der Grafikkarten eines Rechners zu. In Hinsicht auf Performance sind kaum Unterschiede zwischen kompiliertem Actionscript und JavaScript zu erwarten. Auch wenn beide Technologien sehr mächtig für die 3D-Entwicklung im Web sind, sind sie beide nicht gerade einfach im Umgang – insbesondere wenn man kein engagierter Grafikkartenprogrammierer ist. Für WebGL und Molehill gibt es hilfreiche Frameworks wie three.js oder Away3D, die eine Menge der Low-Level-Komplexität verbergen – aber ganz ohne bleibt das Thema immer noch nicht. Für aufwändige 3D-Spieleentwicklung im Web kann auch der Einsatz einer 3D-Modelling-Software sinnvoll sein, um über verschiedene Exporter ersteinmal formatunabhängig zu bleiben und sich die Arbeit zu erleichtern. In Bezug auf mobile 3D-Anwendungen wird wahrscheinlich WebGL die Nase auf lange Sicht vorn haben, da die meisten mobilen Browser auf dem Webkit basieren und hier die WebGL-Implementierung sicher ist.

Was ist euch wichtiger bei 3D-Inhalten im Web? Offener Standard, absolute Browserkompatibilität oder einfache Erstellung?

Weiterführende Links:

• Web3d.org
• Khronos.org
• WebGL Spezifikationsentwurf
• Aktuelle Browserübersicht zu WebGL-Unterstützung
• Umfassende Liste zu WebGL-Frameworks
• WebGL and Molehill: an overview of in-browser GPU 3D
• Adobe 3D-Stage API Molehill
• Blender: Free open source 3D content creation suite