Inhaltstypen

3D Browser-Demo via WebVR

Virtuelle Realität im Browser: WebVR macht 3D-Erlebnisse ganz ohne Installation für alle Geräte möglich.

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.

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.

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.

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.

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!

letzte 3 Blog-Beiträge

Shopify statt z.B. WooCommerce: Das passende E-Commerce-System für KMUs

Ein Wechsel zu Shopify lohnt sich für KMUs, die Wert auf einfache Bedienung, Unabhängigkeit und schnelles Wachstum legen – ohne technischen Ballast oder Agenturabhängigkeit. insign als erfahrener Shopify- und Magento-Partner unterstützt Sie dabei...

AI eats Software – Jetzt ist der perfekte Zeitpunkt für Individualsoftware

Die grossen Softwareanbieter geraten durch KI unter Druck – eine neue Ära beginnt. Jetzt ist der ideale Zeitpunkt, individuelle Softwarelösungen zu realisieren, die exakt zu Ihren Prozessen passen. "Make" lohnt sich dank KI jetzt mehr denn je...

E-Commerce mit Weitblick: Erfolgsfaktoren ohne Detailverliebtheit

Beleuchtung der strategischen Herangehensweise bei der Entwicklung nachhaltiger E-Commerce-Lösungen: Identifikation und Nutzung grosser Hebel für die Profitabilität und Bedeutung strategischer Planung für den langfristigen Erfolg...

diesen Beitrag teilen


Partner, CTO & AI Evangelist at insign