Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 46

VR-Anwendungen mit Webtechnologien erstellen: Der Virtual-Reality-Baukasten für das Web

(Grafik: A-Frame Hero)

Virtual-Reality-Anwendungen entwickeln leicht gemacht. Mit der WebVR-API und dem Framework „A-Frame“ gibt Mozilla Entwicklern simple Werkzeuge an die Hand um VR-Anwendungen fürs Web zu erstellen. Ein Einblick.

Webtechnologien haben einen großen Vorteil. Webentwickler können mit ihnen Applikationen entwickeln, ohne plattformspezifische Anpassungen vornehmen zu müssen. Bisher mussten sich all jene Entwickler, die sich für die Erstellung von Virtual-Reality-Anwendungen interessierten, in die Arbeit mit Gaming-Enginges wie Unity oder Unreal einarbeiten – kein einfaches Unterfangen.

Doch gibt es mittlerweile eine Alternative: Die WebVR-Schnittstelle erlaubt die Kommunikation zwischen Javascript und VR-Headsets und ermöglicht Virtual Reality direkt im Browser – auf Basis bekannter Webtechnologien. Der WebVR Standard hat in den letzten Monaten so große Sprünge gemacht, dass er noch Ende diesen Jahres in Firefox standardmäßig mitgeliefert wird und Chrome wird Anfang 2018 nachziehen. Daher ist jetzt der perfekte Zeitpunkt, um sich mit der Technologie auseinanderzusetzen. Und zwar nicht nur, weil es dabei um ein unglaublich spannendes und zukunftsweisendes Medium geht – sondern auch, um für Kundenanfragen zu VR-Projekten gewappnet zu sein.

WebVR mit A-Frame

Um die Arbeit mit WebVR deutlich zu vereinfachen, hat Mozilla das Framework A-Frame [1] entwickelt. Es bietet eine simple Schnittstelle, eine klare HTML-Syntax sowie ein flexibles und deklaratives Objekt-Komponenten-System [2]. Unter der Haube von A-Frame läuft „three.js“, eine JS-Bibliothek, die den Einsatz von WebGL (also 2D/3D-Grafiken im Browser) vereinfacht und ideal für das Zeichnen virtueller Welten ist – denn das bleibt nach wie vor den Entwicklern überlassen.

Der hohe Aufwand bei der Verwendung von WebVR und WebGL entfällt damit. Bereits mit einer einzigen Zeile Code – <a-scene></a-scene> – steht die Basis für ein VR-Projekt. Mit dieser Grundlage ist es möglich, ein erstes VR-Projekt in nur wenigen Zeilen HTML-Code zu programmieren und durch eigene Komponenten und Skripte zu erweitern. Durch die einfache Schnittstelle eignet sich A-Frame aber auch, um schnell VR-Prototypen zu erstellen, verschiedene UIs und Szenen auszuprobieren und zu optimieren.

Entwickelt mit dieser Web-Technologie eure eigenen VR-Anwendungen.

Doch auch komplexe und dynamische WebVR-Anwendungen unterstützt A-Frame, indem es den Code sauber in einzelne Komponenten aufteilt. Diese können Entwickler in ihren künftigen Projekten einfach wieder verwenden. Zudem gibt es online eine große Auswahl an Komponenten, die Entwickler aus aller Welt kostenlos zur Verfügung stellen. Je nach Projekt lässt sich somit ein Teil der Funktionen oder sogar auch alles über die Kombination passender Komponenten bewerkstelligen – also ohne eine Zeile Javascript-Code schreiben zu müssen.

Da A-Frame auf dem HTML-DOM basiert, können Entwickler die 3D-VR-Szenen mit getAttribute, setAttribute und weiteren Funktionen manipulieren – so wie es in anderen Web-Projekten üblich ist. Außerdem ist es ihnen möglich, A-Frame mit den meisten JS-Frameworks und -Libraries wie jQuery, React, Redux, Vue.js, d3, Meteor oder Angular zu kombinieren.

Wer schon einmal vom beliebten Multi-User-VR-Erlebnis „AltspaceVR“ gehört hat, wird sich freuen, dass die App auch A-Frame unterstützt. So kann man Mini-Spiele und -Apps programmieren, die mehrere Anwender in einem virtuellen Raum verwenden. Doch Multiplayer ist nicht nur über AltspaceVR möglich. Da A-Frame auf bekannten Web-Technologien aufbaut, können Entwickler auch ihre eigenen Multiuser-WebVR-Projekte über Peer-to-peer, die "Networked-Aframe"*Erweiterung oder Services wie Firebase umsetzen.

Was lange Zeit ein Nachteil von WebVR war – die schlechte Performance – ist seit Kurzem kein Problem mehr. Eine clevere Nutzung der nativen APIs ermöglicht die notwendigen 90 Bilder pro Sekunde. A-Frame stellt somit sicher, dass eine App auf jedem modernen Gerät und VR-Headset funktioniert: beispielsweise auf der HTC Vive (inklusive Motion Controller), der Oculus Rift oder auf einem simplen Google Cardboard.

Wie wäre es mit einer Reise zum Mars? Virtuell geht das bereits mit der WebVR-Applikation der Washington Post, die aufwendig mit A-Frame entwickelt worden ist. (Foto: The Washington Post)

WebVR in der Praxis

Die Anwendungsmöglichkeiten für WebVR sind umfangreich: Angefangen bei einfachen 360-Grad-Bild- oder -Video-Playern über interaktive 360-Grad-Anwendungen bis hin zu dynamisch gerenderten VR-Spielen oder -Apps ist im Web mittlerweile so ziemlich alles möglich.

Beindruckend ist zum Beispiel der Nachbau der beliebten VR-App „Tilt Brush“ von Google, mit der User im dreidimensionalen Raum malen können. Für das Web mit A-Frame nachgebaut steht sie nun als Open-Source-WebVR-Anwendung online zur Verfügung. Auch einige große Organisationen setzen bereits auf A-Frame. Zum Beispiel die Menschenrechtsorganisation Amnesty International UK, die mit ihrem VR-Erlebnis „360 Syria“ [3] auf die kritische Lage in Syrien hinweist.

Die US-amerikanische Zeitung „The Washington Post“ bietet auf ihrer Website hingegen eine interaktive 3D-Reise zum Mars [4]. Online gibt es ausführliche Listen mit vielen weiteren, unterschiedlichen A-Frame-Projekten, viele davon Open Source. Die WebVR-Anwendungen lassen sich per A-Frame zudem einfach mit Web-APIs von beispielsweise Twitter oder Facebook kombinieren und somit anreichern.

A-Frame-Grundlagen in fünf Minuten

Um A-Frame zu nutzen, benötigen Entwickler lediglich eine Javascript-Datei. Die Projektseite bietet außerdem ein Starter-Kit [5], das die ideale Grundlage für die ersten Schritte ist. Das folgende, einfache Beispiel zeigt die Basisstruktur.

Die grundlegende Struktur

<html>
  <head><script xsrc="https://aframe.io/releases/latest/aframe.min.js"></script></head>
  <body>
    <a-scene>
      <a-box color="#6173F4" opacity="0.8" depth="2"></a-box>
      <a-sphere radius="2" xsrc="texture.png" position="1 1 0"></a-sphere>
     <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Listing 1

Der <body> des HTML-Dokuments zeigt, wie einfach das Framework zu nutzen ist. Mit regulären HTML-Tags kann man hier eine 3D-Szene (<a-scene>) mit einem Himmel und zwei Objekten anlegen. Klassische HTML-Attribute übergeben den jeweiligen Elementen unterschiedliche Eigenschaften. So erhält die Box beispielsweise eine Transparenz (opacity="0.8") und die Kugel eine Textur (src="texture.png").

Wer dieses [6] oder auch die folgenden Beispiele ausprobieren möchte, kann bei CodePen [7] ganz einfach experimentieren. Die CodePen-Übungen lassen sich übrigens auch direkt auf dem Smartphone öffnen und im Cardboard anzeigen. Alle hier vorgestellten Code-Beispiele gibt es auch in vollem Umfang zum Download [8].

Große Freiheit bei Objekten und Komponenten

Aus der Perspektive des Objekt-Komponenten-Systems [9] betrachtet, sind die vier Tags „scene“, „box“, „sphere“ und „sky“ Objekte und die jeweiligen Attribute Komponenten. Die große Flexibilität und Leistung des Frameworks liegt darin, dass sich die Objekte und Komponenten unabhängig voneinander programmieren lassen. So können Entwickler beispielsweise eine ganz neue Komponente programmieren und auf bestehende Objekte anwenden, ohne sie anpassen zu müssen. Das führt zu einem modularen Baukastensystem, bei dem man Teile hinzufügen und wegnehmen kann, ohne in irgendwelche Abhängigkeiten zu geraten. Spaghetticode adé!

Neben den vier genannten Objekten bietet A-Frame weitere praktische Objekte, wie Bilder, Videos, Lichter, Sounds, 3D-Modelle, Animationen und viele mehr. Sie alle lassen sich mit jeweils einer Zeile Code integrieren. Um einen einfachen VR-Player für ein 360-Grad-Video zu erstellen, reicht zum Beispiel folgende Zeile:

360-Grad-Video erstellen

<a-videosphere xsrc="aframe-rockt.mp4"></a-videosphere>

Listing 2

Mit Hilfe der vielen mitgelieferten Komponenten können Entwickler alle Objekte anpassen und um Interaktivität erweitern.

360-Grad-Gallerie in nur 35 Zeilen: Das ist möglich!

Das erste Praxisbeispiel ist eine Gallerie mit mehreren, sich drehenden Kugeln, die unterschiedliche 360-Grad-Fotos zeigen. Ein Klick auf eine der Kugeln zeigt das entsprechende Foto in einer 360-Grad-Ansicht. Die folgende Zeile erstellt zunächst einen leeren Himmel, der sich später dynamisch ändert:

Leeren Himmel erstellen

<a-sky id="skybox"></a-sky>

Listing 3

Damit sich die Nutzer umsehen und mit den Kugeln interagieren können, benötigt die Galerie eine Kamera mit der Komponente „look-controls“ und einem Cursor. Letzterer verändert sich, wenn ein Nutzer über ein interaktives Element fährt und kümmert sich um die notwendigen Events, wenn dieser klickt.

Interaktion ergänzen

<a-entity camera look-controls>
  <a-entity cursor="fuse: false"
                position="0 0 -1"
                 geometry="primitive: ring; radiusInner: 0.05; radiusOuter: .07"
                 material="color: cyan; shader: flat">
    <a-animation attribute="scale" begin="mouseenter" to="1.25 1.25 1.25" dur="200"></a-animation>
    <a-animation attribute="scale" begin="mouseleave" to="1 1 1" dur="200"></a-animation>
  </a-entity>
</a-entity>

Listing 4

Das interaktive A-Frame Mini-Projekt im Cardboard-Modus: Das modulare Framework erlaubt es in wenigen Schritten, interaktive VR-Anwendungen fürs Web zu gestalten.
Der Code definiert also ein leeres Objekt (ein so genanntes „a-entity“) für die Kamera und den Cursor. Für Letzteren setzt er eine Position und wählt dessen Geometrie und Material aus. Außerdem definiert er für ihn zwei Animationen, die bei den Events „mouseenter“ (der Cursor wird größer) und „mouseleave“ ablaufen.

Nun geht es an die interaktive Fotokugeln. Dazu erhält das „a-sphere“-Objekt eine Position und Textur. Außerdem soll sich die Kugel konstant im Kreis drehen und im Yo-Yo-Effekt skalieren, wenn der Cursor über ihr liegt. Ein Beispiel, wie Programmierer mehrere Fotokugeln nach dem „Don’t Repeat Yourself“-Prinzip programmieren können, liefert das Code-Paket des fertigen Projekts.

Fotokugel definieren

<a-sphere sky-on-click position="0 0 -5" xsrc="360photo.jpg">
  <a-animation attribute="rotation" dur="10000" easing="linear" to="0 360 0" repeat="indefinite"></a-animation>
  <a-animation attribute="scale" begin="mouseenter" end="mouseleave" dur="300" to="1.1 1.1 1.1" direction="alternate-reverse" repeat="indefinite"></a-animation>
</a-sphere>

Listing 5

Die ungewöhnliche Komponente „sky-on-click“ im Code oben liefert die Funktionalität – hier also das „Teleportieren“ in die 360-Foto-Welt der Kugel. Diese lässt sich selbst programmieren.

Teleportieren programmieren

AFRAME.registerComponent('sky-on-click', {
  init: function () {
    this.el.addEventListener('click', function () {
      var src = this.getAttribute('src');
      document.getElementById('skybox').setAttribute('src', src);
    });
  }
});

Listing 6

Dazu registrieren Entwickler die neue Komponente und sorgen dafür, dass sie auf das „click“-Event reagiert, das der Cursor bei einem Klick (Desktop) oder Tap (Mobile) auslöst. Dabei lässt sich die Textur der Fotokugel wie in diesem Beispiel auf das Himmel-Objekt übertragen.

Damit lässt sich die Szene am Desktop oder im VR-Headset ausprobieren: Der Cursor und die Fotokugel reagieren aufeinander. Und per Klick oder Touch steht der Nutzer mitten in einem der 360-Grad-Fotos.

Hilfreiche Werkzeuge

Zusätzlich stehen für die WebVR-Entwicklung nützliche Werkzeuge zur Verfügung: Der „WebVR Emulator“ simuliert beispielsweise VR-Hardware im A-Frame-Projekt, ohne dass diese tatsächlich vorhanden sein muss. Mit dem „A-Frame Inspector“ können Programmierer dagegen ihre Projekte durchleuchten, ähnlich wie dies mit den bekannten „Developer Tools“ möglich ist. Das hilft bei der Fehlersuche, aber auch, um den Aufbau anderer VR-Projekte zu analysieren.

Fazit

Das alles ist nur ein kleiner Vorgeschmack auf eine ganze Bandbreite von Funktionen und Helferchen, die A-Frame zur Verfügung stellt. Doch die wahre Leistung liegt in seiner Ausbaufähigkeit. In den kommenden Monaten und Jahren wird die Zahl der frei verfügbaren A-Frame-Erweiterungen rapide wachsen. Und mit Mozilla als treibender Kraft hinter dem Projekt ist auch die Langlebigkeit des Frameworks sichergestellt.

Für alle Web-Entwickler und -Designer ist jetzt der ideale Zeitpunkt, um in die Entwicklung von Virtual-Reality-Web-Anwendungen einzusteigen. Es ist noch früh genug, um zu den „Early Adopters“ zu gehören und sich den Vorsprung in diesem neuen Medium zu sichern.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Remo

Hey, hier haben ein paar Reiseblogger auch mit WebVR eine coole Möglichkeit zum Reisen gebaut.
https://360.travelhackers.ch

vrjump

Hallo zusammen,

meldet euch bei Detailfragen zu A-FRAME oder VR allgemein gerne bei mir – hier in den Kommentaren oder per Mail!

Wir sehen uns auf der anderen Seite! []-)
Ruben

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden