Anzeige
Anzeige
How-To
Artikel merken

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

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.

7 Min. Lesezeit
Anzeige
Anzeige

(Grafik: A-Frame Hero)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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].

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige