September 2015
Web 3D - WebGL / Canvas-Simulation
3D-Entwicklung mit WebGL ist heutzutage ein großes Thema und wird die Zukunft der Webentwicklung mit Sicherheit prägen. Daher haben wir auch einen Blick auf verschiedene JS-Frameworks geworfen: ThreeJS, BabylonJS und SceneJS.
Für die, die mit dem Thema WebGL noch nichts zu tun hatten, stellt sich zunächst die Frage: Was ist WebGL überhaupt?
Definition und Kompatibilität
WebGL sorgt für eine hardwarebeschleunigte Darstellung von 3D-Objekten. Seit folgenden Browsern wird WebGL nativ unterstützt:
Internet Explorer 11+
Firefox 24+
Google Chrome 18+
Safari 5.1+
iOS 8+
Android: Nur auf dem Google Chrome-Browser
ThreeJS
Ziel von ThreeJS ist es laut eigener Definition, 3D via WebGL im Browser einfacher benutzbar zu machen. Durch eine Vielzahl von Animations-Funktionen und Erweiterungen ist das Framework besonders geeignet für die Erstellung sowohl einfacher als auch komplexer 3D-Animation. Eine User-Interaktion mit den 3D-Elementen mittels Maus und Finger mussten wir jedoch erst programmatisch hinzufügen.
Pro
Es gibt einen Canvas-Renderer als Fallback für Browser, auf denen kein WebGL verfügbar ist.
Webeditor in der Beta-Version verfügbar
gute Dokumentation und API
viele Plugins (unter anderem für Physics etc.)
- Models können einfach importiert werden (Typen wie obj, json, js etc.)
Kontra
Maus- und Touch-Steuerung musste erst programmiert werden
Probleme beim Import von OBJ- und MTL-Dateien
BabylonJS
BabylonJS wurde von Microsoft mitentwickelt und legt den Schwerpunkt auf die vereinfachte Programmierung von 3D-Spielen für den Browser. Das Besondere dabei sind die implementierte Kollisionserkennung und die Maus- und Touch-Steuerung.
Pro
Maus- / Touch-Steuerung Basic implementiert
schnelle Weiterentwicklung durch Microsoft
Es gibt viele gute Tutorials für nahezu alle erdenklichen Funktionen.
Mittlerweile gibt es eine gute Dokumentation.
sehr neu und aktuell (wurde erst 2013 entwickelt)
Eine Physics-Engine wurde speziell für BabylonJS entwickelt (cannon.js).
3D-Models leicht einfügbar (allerdings nur *.babylon - herstellbar durch Extensions der gängigen 3D-Modellierungs-Programme)
Kontra
Es gibt nur den WebGL-Renderer, daher ist eine Darstellung als Fallback nicht möglich.
SceneJS
SceneJS ist das eher unbekannteste der drei Frameworks und spezialisiert sich auf die Darstellung vieler kleiner 3D-Objekte ohne Funktionen wie Reflektionen und Spiegelungen. Ein gutes Einsatzgebiet ist hierfür beispielsweise die Darstellung anatomischer Modelle oder technisch detailreicher Objekte.
Pro
Maus- / Touch-Steuerung Basic implementiert
gut dokumentiert
gute Tutorials mit Beispielen
übersichtliche Konfiguration via JSON
hilfreiche Plugins gibt es direkt im Download-Paket
Kontra
Es gibt nur den WebGL-Renderer, daher ist eine Darstellung als Fallback nicht möglich.
keine Schattierungen eingebaut, jedoch durch Plugins erweiterbar
Fazit
Man kann bei den drei JavaScript-Frameworks eine gute Teilung der Funktionsbereiche sehen. Während sich ThreeJS dazu eignet, ältere Browser mit 3D-Funktionen zu bereichern und eher zur Demonstration von Objekten verwendet werden kann, liefert BabylonJS Funktionen zur User-Interaktion im Bereich der Spieleentwicklung. Für detailgetreue Darstellung komplexer Objekte allerdings eignet sich SceneJS am besten. Alle drei Frameworks haben ihre eigenen Aufgabenbereiche und lassen sich in diesen Bereichen auch gut benutzen – selbst ohne jahrelange Einarbeitungszeit. Die „eierlegende Wollmilchsau“ gibt es allerdings noch nicht.
Aufgrund des häufigen Einsatzes von Google Closure in unseren Projekten ist uns leider aufgefallen, dass es bisher für keines der drei JavaScript-Frameworks Externs gibt. Die Entwickler von BabylonJS und ThreeJS haben außerdem angegeben, dass es auch vorerst keine Externs von ihnen geben wird.
Persönliches Fazit:
„Ich bin mittlerweile ein Fan von BabylonJS und ThreeJS, da diese bisher durch ihre Einfachheit und die performanten Resultate überzeugt haben.“ – Sven
„ThreeJS bietet durch seine von Haus aus implementiere Canvas-Renderer Methode eine gute Möglichkeit, so viele Browser wie möglich zu unterstützen.“ – Davide