WebVR: Virtuelle Realität im Web

Allgemein Schlagwörter: , , , 0 Kommentare

Navigieren mit Kopfbewegungen und Eintauchen in Online-Anwendungen: Die Firefox- und Chrome-Entwickler experimentieren mit virtueller Realität.

Mit dem von Mozilla, und Google entwickelten -API soll beispielsweise auch VR-Content in den Browser gebracht werden: So lässt sich damit Content für Virtual-Reality-Devices online erstellen und dann im Firefox-Browser darstellen. Mit der kürzlich veröffentlichten Version 1.0 des -APIs hat nun einen ersten Meilenstein auf dem Weg, VR-Content in den Browser zu bringen, erreicht.

Google Cardboard

Das Google Cardboard ist eine Halterung aus Karton, welche aus einem Smartphone eine Virtual-Reality-Brille macht. Neben dem Karton besteht die Konstruktion aus zwei Biconvex-Linsen, zwei Magneten, welche durch Einwirken auf den Magnetsensor des Smartphones als Betätigungsknopf dienen, sowie einem Klettverschluss, um den Deckel zu schließen. Wenn man nun auf dem Smartphone eine App mit der Unterstützung einer stereoskopischen Ansicht öffnet, wird durch die VR-Brille aus den zwei einzelnen Bildern ein 3D-Bild. Durch die Sensorik im Smartphone kann man sich in dieser 3D-VR-Welt auch umsehen, die Drehung des Kopfes wird in die App übertragen.

Ursprünglich wurde die VR-Brille von Google designt und 2014 auf der Google I/O vorgestellt. Google stellt selbst keine Brillen her, hat aber eine Anleitung für Hersteller entwickelt sowie eine Anleitung mit den benötigten Einzelteilen, um sich selber eine VR-Brille zu basteln. Mittlerweile gibt es weltweit diverse Anbieter, welche qualitativ sehr gute Google Cardboards herstellen und verkaufen.

Google Cardboard hat dazu beigetragen, dass Entwickler ihre ersten Schritte gewagt haben, um VR-Anwendungen zu entwickeln. Google stellt ein SDK für Android und Unity zur Verfügung, um die Entwicklung der Apps zu erleichtern.

Mittlerweile haben diverse Unternehmen VR-Apps für Google Cardboard entwickelt wie z. B. Volvo, HELLER oder Mammut.

Google Cardboard

Oculus Rift

Das Oculus Rift ist ein Head-Mounted Display, das von Oculus VR entwickelt wird. Eine Entwickler-Version wurde bereits Anfang 2013 ausgeliefert. Die weltweite Veröffentlichung der Endkunden-Version fand am 6. Januar 2016 statt. Am 25. März 2014 gab Facebook Inc. die Übernahme von Oculus VR bekannt.

Consumer Version 1

Die beiden Panels der finalen Version der Oculus Rift besitzen jeweils eine Auflösung von 1080×1200 Pixel. Das ergibt Insgesamt eine Auflösung von 2160×1200 Pixel. Dies stellt eine wiederholt deutlich erhöhte Pixeldichte dar, die zu einer erneut erhöhten Immersion des Nutzers in die virtuelle Welt beiträgt, aber eine Mehrbelastung für die Grafikkarte bedeutet. Seit dem 6. Januar 2016 ist die finale Version der Oculus Rift in den USA für 599 US-Dollar und in Deutschland für 741 Euro (inklusive Versandkosten) vorbestellbar.

Web-VR-API 1.0 bringt ins Web

In einem Blogpost stellt das Mozilla VR Team die Version ausführlich vor. Das entworfene Web-VR-API bietet die Möglichkeit, VR-Experiences im Browser zu entwerfen und steht als Vorschlag in Version 1.0 bereit.

WebVR: Virtuelle Realität im Web

Das API ist nun besser an die Bedürfnisse der Entwickler angepasst und rendere Inahlte zugeschnitten auf spezifische VR-Devices. Es gibt die Möglichkeit, mit Hilfe von Links zwischen den VR-Welten zu wechseln. Ein Schema für die Eingabehandhabung kann Eingabemöglichkeiten durchnummerieren und kommt so auch mit Motion Controllern zurecht, die alle sechs Freiheitsgrade ausnutzen. Web VR lässt sich mit Hilfe des API sowohl im Sitzen als auch im Stehen nutzen und sei damit für den Einsatz auf den Desktop und auf Mobilgeräten geeignet.

Der Blogeintrag widmet sich einem grundsätzlichen Einstieg in das API.

WebVR – Links

Ein VR-Website über VR-Websites

Mozilla bietet auf MozVR.com bereits einige VR-Demos an. Für mich persönlich ist folgende Amnesty International Virtual Reality WebSite wichtig.

Amnesty International hat am 12 März 2016 die neue #360Syria „Virtual Tour“ Website vorgestellt. Diese zeigt die Zerstörung der belagerten Stadt Aleppo durch die Bombardements der syrischen Regierung mit Fassbomben. Die Website-Demonstration „Fear of the Sky” (www.360Syria.com) wurde unter Verwendung der Technologie gebaut.

Die #360Syria Website umfasst speziell erstellte 360-Grad Fotografien, Erzählungen, Tonaufnahmen, 3-D Daten-Grafiken und Videos, die von Amnesty geschulten, syrischen Medien-Aktivisten gesammelt wurden.

A-Frame ist ein Open Source Framework, dass die Entwicklung von WebVR vereinfacht und eine leichte Erstellung von WebVR-Erlebnissen mit HTML ermöglicht.

Mehr Informationen auf Englisch:
Über Mozilla VR (MozVR)
Machen Sie sich vertraut mit Mozilla A-Frame
Link zum vollständigen Mozilla Blog Post auf English
Amnesty International #360Syria Blog Post

Javascript 3D library three.js

Beide three.js und die WebVR Polyfill (verwendet von der WebVR Boilerplate) unterstützen die neueste WebVR-API. Für unseren Blog werden wir auf Basis von three.js ein Plug-In für Web VR erstellen.

WebVR Beispiele

cubes
panorama
rollercoaster
video

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.