Augmented Reality in Web-Apps
15. Sep. 2020
Während Augmented Reality (AR) vor wenigen Jahren noch als nette Spielerei galt, hat sich die Technologie inzwischen zu einem soliden Feature entwickelt, das Benutzern das Ansehen von 3D Modellen im realen Umfeld ermöglicht, siehe das beispielhafte Modell eines Huracán EVO RWD Spyder. Neben Anwendungen in Spielen, kann AR aber vor allem auch Mehrwerte in Bereich E-Commerce bieten, die wir in diesem Blogartikel gerne näher beleuchten möchten.
Das Unternehmen Gartner, ein Anbieter für Marktforschungen und Analysen, prognostizierte bereits im April 2019 in einem Bericht, dass Augmented Reality im Jahr 2020 einer der größten Trends im Bereich E-Commerce darstellen würde.
AR ermöglicht es, Produkte jeglicher Art direkt im zukünftigen Umfeld zu simulieren und bietet dadurch Vorteile, die zurzeit mit keiner anderen technischen Lösung möglich sind.
Nutzerfragen wie „Passt die Größe und die Farbe in meine Wohnung?“ könnten somit der Vergangenheit angehören. Darüber hinaus können durch den Einsatz von AR langfristig Kaufanreize gesteigert und die Quote der Retouren merkbar minimiert werden.
Große Unternehmen wir IKEA oder Bang & Olufsen haben den Trend bereits erkannt und native iOS Apps veröffentlicht, die mit Hilfe von Augmented Reality verschiedene Möbel und Soundequipment in den eigenen vier Wänden darstellen können.
Mit nativen Apps können Entwickler auf den vollen Funktionsumfang des Apple ARKit oder dem Android-Equivalent ARCore zurückgreifen und ansprechende Produktmodelle auf spannende Art und Weise darstellen. Jedoch sind solche nativen Applikationen verhältnismäßig kostspielig in der Herstellung und somit nicht zwangsläufig für jedes Unternehmen geeignet.
3D Modelle und AR über JavaScript
Die Idee 3D Modelle und Augmented Reality in Web-Applikationen einzubinden, ist im Grunde nichts Neues. Bereits im Jahre 2017 wurde AR.js veröffentlicht. Durch das Zusammenspiel von AR.js und anderen JavaScript Bibliotheken wie beispielsweise a-frame und Three.js ist es einem Entwickler möglich, mit wenig Code Augmented Reality in eine Web-Applikation einzubinden. AR.js bietet Image, Marker und Location Based Tracking.
Location Based Tracking verwendet das GPS Modul eines mobilen Endgerätes und zeigt 3D Modelle im Anschluss an zuvor definierten Koordinaten.
Image und Marker Tracking benötigen bestimmte Bilder, denen 3D Modelle zugeordnet werden. Wird zum Beispiel ein Marker über die Kamera erkannt, wird das 3D Modell darüber dargestellt. Weder Location noch Marker Tracking eignen sich optimal für die Verwendung in Web-Applikationen oder aber Webshops. Die wenigsten Kunden würden sich zunächst ein Bild ausdrucken und dieses in der eigenen Wohnung platzieren, um Augmented Reality zu verwenden.
Mit dem im Februar 2019 vorgestellten Model-Viewer von Google wurde ein weiterer großer Schritt in Richtung Adaption im Web gegangen, da das Einbinden von 3D Modellen und Augmented Reality in Web-Applikationen mit nur wenigen Zeilen Code durchgeführt werden kann – und dass sogar komplett ohne den Einsatz von Markern. Die Model-Viewer Komponente funktioniert dabei Cross-Browser auf iOS und Android Endgeräten, sofern die richtigen Datei-Formate verwendet werden.
Folgender Beitrag zeigt deshalb auf, wie Augmented Reality einfach und kostengünstig in Web-Applikationen, wie zum Beispiel Webshops, eingebunden werden kann, welche Formate dafür notwendig sind und welche Vor- sowie Nachteile die aktuellen Möglichkeiten bieten.
Zwei Betriebssysteme, zwei Standards
Apple setzt für Augmented Reality Anwendungen auf das USDZ Format. Das von Pixar entwickelte Format basiert auf dem Universal Scene Descriptor (USD) Standard und stellt im Grunde ein ZIP aller notwendigen Modelle, Animationen und Texturen dar. Nutzer von iPhones und iPads mit der iOS-Version 12 oder höher können USDZ Dateien nativ darstellen, ohne dass weitere Apps installiert werden müssen. USDZ Dateien können so beispielsweise über Nachrichten oder eine E-Mail einfach geteilt werden.
Google unterstützt das USDZ Format derzeit nicht, stattdessen setzt Google auf das glTF, das sogenannte Graphics Library Transmission Format. GlTF, das in seiner ersten Version bereits im Jahre 2015 erschienen ist, basiert auf dem JSON-Format und kann in einem beliebigen Text-Editor geöffnet werden. Ähnlich wie beim USDZ Format sind alle notwendigen Informationen zur Darstellung eines 3D Modells in einer Datei enthalten.
Gängige Modellierungssoftware für 3D Modelle, wie zum Beispiel Blender, können mit Plugins erweitert werden, mit denen sowohl glTF als auch USDZ exportiert werden können. Alternativ dazu bietet Apple den Reality Converter, den Benutzer mit einem Developer Account von der Apple Webseite herunterladen können. Dieser ist dazu in der Lage alle gängigen 3D Formate in USDZ umzuwandeln.
Integration in eine Web-Applikation
Die oben genannte Web-Komponente Model-Viewer von Google ermöglicht eine einfache Einbindung von 3D Modellen in Web-Applikationen. Model-Viewer stellt dabei die Komponente dar, die eine interaktive Darstellung von 3D Modellen im Browser bereitstellt. Alle Augmented Reality Features werden durch die nativen AR Implementierungen des jeweiligen mobilen Endgerätes durchgeführt, sofern der Browser dies unterstützt.
Um den Model-Viewer in eine Web-Applikation einzubinden sind nur wenige Zeilen Code notwendig. Zunächst werden die notwendigen JavaScript Bibliotheken im Head-Element unseres HTML-Dokumentes hinzugefügt.
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
Im Anschluss kann die Model-Viewer Komponente im Body eingebunden werden.
<model-viewer
src="https://cdn.worldiety.org/worldiety/home/jmanemann/ar-test/models/wdy_small_frame.gltf"
ios-src="https://cdn.worldiety.org/worldiety/home/jmanemann/ar-test/models/wdy_small_frame.usdz"
alt="WDY-AR Small Frame"
auto-rotate
camera-controls
background-color="#ffffff"
ar
unstable-webxr>
</model-viewer>
Der „src“ Wert entspricht dem Pfad bzw. der URL der zu verwendenden glTF-Datei des 3D-Modells. Modelle können somit auf einem eigenen Server gehostet oder von externen Quellen bezogen werden. Wichtig ist hierbei vor allem der Wert „ios-src“. Wie bereits erläutert setzen Google und Apple auf verschiedene Formate zur Darstellung von 3D-Modellen. Unter „ios-src“ wird daher der Pfad zum entsprechenden USDZ-Modell hinterlegt. Wichtig für die Funktionalität von Augmented Reality ist außerdem der Parameter „ar“. Sofern das Endgerät eine Darstellung per AR unterstützt, wird durch diesen Parameter automatisch ein Button zum Start der nativen Augmented Reality Implementierung des Endgerätes eingeblendet. Eine Liste aller möglichen Parameter der Model-Viewer Komponente kann unter diesem Link eingesehen werden.
Nach diesen Schritten sind wir nun tatsächlich auch schon fast fertig. Die Model-Viewer Komponente macht es kinderleicht 3D-Modelle in eine Web-Applikation zu integrieren. Das Styling der Komponente kann darüber hinaus einfach über CSS angepasst werden. So bietet es sich beispielsweise an, den Button für AR selber zu gestalten, um die Komponente bestmöglich in das eigene Corporate Design zu integrieren.
Limitierungen bei der Integration von AR in Web-Applikationen
Die Einbindung von 3D Modellen und AR in die eigene Web-Applikation klingt zwar einfach, doch gibt es hierbei auch einige Limitierungen, die bei der Integration zu beachten sind. Die Model-Viewer Komponente bietet eine Möglichkeit 3D Modelle in allen gängigen Desktop- und Mobil-Browsern anzuzeigen. Diese können im Model-Viewer rotiert, vergrößert und verkleinert werden und bieten so bereits eine gute Methode, um Produkte interaktiver an Endkunden heranzutragen als es über normale Bilder möglich wäre.
Augmented Reality lässt sich derzeit jedoch nur auf mobilen Endgeräten in bestimmten Browsern realisieren. Um auf einem Endgerät von Apple ein 3D Modell per AR in einen Raum zu projizieren, wird ein iPhone oder iPad mit der iOS-Version 12 oder höher benötigt. AR funktioniert im Anschluss ausschließlich im Safari-Browser.
Auf Android Geräten funktioniert die Darstellung von 3D Modellen in Augmented Reality ausschließlich im Chrome Browser mit einer Version >70. Außerdem wird für Android Oreo 8.0 oder höher und ein Gerät benötigt, das ARCore unterstützt. Eine Liste der kompatiblen Geräte kann hier eingesehen werden. Während AR auf Apple Geräten direkt startet, nachdem der AR Button betätigt wurde, muss auf Android Geräten zunächst eine Permission für die Kamera erteilt werden. Obwohl dies prinzipiell ein gutes Feature darstellt, kann es bei Endbenutzern ggf. zu Verwirrung führen.
Im Test ist darüber hinaus aufgefallen, dass eine akkurate Darstellung von Produkten im AR stark vom Produkttyp abhängt. Für die Tests wurden drei Modelle mit verschiedenen Größen erstellt. Ein kleiner Bilderrahmen (20 x 15 cm), ein großer Bilderrahmen (Größe A1) und ein Modell eines Sofas. Da für diese Umsetzung von AR mit dem Model-Viewer von Google keine Marker notwendig sind, werden 3D Modelle auf Basis von Tiefendaten platziert, die das mobile Endgerät über Bewegung der Kamera ermittelt.
Um große Objekte, wie zum Beispiel das Sofa oder den großen Bilderrahmen per AR zu platzieren wird viel Platz benötigt. Auch das Verschieben großer Objekte, sobald diese per AR platziert wurden, funktioniert noch nicht optimal. Kleinere Objekte, wie beispielsweise das Modell des kleinen Bilderrahmens, ließen sich im Test wiederum problemlos mit AR platzieren. Eine Umsetzung von AR in einer Web-Applikation bietet sich daher am besten für kleinere Produkte an, die bequem auf einen Schreibtisch passen. Für solche Produkte kann Augmented Reality einen echten Mehrwert gegenüber klassischer Produktbilder darstellen.
Eine Demo der Augmented Reality Funktionalität inklusive aller Testmodelle kann hier eingesehen werden. Der Quellcode des Tests findet sich auf Gitlab. Um den Test selber zu hosten müssen lediglich die URLs der Modelle auf die eigene URL-Struktur angepasst werden.
Mit Augmented Reality bei Online-Shops in die Zukunft?
Zusammenfassend lässt sich sagen, dass das Einbinden von Augmented Reality in eine Web-Applikation erstaunlich einfach sowie gut funktioniert. Mit wenigen Zeilen Code lassen sich 3D Modelle über die Model-Viewer Komponente einbinden, die in allen gängigen Browsern bereits als eine interaktive Alternative zu klassischen Produktbildern dienen kann. Wird der entsprechende Browser auf einem mobilen Endgerät bereits verwendet, bekommt man die AR Funktionalität ohne weiteren Aufwand automatisch dazu.
Ansprechende 3D Modelle mit Texturen der eigenen Produkte herzustellen, könnte für einige Nutzer jedoch ein Hindernis sein. Darüber hinaus ist zu beachten, dass die Browser-Unterstützung für AR auf mobilen Endgeräten noch nicht ausgereift ist. Benutzern mit anderen Browser-Präferenzen als Safari auf iOS und Chrome unter Android können derzeit nicht auf die Augmented Reality Funktionalitäten zurückgreifen. Auch das Platzieren der Objekte im Raum funktioniert ohne Marker bisher noch nicht optimal.
Derzeit kann die Einbindung von AR in Web-Applikation leider noch nicht mit einer nativen Implementierung mithalten. Nichtsdestotrotz kann AR aber vor allem bei kleinen Objekten trumpfen. Ein gewünschtes Produkt bereits vor der Bestellung in Originalgröße auf dem Schreibtisch zu sehen, kann die Kaufentscheidung erleichtern und vermittelt Produktinformationen besser als Texte oder Bilder es jemals könnten. Zukunftsblickend bleibt abzuwarten, wie genau sich die Technologie in den kommenden Jahren entwickeln wird und ob weitere Browser die Nutzung von Augmented Reality Komponenten/Funktionalitäten ermöglichen werden.
Mit der einfachen Adaption in Web-Applikationen wurde jedoch bereits ein großer Schritt in die richtige Richtung getan, sodass Betreiber von Webshops bereits heute einige AR Funktionalitäten kostengünstig und unkompliziert einbinden können und Kunden somit eine attraktive Alternative zu Produktbildern bieten.
Unser E-Commerce-Experte
Jan Manemann
ist für Sie da!
+49 441 559 770 0
