WebVR spielt im Bereich Virtual Reality eine immer größer werdende Rolle. Die Idee von WebVR ist eigentlich auch ganz simpel: Es geht darum, Virtual Reality in den Browser zu bringen und somit sehr einfach zugänglich zu machen. Zuletzt hat unsere Kolumnistin Tina Sauerländer in ihrer Kolumne zur Laval Virtual Konferenz gezeigt, was WebVR leisten kann und wofür man es neben hübschen Experiences im Browser noch einsetzen kann. In diesem Artikel erklären wir euch nicht nur was WebVR ist. Vielmehr zeigen wir euch, wie ihr mit A-Frame selbst VR-Anwendungen entwickeln könnt.

Was ist WebVR?

Bevor wir uns anschauen, wie ihr selbst VR-Anwendungen für den Browser erstellt, werfen wir zunächst einen Blick auf WebVR selbst. WebVR ist im Grunde nichts weiter, als eine Programmierschnittstelle (API) in Browsern. Über diese Schnittstelle kann man nun mit der Programmiersprache JavaScript VR-Anwendungen entwickeln. Geschaffen wurde diese Schnittstelle ursprünglich von Mozilla und wird seitdem gemeinsam von Mozilla und Google weiterentwickelt. 

Was ist so toll an WebVR?

WebVR ist ein wichtiger Schritt dahingehend, Virtual Reality zu verbreiten. Denn momentan ist VR nach wie vor eher ein Nischenphänomen. Die meisten Anwendungen sind ziemlich speziell und richten sich an eine entsprechend spezielle Zielgruppe. Geräte wie die Oculus Quest oder Samsung Gear VR machen allerdings die Hardware, die für VR benötigt wird, zunehmend zugänglicher. Sie wird nicht nur erschwinglicher, sondern mittels Plug-and-Play auch um einiges zugänglicher. Die Möglichkeit, VR-Anwendungen nun auch über das Internet verbreiten zu können, macht die Technologie ebenfalls sehr viel zugänglicher für die breite Masse. 

Ein sehr gutes Beispiel sind hier digitale Konferenzen, die während der Coronapandemie beinahe zur Norm geworden sind. Über WebVR können diese deutlich immersiver abgehalten werden. Gleichzeitig schließen diese Konferenzen aber Teilnehmer ohne VR-Headset nicht aus. Denn WebVR-Anwendungen lassen sich auch ohne Headset ausführen, dann eben über den Bildschirm. 

Was ist A-Frame?

Mit der WebVR-Schnittstelle haben Entwickler also die Möglichkeit, VR-Anwendungen im Browser zu entwickeln. Hinzu kommt die Möglichkeit, mittels WebGL 3D-Anwendungen zu entwickeln. Da die Programmierung mit WebVR und WebGL aber ziemlich unzugänglich ist, hat Mozilla ein Framework erstellt, das die Programmierung von WebVR sehr stark vereinfacht. Ein Framework ist übrigens eine ganze Sammlung von verschiedenen Funktionen, welche die Entwickler so nicht mehr selbst schreiben müssen. 

Dieses Framework heißt A-Frame. Es basiert zum einen auf WebVR und zum anderen auf Three.js. Letzteres ist wiederum ein Framework, um die Entwicklung mit WebGL stark zu vereinfachen. Ich weiß, das klingt etwas kompliziert. Deshalb nochmal einfach: A-Frame ist eigentlich alles, was ihr braucht, um eine VR-Anwendung für den Browser zu entwickeln. 

Was ist mit A-Frame möglich?

A-Frame ermöglicht nahezu jede Art der VR-Anwendung im Browser. Allerdings ist das ganze natürlich etwas durch die mangelnde Performance begrenzt. Soll heißen: Native VR-Anwendungen, die ihr herunterladet und installiert, werden etwas besser auf euren Geräten laufen, als im Browser. 

Was mit WebVR und vor allem A-Frame möglich ist, zeigen wir euch am Beispiel einiger sehr cooler VR-Anwendungen:

Hubs von Mozilla

Hubs ist eine von Mozilla selbst entwickelte A-Frame-Anwendung, in der mehrere User einen Raum betreten und dort miteinander interagieren und spielen können. In Hubs könnt ihr euch via VR-Device oder per Screen treffen, spielen oder einfach unterhalten.

MathworldVR

In MathworldVR könnt ihr euch mathematische Funktionen anschauen. Das allerdings nicht bloß in 2D oder in 3D auf dem Screen, sondern eben in VR. Das schafft gleich einen ganz anderen Zugang zur Mathematik!

Moonrider

Moonrider ist eines der Beispiele direkt von A-Frame selbst. Hier könnt ihr in VR einer entspannten Fahrt durchs Weltall zuschauen, während ihr Musik hört.

Welche Browser werden unterstützt?

• Supermedium 
• Firefox
• Oculus Browser
• Samsung Internet
• Microsoft Edge
• Chrome
• Exokit 
• Safari for iOS
• Chrome for Android
• Firefox for iOS
• UC Browser

Welche Geräte werden unterstützt?

• HTC Vive (Provisionslink)
• Oculus Rift
• Oculus Quest
• Oculus Go
• Google Daydream
• Samsung GearVR (Provisionslink)
• Vive Focus

Wie funktioniert A-Frame?

Im Zentrum von A-Frame steht das sogenannte Entity-Component-System (ECS). Bevor ihr euch an das Framework heran wagt, solltet ihr dieses ECS verstanden haben. Der Ansatz ist eigentlich ganz simpel. Ihr habt eine “Entity”, die aus mehreren “Components” zusammengesetzt ist. Zum Beispiel könnte in eurer WebVR-Anwendung eine Box enthalten sein. Diese Entity “Box” setzt sich dabei aus mehreren Komponenten zusammen, wie der Form, der Position und dem Material. Manche dieser Entiies hat A-Frame für euch schon vordefiniert. Diese Primitive sind in den meisten 3D-Frameworks und Programmen schon angelegt, da sie häufig zum Einsatz kommen. Dazu gehören beispielsweise die Box, die Sphere, der Sky, die Plane und der Cylinder. In A-Frame könnt ihr euch auch eigene Primitive erstellen und diese als solche registrieren. Das ist besonders dann praktisch, wenn ihr vorhabt, ein bestimmtes Objekt mehrfach zu verwenden und es nicht immer neu schreiben wollt. 

A-Frame baut auf HTML auf. So könnt ihr die einzelnen Entities anlegen, wie ein HTML-Element. Das sieht dann im Falle einer Box in etwa so aus:

<a-entity geometry=“primitive: box; width: 3″ material=“color: red“></a-entity>

Programmieren mit A-Frame lernen

In diesem Artikel haben wir euch einen Überblick darüber gegeben, was A-Frame ist, was es kann und wie es im groben Funktioniert. Das ist natürlich nicht ausreichend, wenn ihr selbst mit WebVR mit A-Frame programmieren wollt. Deswegen geben wir euch in diesem Absatz einige weiterführende Tutorials und Links, mit denen ihr euch wunderbar in dieses tolle und spannende Framework einarbeiten könnt. 

Vorwissen: HTML und JavaScript

Solltet ihr noch nie etwas mit Webentwicklung zu tun gehabt haben, ist es nicht unbedingt ratsam, gleich mit A-Frame einzusteigen. Macht euch im Vorfeld am besten mit HTML und JavaScript vertraut. HTML bestimmt im Web die Struktur einer Website und bildet auch die Basis für A-Frame. JavaScript hingegen ermöglicht Programmlogiken und Interaktivität auf Websites. Der dritte Pfeiler der Webentwicklung – CSS – ist für A-Frame nicht so entscheidend. Mit CSS bestimmt ihr das Aussehen einer Website. Das ist für WebVR aber Nebensache. Hier findet ihr einen Artikel, der euch erklärt, wie ihr euch mit Webentwicklung vertraut macht. 

Die A-Frame-Dokumentation

Die zuverlässigste Quelle, um euch in A-Frame reinzufuchsen, ist wohl die offizielle Dokumentation von Mozilla. Hier findet ihr sinnvoll aufgegliedert all das, was ihr zu dem WebVR-Framework wissen müsst. Angefangen mit der Installation (die lächerlich einfach ist), über die grundlegenden Konzepte, bis hin zu etwas konkreteren Szenarien. Mir helfen für das Lernen solcher Frameworks immer besonders praktische Beispiele, anhand derer ich die einzelnen Dinge während des Machens erlernen kann. Hier findet ihr konkrete Guides von A-Frame selbst, mit denen ihr die Anfänge geführt und erklärt durchlaufen könnt. 

Ausführliches A-Frame Tutorial auf YouTube

Der YouTuber Danilo Pasquariello hat auf seinem Kanal eine sehr umfassende und gute Tutorial-Reihe gemacht. Darin erklärt er euch alles zu A-Frame anhand konkreter Beispiele und schreibt den Code direkt mit euch zusammen. Ihr könnt also beim Schauen der Videos direkt mitprogrammieren. Allerdings ist die Tutorial-Reihe auf Englisch und durch den starken Akzent von Pasquariello manchmal etwas schwer zu verstehen. Mit der Zeit hört man sich aber gut rein.

Loslegen mit A-Frame

Wie bei fast allen Technologien, heißt es irgendwann einfach “Anfangen”: Habt ihr diesen Artikel gelesen, sollte euch klar sein, was A-Frame ist, wie es in etwa funktioniert und was ihr damit anstellen könnt. Nun heißt es kreativ werden und eigene VR-Anwendungen für den Browser entwickeln. Wenn ihr dabei die offizielle Dokumentation von A-Frame zurate zieht, solltet ihr euch mirnichtsdirnichts in das Framework eingearbeitet haben und könnt hoffentlich schon bald spannende und kreative Projekte umsetzen.

 

Dieser Text ist Teil der Netzpiloten Creative Tech Season. In dieser widmen wir uns von Oktober bis Dezember den kreativen Möglichkeiten, die uns Technologien bieten und geben euch Inspiration, Anleitungen, Tipps und Tricks für eigene Projekte! Hier findet ihr mehr Informationen zur Creative Tech Season sowie alle darin enthaltenen Artikel.

---

Bild von Lightfield Studios via stock.adobe.com

Artikel per E-Mail verschicken
Schlagwörter: A-Frame, Three.js, WebVR