Augmented Reality für Onlineshops - ARKIT 2

Ein großes Möbelhaus hat es vorgemacht und präsentiert seine Einrichtung mit virtuellen Modellen. Die Intent GmbH möchte diesen Bereich mit ARKit 2 weiter ausbauen und Augmented Reality für Onlineshops interessanter machen. Dafür nutzen wir das USDZ-Dateiformat, das den Markt verändern könnte.

Unternehmen, die das Thema bisher für sich ausgeschlossen haben, sollten ihre Einschätzung überprüfen. Die Intent GmbH stattet ihre Kunden für gewöhnlich mit Onlineshops, Websites und Landingpages aus; die Arbeit mit Augmented Reality kommt als zusätzlicher Fachbereich hinzu — und sie ist für alle diese Weblösungen relevant.

Starke Verkaufsargumente für ARKit 2

Dass Apples Ankündigungen zur Augmented Reality auf der WWDC 2018 ein Höhepunkt werden würden, war absehbar. Das Thema erreicht längst nicht mehr nur Technikinteressierte: Der Bauklotzhersteller LEGO hat kürzlich eine Reihe von AR-Spielwelten angekündigt, in denen Kinder ihre gebauten Gebäude ohne Vorkenntnisse sofort beleben können. Einfacher lässt sich der Zugang kaum gestalten.

Mit ARKit 2 stellte Apple die Verwendung von USDZ-Dateien vor. Hinter dem Format stecken 3D-Modelle, die sich in konventionelle Websites und Shops einbinden lassen wie eine Grafik. Aktiviert der Kunde die AR-Funktion seines Mobilgeräts, kann er die Darstellung in den eigenen Raum projizieren und dort platzieren. Er kann sich also, so die Apple-Präsentation, eine Gitarre in einem Musikshop zusammenstellen, sie in seiner Wohnung aufstellen, aus der Nähe betrachten und sich im eigenen Ambiente vorstellen.

Onlineshops auf Augmented Reality umrüsten

Bisher war diese Art der Darstellung nur über spezielle Apps und Planungssoftware möglich. Genau das war die Hürde: Kaum jemand installiert eine App, um ein einzelnes Produkt anzusehen. Fällt dieser Schritt weg, ändert sich die Rechnung.

Die Intent GmbH ist sich sicher: Dieser Ansatz könnte dem stationären Einzelhandel Konkurrenz machen. Eines der Hauptargumente, weshalb Kunden offline einkaufen, war bisher, die Ware vorher in realer Größe im Raum zu sehen. Mit interaktiven Darstellungen können sie die Produkte nun zu sich nach Hause holen. Das Unternehmen hofft, deutsche Hersteller für die Umrüstung ihrer Onlineshops gewinnen zu können.

Wie die Einbindung technisch abläuft

Der entscheidende Unterschied zu früheren AR-Lösungen ist, dass keine Anwendung mehr dazwischensteht. Das Betriebssystem übernimmt die Darstellung, die Website liefert nur das Modell.

Auf iOS heißt die Funktion AR Quick Look. Eine USDZ-Datei wird verlinkt, das Attribut rel="ar" markiert den Link — und das System öffnet die Ansicht, in der sich das Objekt drehen, skalieren und im Raum platzieren lässt. USDZ hat Apple gemeinsam mit Pixar auf Grundlage von dessen Universal Scene Description entwickelt; das Format packt Geometrie, Texturen und Materialien in eine einzige Datei, was die Auslieferung über das Web erheblich vereinfacht.

Auf Android übernimmt der Scene Viewer dieselbe Aufgabe. Er arbeitet allerdings nicht mit USDZ, sondern mit glTF beziehungsweise dessen binärer Variante GLB — einem offenen Format, das von der Khronos Group gepflegt wird und sich als Austauschformat für 3D-Inhalte im Web durchgesetzt hat.

Zwei Plattformen, zwei Formate: Das ist der Punkt, an dem in der Praxis der Aufwand entsteht. Gelöst wird er üblicherweise über das Webkomponenten-Element <model-viewer>. Es bindet ein GLB-Modell direkt in die Seite ein, stellt es als dreh- und zoombare Vorschau dar und blendet auf Mobilgeräten eine Schaltfläche ein, die je nach System AR Quick Look oder den Scene Viewer aufruft. Für den Shop bedeutet das eine Einbindung statt zweier Sonderwege — vorhalten muss man beide Dateiformate trotzdem.

Wer über die reine Betrachtung hinaus will — Konfiguration im Raum, mehrere Objekte gleichzeitig, eigene Interaktion —, findet in WebXR die passende Browserschnittstelle. Der Aufwand steigt damit allerdings deutlich, und die Unterstützung fällt je nach Gerät und Browser unterschiedlich aus.

Woran es in der Praxis hängt

Die Darstellungstechnik kostet nichts und ist in den Betriebssystemen enthalten. Der Aufwand liegt woanders: bei den Modellen.

Ein brauchbares Produktmodell muss maßstabsgetreu sein, sonst steht das Sofa in Puppenstubengröße im Wohnzimmer und das Argument kippt ins Gegenteil. Es muss realistisch texturiert sein, weil Materialwirkung bei Möbeln und Leuchten den halben Kaufgrund ausmacht. Und es muss klein genug bleiben, um über eine Mobilfunkverbindung in vertretbarer Zeit zu laden — ein Modell mit hoher Polygonzahl und unkomprimierten Texturen ist im Shop unbrauchbar, egal wie schön es aussieht.

Daraus folgt die naheliegende Reihenfolge: nicht das ganze Sortiment erfassen, sondern die Artikel, bei denen Größe und Wirkung im Raum über den Kauf entscheiden. Möbel, Leuchten, Teppiche, größere Geräte. Wo bereits CAD-Daten aus der Produktion vorliegen, verkürzt sich der Weg erheblich, weil das Modell nicht neu gebaut, sondern für die Ausgabe im Web aufbereitet werden muss.

Auslieferung und Messbarkeit

Zwei Punkte entscheiden anschließend darüber, ob die Funktion im Alltag etwas bringt.

Der erste ist die Auslieferung. Ein 3D-Modell ist um ein Vielfaches größer als ein Produktfoto und darf deshalb nicht mit dem Seitenaufbau zusammen geladen werden. Sinnvoll ist eine Vorschaugrafik, hinter der das Modell erst auf Klick nachgeladen wird — sonst bezahlt jeder Besucher die Ladezeit für eine Funktion, die nur ein Teil überhaupt nutzt. Texturen gehören komprimiert, die Geometrie auf ein für Mobilgeräte vertretbares Maß reduziert.

Der zweite ist die Auswertung. Ob sich der Aufwand rechnet, lässt sich messen, wenn von Anfang an erfasst wird, wie oft die AR-Ansicht geöffnet wird und wie sich Bestellungen und Retouren bei den betroffenen Artikeln gegenüber vergleichbaren ohne Modell entwickeln. Ohne diese Messung bleibt die Funktion eine Vermutung — und lässt sich weder verteidigen noch gezielt ausweiten.

Wo solche Funktionen in ein Shopprojekt eingeordnet werden, steht auf unserer Seite zum E-Commerce; die technische Umsetzung im Frontend beschreibt die Seite zur Webentwicklung. Wenn die Anwendung über den Browser hinausgehen soll, führt der Weg zur App-Entwicklung. Wie die Erwartungen an virtuelle Produktdarstellung vor einigen Jahren aussahen, zeigt der Beitrag Virtual Reality im Onlineshop.