Bisher war es nicht ohne Weiteres möglich 360 Grad Inhalte für VR-Endgeräte in Websites einzubinden. Man konnte zwar über das A-Frame Framework von Mozilla Websites für VR-Brillen erstellen, diese sind aber in normalen Browsern weniger gut anzuschauen. Zusätzlich besteht das Problem, dass es in der aktuellen Version keine Click-Events gibt.
In normale Sites konnten also lediglich 360 Grad Videos eingebunden werden, diese konnten dann aber nicht auf VR Devices angeschaut werden. Die Lösung die Videos direkt mit geteilten Bildschirmen darzustellen war wiederum für die normalen Nutzer (ohne VR-Endgerät) nutzerunfreundlich. Lediglich direkt über Youtube konnten Videos im Browser und dann in der VR-Brille angeschaut werden.
Kleiner Tipp: Wenn Ihr Cardboard-Apps bzw. einen geteilten Bildschirm direkt in der Gear-VR schauen wollt, ohne, dass der Samsung Store geöffnet wird, ladet einfach den Package Disabler Pro runter.
Dieses Problem hat Google mit seinem VR-View gut gelöst. Hiermit können problemlos 360 Grad Bilder und Videos eingebunden werden und via Klick mit einer Virtual Reality Brille angeschaut werden.
Neben Webseiten können 3D Inhalte mit VR-View auch in Apps eingebunden werden. Man ist also nicht mehr gezwungen sich zu entscheiden, ob man seine App (oder seine Website) komplett für VR macht oder nicht.
Es läuft sowohl in den aktuellen Versionen für Desktop- als auch auf den mobilen Standardbrowsern. Unterstützt werden sowohl 360 Grad Bilder als auch Videos (egal ob stereo oder mono).
Beispiel der Einbindung eines 360-Grad Bildes mit VR-View:
(sollten Sie hier nichts sinnvolles sehen, machen Sie einfach mal ein Browser-Update)
Einbindung in html
Am einfachsten binden Sie VR-View über iframe ein:
<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true"></iframe>
Die Tags frameborder, width und allowfullscreen funktionieren, wie bei normalen iframes. Die wichtigsten CGI-Umgebungsvariablen:
image/video: URL, des 360-Grad Videos/Bildes
is_stereo: Standardmäßig in false, wichtig wenn das Bild/Video in Stereo
Den kompletten Code für Entwickler gibts auf GitHub. Das komplette Projekt ist Open Source.
Um VR-View in WordPress einzubinden, empfehlen wir WP-VR-View.