Wahrscheinlich waren Sie schon einmal in dieser Situation: Sie schauen sich ein Produkt online an und zögern, es zu kaufen, weil Sie es lieber persönlich sehen würden. Kommt ihnen das bekannt vor?
Wäre es nicht praktisch, wenn dieses Produkt auf magische Weise vor ihnen erscheinen könnte? Virtual Reality (VR) tut genau dies, ob Sie es glauben oder nicht, die heutige Browsergeneration unterstützt bereits heute diese Art der Präsentation.
Auf der diesjährigen Shopify Unite Konferenz wurde demonstriert, wie 3D und VR mit Hilfe einer neuen Technologie mit der Bezeichnung WebVR nahtlos in Shopify Stores eingebettet werden kann.
WebVR ist ein offener Standard, der in experimentielle Browser-Builds integriert wird. Es ermöglicht die Darstellung interaktiver 3D-Grafiken innerhalb einer Webseite in jedem verfügbaren VR-Headset, ohne dass eine App oder ein spezielles Plugin heruntergeladen werden muss.
Für Unite hat Shopify einen Proof on Concepts um einen Stehpult des Shopify-Händlers StandDesk gebaut. Direkt aus dem Online-Shop heraus konnten die Nutzer ein VR-Headset aufsetzen und den Schreibtisch vor sich sehen.
Sie konnten den Schreibtisch anheben und senken, um zu sehen, wie es wäre, ihn zu benutzen. Benutzer können den Schreibtisch auch in VR anpassen und wenn Sie ihr Headset abnehmen, ist ihr Schreibtisch bereit zum Kauf. Sie können es selbst ausprobieren.
Dieses Projekt zeigt, was für eCommerce mit VR und Web möglich ist. In diesem Sinne gehen wir die Überlegungen durch, die wir beim Aufbau dieser Erfahrung angestellt haben, einschließlich der Möglichkeiten, ein Produkt in 3D zu drehen und welche Entwicklungswerkzeuge zur Verfügung stehen.
Warum das Web?
Es kann frustrierend sein, einen Onlineshop zu besuchen und letztendlich nur zum Download der mobilen App aufgefordert zu werden. Die gleiche Frustration kann beim VR-Shopping auftreten, wenn Sie für jeden Shop, den Sie besuchen möchten, eine recht große App herunterladen müssen.
Es ist auch eine recht schwerwiegende Eintrittsbarriere für einen Händler, da er sich um die Erstellung und Vermarktung einer App kümmern muss und diese auch auf einem Marktplatz wie Steam oder Oculus Home anbieten kann.
Deshalb ist WebVR so wirkungsvoll. Das 3D-Erlebnis belebt das Online-Shopping-Erlebnis und kann alle anderen Vorteile des Internets nutzen.
Shopify berichtet von Erfahrungen, wonach ein Checkout in VR nicht benötigt wurde, da der normale Shopify Checkout Ablauf verwendet werden musste. Kunden würden ihre Headsets nach dem Betrachten des Schreibtisches abnehmen, also war es besser, Sie durch eine bewährte und optimierte Kasse gehen zu lassen, statt Sie durch den Prozess der Eingabe einer Kreditkarte in VR zu überfordern.
Responsives VR.
Eines der ersten Dinge, die bei jeder VR-Erfahrung zu berücksichtigen sind, ist die Art des Headsets, auf dem es läuft. Mit webbasierten VR sind wir der Meinung, dass sich Implementierungen an möglichst viele Geräte anpassen sollten, so wie eine Website auf unterschiedliche Geräte und Bildschirmauflösungen reagieren muss. Im Folgenden finden Sie Beispiele dafür, wie wir die einzelnen Szenarien bilanziert haben.
Mobile Headsets.
Mobile Headsets wie Daydream VR und GearVR unterstützen WebVR nativ. Diese Art von Headsets erlauben es ihnen nicht, mit ihnen herumzulaufen, da es bei ihnen ausreicht, ihren Kopf entsprechend zu bewegen. Der zugehörige Controller kann als Laserpointer für grundlegende Interaktionen mit der Szene verwendet werden und die Bewegung kann durch Zeigen und Klicks erfolgen.
Ein Google Cardboard-Viewer kann auch verwendet werden, aber die User Experience ist begrenzt, da Sie keinen Controller haben.
Desktop Headsets.
Headsets wie das Vive und das Rift ermöglichen die eindringlichsten Erlebnisse, da sie swohl die Rotation als auch die Position ihres Kopfes verfolgen. Die Kunden können ein Produkt zu Fuß erkunden, während Sie mit einem Motion Controller in jeder Hand interagieren können.
Ohne Headset.
Die meisten Online-Shopper haben noch keine VR-Headsets. Die gute Nachricht ist, dass man auch ohne Headset mit einem 3D-Modell interagieren kann. Diese Funktionalität benötigt kein WebVR und wird von allen gängigen Browsern unterstützt.
Es ist wahr… Sie würden lieber den Schreibtisch in einer realen Situation sehen, anstatt in einer virtuellen Leere. Hoffentlich wird Apple`s ARKit es eher früher als später unterstützen.
Fürs Erste ist AR meistens telefonbasiert und obwohl es intuitiv und bequem ist, besteht der Nachteil darin, dass es nicht so immersiv wie VR ist. Anstatt sich wie ein Schreibtisch vor ihnen zu fühlen, zu dem Sie gehen und mit dem Sie interagieren können, haben Sie das Gefühl, als würden Sie ein Foto von einem Schreibtisch auf ihrem Handy betrachten. Deshalb freuen wir uns darauf, dass AR-Headsets mit Gestenverfolgung im Handel erhältlich sein werden.
Produkte in 3D verwandeln.
Die Umwandlung von Produkten in 3D ist eine der größten Hürden für den Einstieg in diese Technologie und es gibt einige Möglichkeiten, wie die Entwickler diese Herausforderung meistern können.
Photogrammetrie/Scannen.
Die Photogrammetrie ist eine Technik, bei der man einen Haufen Fotos von einem Objekt aus verschiedenen Blickwinkeln macht und dann mit speziellen Algorithmen versucht, sie alle zu einem 3D-Modell zusammenzufügen. Die Ergebnisse können großartig sein, aber der Prozess, es richtig zu machen, erfordert eine gute Portion Geschick. Auch hochreflektierende oder transparente Oberflächen können das Ergebnis stören.
Einen 3D Designer einstellen.
3D-Designer können unglaublich fotorealistische Modelle von so ziemlich allem erstellen. Für das StandDesk-Beispiel bei Unite wurden mehrere Fotos und Messungen des Tisches gemacht, bevor diese modelliert wurden. Der Prozess dauerte ein paar Tage, bis alle Varianten fertig waren.
Der Haken bei dieser Option ist, dass es ein teures Unterfangen sein kann, viele SKUs zu modellieren. Aber für einen Shop, der nur ein Hauptprodukt oder eine Auswahl von wenigen hat, sollte es ein Kinderspiel sein, wenn man bedenkt, wie vielseitig das resultierende 3D-Modell ist.
CAD-Daten konvertieren.
Für viele Produkte werden CAD-Daten (Computer-Aided Design) für den Herstellungsprozess benötigt. Diese Daten können extrem groß sein und eine unglaubliche Menge an Details enthalten, was sie zu komplex macht, um sie in Echtzeit für VR zu rendern. CAD-Modelle müssen oft vereinfacht werden, bevor sie in ein Echtzeitformat konvertiert werden, was manchmal automatisch erfolgen kann.
Während uns CAD-Daten für den Stehpult zur Verfügung gestellt wurden, waren sie leider nur in 2D, so dass wir sie nicht verwenden konnten.
Entwicklung von WebVR-Erfahrungen.
Die Tools zu Erstellung von WebVR-Erlebnissen sind noch sehr begrenzt und Shopify hat mehrere getestet, bevor die Entscheidung auf StandDesk fiel. Das erste, welches in Betracht gezogen wurde, war Sketchfab, das als YouTube für 3D-Modelle betrachtet werden kann. Sie laden ein 3D-Modell hoch und betten den Viewer dann mit einem Code-Schnipsel auf einer beliebigen Webseite ein. Es unterstützt sogar die Darstellung des Modells in VR im richtigen Maßstab.
Es ist ein wirklich einfacher Prozess und die perfekte Lösung für viele Anwendungsfälle, zumal es eine API gibt, die damit einhergeht. Leider ist es für das Schreibtischbeispiel zu begrenzt, da Shopify eigene VR-Steuerelemente einbauen wollte, um den Schreibtisch bei eingeschaltetem Headset anzupassen.
Shopify sah sich auch die Verwendung von Mozillas exzellentem VR-Framework A-Frame und Clara.io angesehen, aber Ende fiel die Entscheidung auf PlayCanvas, weil es den Workflow beschleunigt und eine Menge Funktionalität zur Verfügung stellt.
PlayCanvas fühlt sich an wie Unity für das Web, aber mit den kollaborativen Funktionen von Google Text & Tabellen. Jede Änderung, die Sie an der Szene oder am Code vornehmen, wird auf allen angeschlossenen Clients reflektiert. Das hat das Debugging stark beschleunigt, da jemand in VR sein und die Änderungen in Echtzeit sehen konnte, da jemals anderes die Szene auf seinem Laptop optimiert hat.
Unser Projekt basiert auf dem PlayCanvas WebVR-Beispiel, das Shopify eine Grundszene mit
Unterstützung für mobile und Desktop-VR-Steuerungen bietet. Es hat Shopify auch gezeigt, dass es möglich ist, 90 Bilder pro Sekunde (60fps für Mobiltelefone) im Web zu erreichen.
Wir sind sehr gespannt, wie sich Tools entwickeln, die es einfacher machen, immersive virtuelle Erlebnisse im Browser zu veröffentlichen. Es wäre erstaunlich, bekannte und leistungstarke Game-Engines wie Unity und Unreal Engine zu verwenden, aber ihre Exportfunktionen ins Web sind durch eine zum größten Teil fehlende WebVR-Unterstützung sehr begrenzt.
Kleiner Ausblick.
Shopify ist immer auf der Suche nach neuen Wegen, um die VR- und AR-Technologie in der Welt des eCommerce voranzutreiben. Die nächsten Schritte bestehen darin, Händlern und Partnern den Einstieg in diese Technologie auf der Shopify-Plattform zu erleichtern.
Shopify Integration.
In Shopify`s Unite Proof of Concept sind viele kundenspezifische Arbeiten eingeflossen. Shopify möchte Teile davon zur Verfügung stellen, damit die Entwickler nicht bei Null anfangen müssen, wenn sie die VR-Technologie für ihre eCommerce-Site nutzen wollen. Hier finden Sie einige gängige Funktionalitäten, die Shopify ihnen zur Verfügung stellen möchte.
- Anbindung jeder Variante an verschiedene 3D-Modelle und -Materialien.
- Der 3D-Viewer ist mit der Shopify-Seite synchronisiert.
- Anpassung der Umgebung (denken Sie an Shopify Themes für VR).
- Gestalten eines interaktiven Variantenmenüs für das virtuelle Produkt.
In nicht allzu ferner Zukunft werden Sie vielleicht sogar die Möglichkeit haben, 3D-Modelle für ein Produkt in den Shopify Admin hochzuladen.
Datenanalyse.
Während es schön ist, Händler über die PR-Vorteile des VR-Hypes zu informieren, wäre es noch besser, ihnen zu zeigen, wie die Technologie die Rendite um X% reduzieren oder den Umsatz um Y% steigern kann. Deshalb arbeiten wir daran, Shopify-Händlern und -Partnern die Daten zur Verfügung zu stellen, die sie für die Sicherung dieser Art von Entwicklungsarbeit benötigen.
Augmented Reality.
Shopify wird ARKit, AR.js und WebAR genau verfolgen, um zu sehen, wie AR nahtlos in den Mix integriert werden kann.
Shopify-Partner für 3D/AR/VR.
Händler können das nicht alles selbst machen. So wie sich Händler auf Shopify`s Netzwerk von Partnern unf Experten verlassen können, um bei Design, Code, SEO, Marketing, Fotografie usw. zu helfen, möchte Shopify eine Kategorie von vertrauenswürdigen Partnern für die Erstellung von 3D-Modellen und den Aufbau von AR/VR-Erfahrungen aufbauen.
Die Zukunft der VR.
Wir sind sehr gespannt, wie sich das Eintauchen in die virtuelle Realität mit der Leistungsfähigkeit und Zugänglichkeit des Internets weiter entwickeln wird. Das ist erst der Anfang und es gibt noch so viel zu lernen und entwickeln.
Vielen Dank fürs Lesen.