0

Mozillas neuer Standard für Web-VR: A-Frame

von Matthias Bastian17. Dezember 2015

Mozilla positioniert sich früh zum Thema Web-VR, also der Idee, Webseiten speziell für Virtual Reality zu entwerfen. Jetzt veröffentlichen die Browser-Spezialisten ‘A-Frame’, eine Open-Source-Entwicklungsumgebung, die den Entwicklungsprozess deutlich vereinfachen soll. Es braucht nur grundlegende Kenntnisse in HTML und wenige Zeilen zusätzlichen Code, bis die erste eigene Web-VR-Seite steht.

Dabei denkt Mozilla responsive Web-VR-Design vom ersten Tag an mit. Denn mit der aktuellen Codebasis lassen sich VR-Erlebnisse kreieren, die mit allen Browser-Variationen und mit Oculus Rift DK2 kompatibel sind. Unterstützung für weitere VR-Brillen sowie Android soll in zukünftigen Versionen der Entwicklungsumgebung folgen. Um Entwicklern den Einstieg zu erleichtern, bietet Mozilla eine Reihe an vorgefertigten Elementen für Geometrie, Interfaces oder Animationen an. Ziel von A-Frame ist es, die deutlich komplexere Programmierung für WebGL zu umgehen und die VR-Entwicklung mit einfachem HTML möglich zu machen. Die Basis ist der Import des A-Frame Javascripts in die HTML-Datei.

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>

Anschließend können einfache Objekte innerhalb des a-scene-Tags im Body der HTML-Datei hinzugefügt und manipuliert werden, in diesem Beispiel ist es ein 3D-Würfel.

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cube></a-cube>
    </a-scene>
  </body>
</html>

Es reicht bereits, die wenigen Zeilen Code in einer HTML-Datei zu speichern und sie anschließend im Browser zu starten, um das Objekt in Virtual Reality anzuzeigen. Die Seite erscheint zwar zuerst normal in einer 2D-Darstellung im Browser, aber mit einem Klick unten rechts auf das VR-Brillen-Symbol wechselt die Ansicht zu Oculus Rift. Dafür braucht es allerdings einen Web-VR kompatiblen Browser wie Firefox Nightly mit Web-VR Plugin oder Chromium. Bei Chromium muss der VR-Modus unter chrome://flags/ erst noch aktiviert werden. Die Qualität der Darstellung und die Bildwiederholrate sind zwar noch nicht optimal, trotzdem ist der Vorgang schon jetzt außerordentlich einfach und schnell kann man deutlich komplexere Szenen bauen. Zahlreiche Beispiel-Templates stellt Mozilla inklusive der Codebasis hier zur Verfügung. Einen FAQ und mehr Informationen zu A-Frame gibt es auf der offiziellen Webseite.

Web-VR-Seiten auch für Laien?

MozVR heißt die VR-Initiative von Mozilla; dort ist Josh Carpenter für das Produktdesign verantwortlich. Er wünscht sich zukünftig “Webwelten statt Webseiten” und ist von der transformativen Wirkung von Virtual Reality auf das heutige Internet überzeugt. Insbesondere seit den ersten HTC Vive Demos betrachtet er Virtual Reality als neue Ära in der Interaktion zwischen Mensch und Computer. Er traut dem neuen Medium auf lange Sicht zu, unser Nutzungsverhalten ähnlich nachhaltig zu verändern wie das erste iPhone.

Falls wir jemals ein Metaverse wie aus der Science-Fiction-Literatur haben wollen, dann glauben wir, muss es auf dem Open Web aufgebaut sein. Josh Carpenter, Produktentwickler bei Mozilla

Die Gestaltung des heutigen Webs war lange Zeit ein Privileg von einigen wenigen Experten, bevor die Entwicklung in den sozialen Medien sowie von einfachen User-Interfaces für Webseiten-Bau und -Gestaltung den Markt öffneten und dafür sorgten, dass heute jeder Internet-Nutzer eigene Plattformen im Netz erschaffen und dort publizieren kann. Dieser Prozess benötigte allerdings mehr als eine Dekade. Lernt man aus dieser langwierigen Entwicklung, könnte man Web-VR von Anfang an so einfach nutzbar konzipieren, dass auch Laien mit geringen oder sogar ohne Programmierkenntnisse VR-Inhalte im Web publizieren können. Offenbar plant das auch Mozilla.

“A-Frame ist für eine flache Lernkurve optimiert und kann sowohl von Einsteigern als auch erfahrenen Nutzern eingesetzt werden. Einsteiger starten mit einfachen, leicht zu verstehenden Elementen wie Würfeln, Videos, Modellen oder einem Himmel. Fortgeschrittene Nutzer können Javascript einsetzen, um dynamische und interaktive Szenen zu entwerfen […].” Mozilla

| VIA: Road to VR
| FEATURED IMAGE: Mozilla