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

KI-gestützte Auftragserfassung: Wenn PDF-Bestellungen automatisch ins ERP finden

Viele Unternehmen erfassen Bestellungen aus E-Mails und PDFs noch immer manuell – obwohl genau hier enormes Automatisierungspotenzial liegt. Unser Referenzprojekt mit ASTORtec zeigt, wie KI-gestützte Auftragserfassung unstrukturierte PDF-Bestellungen ausliest, prüft und direkt ans ERP übergibt. Ein...

Hyvä für Magento: Wenn das Frontend endlich kein Bremsklotz mehr ist

Viele Magento-Shops leiden unter einem veralteten, komplexen Frontend, das Performance, Core Web Vitals und Conversion ausbremst. Hyvä setzt hier an und macht Magento mit einem modernen, schlanken Frontend wieder schnell, wartbar und nutzerfreundlich. In diesem Beitrag zeigen wir, wann sich Hyvä...

Webclient-Entwicklung für komplexe Business Software

Moderne Webclients bringen komplexe Business Software direkt in den Browser – schnell, sicher und einfach bedienbar. Am Beispiel des ARTS Webclients für Interact/SER/Doxis zeigt insign, wie bestehende Systeme mit React, sauberer API-Integration und durchdachter Benutzerführung zukunftsfähig gemacht...

diesen Beitrag teilen


Partner, CTO & AI Evangelist at insign