Open-Source-Framework ermöglicht Entwicklung von VR-Content für das Web

A-Frame – Virtual Reality im Web erstellen

A-Frame – Virtual Reality im Web erstellen

Open-Source-Framework ermöglicht Entwicklung von VR-Content für das Web

A-Frame – Virtual Reality im Web erstellen


Virtual Reality ist dieses Jahr ganz groß im Kommen – und macht damit vielleicht endlich die schon vor Jahren angestellte Vermutung, dass virtuelle Realitäten und die entsprechenden Devices dafür „the next big thing“ sind, wahr. Und es kommt noch besser: mit Frameworks wie A-Frame soll VR-Content nun auch ins Web gebracht werden.

Damit umgeht man, so erklärt Kevin Ngo in einem Blogpost im Mozilla-Entwicklerblog, vor allem das Problem, dass es nur wenige WebGL-Entwickler gibt, die sich auf das Erstellen von hoch-interaktiven 3D-Experiences verstehen. Im Gegensatz dazu gebe es nämlich zahlreiche Webentwickler, Webdesigner und 3D-Künstler, die nur auf das richtige Tool warten, um das Erstellen von VR-Content zu vereinfachen. Das von Mozillas WebVR-Team entwickelte Open-Source-Framework A-Frame könnte genau dieses Tool sein, um 3D- und VR-Experiences für das Web zu entwickeln.

A-Frame oder WebVR?

A-Frame ist nicht das einzige Tool aus dem Hause Mozilla, mit dem VR-Content ins Web gebracht werden soll. Erst Anfang der Woche hat das WebVR-Team Version 1.0 des WebVR-APIs vorgestellt, mit dem Content für Virtual-Reality-Devices online erstellt und im Browser dargestellt werden kann. Vor allem die User Experience bei der Nutzung von VR-Devices dürfte dank zahlreicher Verbesserungen am WebVR-API profitieren und Entwicklern neue Möglichkeiten zur Arbeit mit VR-Content bieten.

Lesen Sie mehr zum Thema VR-Content im Browser dank WebVR

Während es sich bei WebVR um das API handelt, das VR-Content im Browser darstellen kann, ist A-Frame dagegen ein Open-Source-Framework, das WebGL in HTML-Custom-Elements wrapped. Damit ermöglicht A-Frame das Erstellen von 3D-VR-Szenen, die sich WebGL zu Nutze machen, ohne tatsächlich das WebGL-API verwenden zu müssen. Da WebGL in modernen Browsern auf Desktop und Mobile bereits allgegenwärtig ist, funktioniert mit A-Frame erstellter Content plattformübergreifend. Derzeit werden etwa Desktop-Browser, iPhone und Oculus-Rift-Headsets von dem Framework unterstützt.

Nutzung von A-Frame

Um Szenen mit A-Frame zu erstellen, wird mit deklarativem HTML gearbeitet. Mit ein wenig Vanilla-JavaScript können diese dann entsprechend manipuliert werden; ebenso lassen sich JavaScript-Libraries und Frameworks wie etwa d3 oder React wie gewohnt weiter nutzen. Mit A-Frame erstellte Szenen können sowohl auf dem Desktop mit der Oculus Rift oder auf dem Smartphone mit einem Google-Cardboard-Holder angesehen werden. Statt als VR-Szene können sie aber auch als normale 3D-Szene betrachtet werden.

Der nachfolgende Code zeigt wie eine einfache Szene aufgebaut ist:

See the Pen Hello A-Frame – 2 by MozVR (@mozvr) on CodePen.

Interessant ist allerdings vor allem, was unter dem Markup liegt – nämlich ein besonders flexibles und erweiterbares 3D-Framework, das das Entity-Component-System (ECS)-Pattern zum DOM bringt: three.js. Dazu erklärt Ngo:

A-Frame is built as an abstraction layer on top of three.js and is extensible enough to do just about anything that three.js can do.

Das ECS-Pattern wird zum Beispiel in der Spieleentwicklung genutzt; A-Frame übernimmt darum auch bestehende Pattern aus der Gaming-Industrie. Wie das genau funktioniert, beschreibt Ngo detaillierter in seinem Blogpost; dort findet sich darüber hinaus auch ein ausführliches Tutorial zum Erstellen von interaktiven Szenen mit A-Frame.

Mehr Informationen zu dem Framework bietet auch die Projekt-Website sowie das entsprechende GitHub-Repository, in dem A-Frame auch zum Download zur Verfügung steht.

Name A-Frame
Hersteller Mozilla
Projektwebsite https://aframe.io/
GitHub https://github.com/aframevr/aframe/

Aufmacherbild: Vector Frame . Vintage Frame . Grunge Frame . Black Frame . Border Frame . Frame Design . von Shutterstock / Urheberrecht: Miloje

Stefanie Schäfers studierte zunächst Anglistik in Marburg und machte anschließend ihren Masterabschluss im Bereich Creative and Cultural Business an der Glasgow Caledonian University in Glasgow, Schottland. Seit August 2014 war sie als Redakteurin in der Redaktion des PHP Magazins und des Entwickler Magazins bei Software & Support Media tätig. Zuvor absolvierte sie bereits mehrere Praktika in Online-Redaktionen und Verlagen.