WebVR mit A-Frame: Einführung & Grundlagen

Mit A-Frame hat Mozilla ein open-source Framework in Leben gerufen, das die Entwicklung von geräteübergreifenden VR Erlebnissen sehr einfach macht.

Das Ziel ist es die VR-Entwicklung so einfach zu machen, wie das Erstellen von Internetseiten mit HTML ist. So können die vielen Webentwickler*innen dort draussen auch Inhalte und Erlebnisse für das neue Medium erstellen!

Heute sind die Einstiegshürden für die VR-Entwicklung noch sehr hoch. Die bekanntesten Spieleengines machen den Umstieg auf Virtual Reality zwar schon sehr einfach und sind kostenlos zu haben.

Jedoch ist das Einrichten und die Komplexität der Programmierung für viele zu umfangreich. Für die ersten Schritte müssen einige abstrakte Konzepte verstanden werden, die den Einstieg schwierig machen.

Auf der anderen Seite gibt es WebVR und hierfür auch schon einige Templates um den Einstieg einfacher zu machen. Jedoch hinkt hier noch die Kompatibilität mit verschiedenen Geräten hinterher. Außerdem stoßen Einsteiger*innen recht schnell an Grenzen und dann steigen die Anforderungen rasant.

Ein solides open-source Framework

Ein zukunftssicheres und einfaches Framework, unterstützt von einer aktiven Community, fehlte bis vor kurzem noch in der Virtual Reality Entwicklerszene.

A-Frame Internetseite auf aframe.io

Das hat sich mit A-Frame geändert: das open-source Projekt, initiiert und unterstützt von Mozilla, den Machern vom Browser Firefox, hat genau das zum Ziel. Die VR-Entwicklung soll der breiten Masse ermöglicht werden.

A-Frame ist aktuell kompatibel mit dem Oculus DK2 und iPhones im Cardboard (Android Support ist in Arbeit). Zusätzlich wird die VR App in einem regulären Browser dargestellt und kann auch hier – ohne die 3D Immersion – verwendet werden. In Zukunft werden weitere VR-Brillen dazu kommen.

Einfaches Setup & ausbaufähig

Im Hintergrund verwendet A-Frame das 3D Framework Three.js um die 3D Szenen darzustellen. Die Entwicklung ist jedoch extrem vereinfacht: VR Szenen und Erlebnisse können mit wenigen und einfachen HTML Elementen aufgebaut werden.

Und für das Setup ist lediglich notwendig eine einzige JavaScript Datei einzubinden – und schon hast du eine VR-3D-Szene.

Eine intelligente Mischung von Objekten und Komponenten ermöglicht nicht nur statische Szenen, sondern auch interaktive und animierte Erlebnisse. Außerdem ist das Framework von Grund auf so aufgebaut, dass es einfach zu erweitern ist.

Dadurch werden im Laufe der Zeit viele weitere Komponenten in der Community entstehen, die sich Neulinge für ihre Projekte schnappen können.

A-Frame soll über die nächsten Monate verbessert und ausgebaut werden, sodass das Projekt einen reifen Stand erreicht hat, wenn Anfang/Mitte 2016 die ersten großen VR-Brillen auf den Markt kommen.


Beispiele

Zum Beispiel wird aus diesem kurzen Code:


Eine komplette 3D Szene, die VR kompatibel ist:


Interaktionen können ebenfalls innerhalb der HTML Elemente eingerichtet werden. Zum Beispiel kann auf a-mouseenter oder a-mouseleave reagiert werden. Oder Animationen: diese werden per a-animation integriert.


Ein guter Start ins Jahr der Virtual Reality

Das Framework bietet schon jetzt etliche weitere Komponenten an und in Zukunft werden sowohl von Mozilla selbst als auch der Community viele weitere dazu kommen.

Wer Erfahrung in JavaScript hat, kann auch selbst das Framework erweitern und an die eigenen Bedürfnisse oder Anforderungen des Projekts anpassen.

Falls du gerne noch ein Video mit einer kurzen Einführung in das Framework sehen möchtest, das ARVR Magazine hat vor kurzen eines veröffentlicht:

Kurze Einführung in das A-Frame Framework — vom ARVR Magazine

A-Frame ist heute schon beeindruckend umfangreich, aber das Potential, das in diesem Projekt schlummert, ist enorm und ich bin mir sicher, dass es einen wichtigen Teil der VR-Revolution stellen wird.

Der Begriff „responsive Webdesign“ steht für Internetseite die sich dynamisch an das Gerät anpassen. Also dass sich eine Seite auf dem Smartphone oder Tablet an den Kontext anpasst. In Zukunft wird VR ein weiterer Kontext und die Entwicklung einer VR kompatiblen Seite wird die Regel sein.

Tiefer einsteigen

In den kommenden vier Artikeln werden wir tiefer in die Entwicklung mit A-Frame einsteigen und sogar eigene Komponenten für das Framework entwickeln.

Wenn du beim Newsletter angemeldet bist, wirst du automatisch informiert, sobald die neuen Artikel veröffentlicht werden!