3D im Browser – Frameworks zur Kapselung von WebGL

Für viele Anwendungen (z.B. Visualisierung von Objekten / Informationen oder Spiele) ist es nützlich bzw. notwendig, 3D-Darstellungen im Browser einzusetzen. Waren hier früher noch spezifische Viewer bzw. PlugIns notwendig, hat sich dies mit der Unterstützung von WebGL in aktuellen Browsern geändert. Heutzutage können durch WebGL komplexe 3D Szenen inkl. Animation direkt im Browser ohne PlugIns dargestellt werden.

Zur einfacheren Entwicklung von entsprechenden Anwendungen wurden bereits eine Vielzahl von Bibliotheken bzw. Frameworks zur Kapselung der WebGL-Schnittstelle entwickelt. Ein sehr umfangreicher Überblick findet sich auf der Seite der Khronos Group, die auch für die Entwicklung von WebGL verantwortlich ist.

Ich möchte 2 Frameworks herausgreifen (ohne, dass dies eine Empfehlung sein sollte, da ich in diesem Bereich ein Laie bin):

X3DOM wurde i.W. vom Fraunhofer IGD in Darmstadt entwickelt und verfolgt den deklarativen Ansatz, d.h. die Verwendung von HTML 5 Tags zur Beschreibung der 3D-Szene. Unter http://www.x3dom.org/?page_id=5 finden sich eine Reihe von Beispielen. Ein sehr einfaches Beispiel (3D Quader mit Innovative-Trends-Textur) ist auch hier abrufbar.

three.js ist ein rel. weit verbreitetes Framework, das einen prozeduralen Ansatz verfolgt, d.h. die wesentlichen Elemente der 3D-Szene werden über Skriptcode erzeugt. Auf der Webseite three.js finden sich sehr beeindruckende Beispiele, unter http://stemkoski.github.io/Three.js/ eher Lernbeispiele (jedoch auch sehr beeindruckend). Für nicht WebGL-fähige Browser besteht bei three.js hier auch noch eine Fallback-Möglichkeit (quasi eine Emulation). Ein sehr einfaches Beispiel (3D Quader mit Innovative-Trends-Textur) ist auch hier abrufbar.

Ob ihr Browser WebGL unterstützt, können Sie beispielsweise hier testen: http://get.webgl.org

Bei neueren Browsern / Geräte sollte dies der Fall sein (auch mobile Geräte, wie z.B. Smartphone/Tablet). Teilweise kann die Unterstützung auch nachträglich durch Änderung von Systemeinstellungen aktiviert werden (einfach im Internet recherchieren).