3D Browser-Demo via WebVR

Virtuelle Realität im Web - unser Team hat's ausprobiert!

3D-Demo

Neue Herausforderungen

Eine Website auf verschiedenen Geräten wie Handys, Tablets, Computer usw. mit verschiedenen Auflösungen laufen zu lassen und ein responsives Design dafür zu entwickeln – damit kennen sich heutige Web-Entwickler und -Designer allzu gut aus. WebVR führt im Hinblick auf responsives Design in die komplett neuen Herausforderungen von VR-Geräten ein.

Responsive Webdesign

Was ist WebVR?

Mit WebVR wird die virtuelle Realität direkt ins Web gebracht! WebVR ist ein open-source-Standard, mit welchem es möglich ist, virtuelle Realität direkt im Browser zu erfahren. Es funktioniert als eine Programmierschnittstelle (API), um in Webbrowsern mittels JavaScript auf Geräte für virtuelle Realität zugreifen zu können.

WebVR

Das Ziel von WebVR ist, es für alle einfacher zu machen, virtuelle Realität zu nutzen, egal welches Gerät dabei benutzt wird. Um dies zu verwirklichen, sind grundsätzlich zwei Dinge notwendig: Ein Headset und einen kompatiblen Browser. Kein Download ist dafür nötig und man braucht nichts zu installieren! Es gilt nur einen Link auszuwählen, eine URL einzugeben und schon läuft die Anwendung direkt in Ihrem Browser. Auch ohne ein VR-Headset kann die VR-Animation im Browser genutzt werden.

WebGL und Canvas

Damit die Darstellung optimal funktioniert, wird ein Canvas-Element in Verbindung mit WebGL verwendet. WebGL (Web Graphics Library) ist eine JavaScript-Programmierschnittstelle, mit deren Hilfe 3D-Grafiken im Webbrowser ohne zusätzlichen Erweiterungen dargestellt werden können. Ein Canvas-Element ist ein mit Höhen- und Breiten-Angaben beschriebener Bereich, in welchen per JavaScript gezeichnet werden kann. Die eigentliche virtuell-reale Darstellung erfolgt innerhalb eines HTML5-Canvas-Elements.

Lassen Sie sich von der Demo inspirieren!

Unser Team hat WebVR bereits ausprobiert. Unser Fazit: Noch ist WebVR etwas holprig und experimentell, aber auf jeden Fall ein Thema, dass wir im Auge behalten werden.

Anleitung

  • Verwenden Sie Google Chrome oder Mozilla Firefox.
  • Nach einem Klick auf die Demo verwenden Sie die Maus zur Steuerung der Sicht, und drücken W (oder Pfeil-vorwärts in der Full Screen Version) um sich in Blickrichtung zu bewegen.
  • Mit ESC befreien Sie den Mauszeiger wieder.
  • Finden Sie die verborgene Schatzkiste? Einmal gefunden, wächst ein neues Labyrinth heran.

Wenn es nicht klappt, keine Sorge – die nächsten Browser-Versionen werden immer besser mit WebVR umgehen können.

Browser-Demo

Full Screen Version

Echte VR mit VR-Headset

Falls Sie ein VR Headset (auch Google Cardboard reicht) besitzen, können Sie die Demo in echtem 3D anschauen. Dazu klicken Sie in der Mobile-Ansicht auf das Cardboard-Icon unten rechts.

Anwendbarkeit

Wie Sie vielleicht gerade bemerkt haben, wird WebVR leider noch nicht in allen Browsern zufriedenstellend unterstützt. Erste experimentelle Unterstützung gibt es in Mozilla Firefox, Google Chrome sowie in Samsungs Browser für Samsung Gear VR. Da WebVR aber laufend weiterentwickelt wird, hoffen wir, dass es bald auch tauglich für Safari & Co. wird!

Falls Sie also interessiert sind, beispielsweise Verkaufsgegenstände in Ihrem Online-Shop in 3D zu visualisieren, helfen wir Ihnen gerne weiter! Zögern Sie auch nicht, uns bei sonstigen Fragen zu kontaktieren!

Kontakt

Kommentare (0)

Kommentar verfassen