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