Inhaltstypen
Pages
Posts
17.10.2017

3D Browser-Demo via WebVR

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.
[button url=”https://www.insign.ch/kompetenzen/design_und_usability/responsive-webdesign/” color=”gray” size=”m” icon=”icon-arrow-right” new_window=”1″]Responsive Webdesign[/button]

[divider type=”shadow-bottom” no_border=”1″ /]

Was ist WebVR?

[column size=”1/2″]
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.
[button url=”https://webvr.info” color=”green” size=”m” icon=”icon-arrow-right” new_window=”1″]WebVR[/button]
[/column]
[column size=”1/2 last”]
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.
[/column]

[divider type=”shadow-bottom” no_border=”1″ /]

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.
[divider type=”dots” /]
[big_text]Lassen Sie sich von der Demo inspirieren![/big_text]
[divider type=”dots” /]
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

[list icon=”icon-arrow-right” ]

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

[divider type=”shadow-bottom” no_border=”1″ /]

Browser-Demo

 


[button url=”/3d.html” color=”blue” size=”m” icon=”icon-arrow-right” new_window=”1″]Full Screen Version[/button]

[divider type=”shadow-bottom” no_border=”1″ /]

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.

[divider type=”shadow-bottom” no_border=”1″ /]

Anwendbarkeit

[column size=”1/2″]
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!
[/column]
[column size=”1/2 last”]
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!
[button url=”https://www.insign.ch/kontakt/” color=”blue” size=”m” icon=”icon-arrow-right” new_window=”1″]Kontakt[/button]
[/column]