WebVR im weiteren Sinne ist die Vision eines dreidimensionalen Webs. Es fasst somit alle Projekte zusammen, die sich diese Vision zum Ziel gesetzt haben. Web schließt in dem Fall Apps mit ein.
Im engeren Sinne ist damit die Javascript API gemeint, die die Kommunikation von HTML-Seiten und Apps mit VR-Endgeräten sicherstellt. Im weiteren Sinne gehören auch die Frameworks dazu, die es App- und Webentwicklern ermöglichen Virtuelle Realität einzubinden.
Unter der Einbindung von Virtueller Realität versteht man sowohl die Einbindung von VR-Inhalten in zweidimensionale Webseiten/Apps als auch die Erstellung einer allumfassend dreidimensionalen Nutzererfahrung.
Kein WebVR sind Anwendungen und Sites deren einziger 3D-Aspekt WebGL-Inhalte bzw. durch CSS generierte 3D Objekte sind. Auch Webseiten, die zwar via Klick-Events/WASD im Browser begehbar sind aber keinerlei Schnittstelle für VR-AR-Endgeräte haben, gehören nicht zu WebVR.
Langfristig wird WebVR nicht auf die virtuelle Realität begrenzt bleiben, sondern Bestandteil einer uns – wahrscheinlich annähernd 24/7 – umgebenden erweiterten Realität sein.
Eine WebVR-Spezifikation wird aktuell in Kooperation von Google, Microsoft und Mozilla entwickelt. Version 1.0 findet Ihr auf GitHub. Eine gut nachvollziehbare Einführung gibt von Case Yee.
Für die meisten von euch wird die Erstellung einer 3D Websites für VR-Devices bzw. das Einbinden von VR-Inhalten das wesentlich interessantere Thema sein. Komplette Websites in 3D könnt Ihr mit A-Frame von Mozilla erstellen. Die beste Möglichkeit zum Einbinden von VR-Inhalten in zweidimensionale Websites bietet zur Zeit Google mit VR-View.
A-Frame von Mozilla
Besonders großes Engagement in der Weiterentwicklung von WebVR geht von Mozilla aus. Neben der Entwicklung der API wurde ein eigenes VR Team ins leben gerufen. Mit A-Frame können ganzheitliche 3D Erlebnisse geschaffen werden. Einen Überblick zu Projekten findet Ihr hier.
A-Frame ermöglicht schon in seiner jetzigen Version sehr komplexe Anwendungen. Die Programmierung eigener Komponenten, sowie die Kommunikation zwischen A-Frame und Javascript, kann sogar erfahrene Coder vor Herausforderungen stellen.
Einfache Projekte sind jedoch schon mit ein paar Grundkenntnissen in HTML umsetzbar. Zum Testen bietet sich zum Beispiel der Editor von Codepen an.
Grundaufbau von A-Frame Projekten
<html>
<head>
<title>Grundaufbau A-Frame</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<!— Wichtig: Ihr müsst das A-Frame-Script laden -->
</head>
<body>
<!— Innerhalb der A-Scene-Tags platziert Ihr Objekte, hier am Beispiel eines Würfels -->
<a-scene>
<a-cube></a-cube>
</a-scene>
</body>
</html>
Um eine einfache A-Frame Seite umzusetzen, benötigt Ihr eine HTML-Grundstruktur, bindet das A-Frame-Script (siehe Abbildung 1) ein und setzt Objekte innerhalb des A-Scene-Tags.
Mit A-Frame können Objekte frei geschaffen werden. Für ein erstes Austesten kann man aber auch einfach die Grundbausteine nutzen:
- Würfel
- Normale Bilder
- Gekrümmte Bilder
- Zylinder
- Rechteckige Flächen
- Hintergrund
- Kugel
- Normale Videos
- 360 Grad Videos
Neben diesen Grundbaustein fallen in der aktuellen Version die Kamera und das Licht ebenfalls unter Grundbausteine.
Jedes Objekt (inklusive der Grundbausteine) kann mit Grund-Attributen im Raum platziert, rotiert und skaliert werden.
Am Beispiel eines Zylinders:
<a-cylinder position="0 0 0" rotation="180 45 90" scale="1 1 1"></a-cube>
Neben den Grund-Attributen haben alle Grundbausteine noch individuelle Attribute. Der Grundbaustein „Bild“ hat neben anderen Attributen noch src zum Laden von Bilddateien.
<a-image src="Bild_von_Hulk.png"></a-image>Objekt-Komponenten-System von A-Frame
Objekte können A-Frame Parameter zugeordnet werden. Diese heißen Komponenten. Mit der Fog-Komponente kann z. B. so festgelegt werden, ob Objekte bei größerer Entfernung verschwimmen sollen oder nicht und ob dieser Fog-Effekt in einer bestimmten Farbe passieren soll. Jede Komponente hat dann noch verschiedene Eigenschaften. Wenn man möchte, dass ein Würfel ansteigend in einem schwarzen Nebel verschwimmt, sieht der Code so aus:
<a-cube fog="type: exponential; color: #111"></a-cube>Wenn Ihr euch tiefer mit der Materie A-Frame auseinandersetzen wollt, schaut einfach mal in A-Frame Tutorial rein.
VR-View von Google
Googles VR-View zielt auf Web- und App-Entwickler ab. Mit dieser eleganten Lösung können zum ersten Mal 360 Grad-Inhalte für VR-Devices zugänglich gemacht werden, in Anwendungen bzw. Seiten, die für den klassischen Gebrauch gedacht sind.
Beispiel VR-View
Zum Einbinden von VR-View braucht Ihr nur diesen Codeschnipsel:
<!— Beispielschnipsel -->
<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true"></iframe>
<!— Hier nehme ich ihn mal auseinander -->
<iframe width="100%" allowfullscreen frameborder="0" src=“
<!— Wie bei ganz normalen IFrames -->
//storage.googleapis.com/vrview/index.html?
<!— Ohne hier jetzt ins Detail zu gehen: der muss immer rein -->
image=//photovrse.com/examples/coral.jpg
<!— Hinter image: packt ihr den 360 Grad Inhalt, bei Videos einfach video statt image -->
&is_stereo=true"
<!— Jenachdem ob es stereo ist oder nicht, im Zweifel einfahc mal mit „true“ und“false“ ausprobieren -->
></iframe>
Nach der ausführlichen Erläuterung J dieses kleinen Codes: wenn Ihr WordPress habt, könnt Ihr auch einfach das Plugin WP-VR-View nehmen. Den kompletten Code für Entwickler gibts auf GitHub.
Wer wissen will, wie er VR-View für iOS nutzen kann, wird bei Google fündig.
Fazit
A-Frame steckt gerade noch in den Kinderschuhen und einige praktische Probleme müssen noch behoben werden. Aktuell gibt es nur eine abgespeckte Möglichkeit Klick-Events einzubinden. Verlinkungen auf Unterseiten sind noch nicht möglich. Die Kombination von einem Menü außerhalb der A-Scene ist hier auch keine Lösung, weil spätestens wenn man sich die Seite mit einer VR-Brille anschauen will, wird das Menü nicht gespiegelt.
Da Texte nur als Bilder eingefügt werden können, haben A-Frame Seiten auch noch keine Möglichkeit – von der Brand mal abgesehen – in den SERPs von Google gefunden zu werden.
Ob sich A-Frame als WebVR Standard durchsetzen wird, ist aktuell noch nicht absehbar. Das Potential ist auf jeden Fall sehr groß.
Mit VR-View bietet Google auf eine einfache Möglichkeit 360-Grad Inhalte einzubinden. Der aktuelle Stand scheint aber keine echten Weiterentwicklungsmöglichkeiten zuzulassen. Somit kann es (nur) eine Übergangslösung sein, die aber sehr zu empfehlen ist.
Wir sind alle gespannt auf die zukünftigen Entwicklungen aber egal, wie es sich entwickelt oder was wir dazu beitragen, wir können sagen, wir sind von Anfang an dabei gewesen.