A-Frame macht virtuelle Realitäten lebendig

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

A-Frame: JavaScript einbinden und erste 3D-Welt bauen

Zunächst einmal musst du die JavaScript-Datei von A-Frame in deinem HTML-Head einbinden. Die komprimierte Datei ist knapp 700 Kilobyte groß und beinhaltet alles, was du benötigst. Andere Bibliotheken, wie beispielsweise jQuery, sind nicht notwendig.

Anschließend beginnst du innerhalb deines HTML-Bodys eine Szenerie zu erschaffen. Da A-Frame seine eigene Auszeichnungssprache – ähnlich wie HTML – mitbringt, ist das Erstellen deiner ersten 3D-Welt spielend einfach. Zunächst einmal zeichnest du eine neue Szenerie mit dem Element „<a-scene>“ aus. Darin platzierst du beliebige 3D-Objekte wie Quader („<a-cube>“), Kugeln („<a-sphere>“) oder Zylinder („<a-cylinder>“).

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>

Im Beispiel werden in einer Szenerie eine Kugel, ein Quader sowie ein Zylinder platziert. Über Attribute definierst du die Größe, Farbe, Position und Drehung des Objektes. Der Wert für „position“ erwartet drei Werte, um ein Objekt auf der X-, Y-, und Z-Achse im Raum platzieren zu können. „rotation“ erwartet ebenfalls drei Werte, welche die Winkel der Drehung auf den drei Achsen definieren.

Einfaches Beispiel mit Kugel, Quader und Zylinder

Für die Größe eines Objektes stehen dir je nach Typ unterschiedliche Attribute zur Verfügung. Bei „<a-sphere>“ muss lediglich ein Radius („radius“) angegeben werden. „<a-cube>“ erwartet Angaben für die drei Kantenlängen („width“, „height“ und „depth“). Beim Zylinder gibst du einen Radius, sowie eine Höhe an („radius“ und „height“).

VR mit Smartphone, Tablet und Google Cardboard erleben

Damit der Browser die virtuelle Realität auch darstellen kann, setzt A-Frame seine spezielle Auszeichnungssprache per HTML5-Canvas um. Aus dem A-Frame-Quelltext im Beispiel wird also eine Zeichenfläche, in der das Framework mit den JavaScript-Zeichenmethoden die Szenerie ausgibt.

Wie es sich für eine echte virtuelle Welt gehört, ist die Dreidimensionalität von A-Frame nicht statisch, sondern dynamisch. Auf einem Desktop-Rechner kannst du per Maus die Perspektive der Szenerie verändern. Wirklich interessant wird es allerdings, wenn du dir deine Szenerie mit deinem Smartphone oder Tablet anschaust. Denn A-Frame interpretiert die Orientierung deines Mobilgerätes und verändert analog dazu die Perspektive der Szenerie.

Darstellung für Google Cardboard auf einem Smartphone

Für echten 3D-Genuss kannst du auch den VR-Modus in Kombination mit Google-Cardboard nutzen. Schaust du dir eine mit A-Frame erstellte Szenerie mit einem Mobilgerät an, wechselt du über ein Icon in Form einer Brille in den VR-Modus. Dann stellt A-Frame die Szenerie auf einem geteilten Display dar. Du siehst links und rechts zweimal dieselbe Szenerie aus leicht unterschiedlichen Blickwinkeln. Setzt du dein Smartphone in Google Cardboard ein, erlebst du eine echte virtuelle Realität.

Auch mit Oculus Rift funktioniert A-Frame. Hierzu müssen derzeit aber noch experimentelle Versionen von Firefox oder Chrome installiert sein, da die derzeitigen Browser die notwendige Unterstützung von WebVR noch nicht mitliefern. In jedem Fall muss dein Browser WebGL unterstützen, um A-Frame darstellen zu können.

Animationen hinzufügen

Per „<a-animation>“ fügst du einem Objekt auf einfache Weise eine Animation hinzu. Dazu wird „<a-animation>“ als Kindelement jenes Objektes ausgezeichnet, welches animiert werden soll.

<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9">
  <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation>
</a-cube>

Im Beispiel dreht sich ein Quader um 360 Grad auf der Y-Achse. Dazu wird per „attribute“ die Art der Animation definiert und per „to“ das Ziel der Animation. „dur“ gibt die Länge an und „fill“ legt fest, was am Ende der Animation geschehen soll. Der Wert „forwards“ sorgt dafür, dass die Animation nicht wieder auf den Anfang zurückgesetzt wird. Per „repeat“ stellst du die Wiederholungen ein.

Eigene Kameras, Licht, Interaktivität und Materialien

A-Frame kann noch sehr viel mehr, als ich hier vorstelle. Auf Wunsch fügst du zum Beispiel auch eine eigene Kamera und eigenes Licht hinzu. Du hast die Möglichkeit, interaktive Elemente zu erstellen und Materialien hinzuzufügen. Leider ist die Dokumentation von A-Frame noch nicht vollständig. Einige der Möglichkeiten finden sich dort noch nicht wieder.

360-Grad-Panorama als VR

Auch Bilder und Videos kannst du einbinden. So erstellst du beispielsweise ein 360-Grad-Panorama als virtuelle Realität.

Fazit

A-Frame ist ein interessantes Framework für einfache, aber auch durchaus komplere VR-Welten. Die Unterstützung von Mobilgeräten sowie Oculus Rift oder Google Cardboard ermöglicht erlebbare 3D-Szenerien. Dazu ist die Handhabe von A-Frame denkbar einfach. Während du bei anderen 3D-Frameworks per JavaScript programmieren musst, läuft hier alles sehr einfach über eine eigene Auszeichnungssprache.

Außerdem gibt es zahlreiche einfache und komplexe Beispiele, die dir die Möglichkeiten von A-Frame sehr anschaulich darstellen. A-Frame steht unter der bekannten MIT-Lizenz. Eine private sowie kommerzielle Nutzung ist somit möglich.

(dpe)