Augmented Reality im E-Commerce USDZ

Ein Produkt vor dem Kauf im eigenen Raum zu sehen, ist im Onlinehandel seit Jahren keine Zukunftsmusik mehr, sondern eine Funktion, die Möbelhäuser, Leuchtenhersteller, Sanitäranbieter und Brillenhändler produktiv betreiben. Die technische Grundlage steht auf beiden großen Mobilplattformen bereit, und der Weg in den eigenen Shop führt über ein Element, das sich wie ein Bild einbinden lässt.

Diese Seite beschreibt, welche Formate im Spiel sind, wie die Darstellung im Browser funktioniert, woher die 3D-Modelle kommen und wo der Aufwand tatsächlich liegt.

Zwei Plattformen, zwei Formate

Auf iOS und iPadOS übernimmt AR Quick Look die Darstellung. Verweist ein Link auf eine Datei im Format USDZ, öffnet Safari die Ansicht direkt, ohne dass eine App installiert werden muss. USDZ geht auf Pixars Universal Scene Description zurück und bündelt Geometrie, Texturen und Animationen in einer einzigen Datei. Apple hat das Format 2018 auf der WWDC zusammen mit ARKit 2 vorgestellt.

Auf Android heißt das Gegenstück Scene Viewer und arbeitet mit glTF beziehungsweise dessen Binärvariante GLB. Das Format stammt von der Khronos Group, ist offen spezifiziert und hat sich außerhalb der Apple-Welt als Austauschformat für Echtzeit-3D durchgesetzt.

Praktisch heißt das: Ein Produkt braucht zwei Dateien. Das ist weniger dramatisch, als es klingt, weil sich USDZ aus glTF erzeugen lässt und die Umwandlung Teil der Aufbereitung ist, nicht ein zweiter Modellierungsdurchgang.

<model-viewer> als gemeinsamer Nenner

Damit nicht zwei getrennte Wege durch den Shop laufen, gibt es das Web-Element <model-viewer>. Es wird wie ein HTML-Tag eingebunden, zeigt das GLB-Modell direkt auf der Produktseite als drehbare 3D-Ansicht und blendet auf Mobilgeräten eine Schaltfläche ein, die in die AR-Ansicht wechselt: auf Android in den Scene Viewer, auf iOS in AR Quick Look, sofern die USDZ-Datei als zweite Quelle hinterlegt ist.

Für den Shop bedeutet das eine Einbindung statt zweier Sonderwege, dazu ein Standbild als Platzhalter, damit die Produktseite nicht auf das Laden des Modells warten muss. Auf dem Desktop bleibt die drehbare Ansicht, ohne dass irgendetwas fehlt.

WebXR geht einen Schritt weiter und erlaubt AR-Anwendungen direkt im Browser, ohne den Umweg über die Systemansicht. Auf Android ist die Schnittstelle in Chrome verfügbar, auf iOS ist die Unterstützung eingeschränkt – dort bleibt AR Quick Look der verlässliche Weg. Für Produktdarstellung im Shop reicht der einfachere Weg fast immer aus; WebXR lohnt sich, wenn eine eigene Interaktion dazukommt, etwa ein Konfigurator, der Varianten im Raum durchschaltet.

Woher die 3D-Modelle kommen

Das ist der Teil, der den Aufwand bestimmt. Die Technik der Darstellung ist gelöst; die Modelle sind es nicht.

Aus vorhandenen CAD-Daten. Wer seine Produkte konstruiert, hat die Geometrie bereits. Konstruktionsdaten sind für die Echtzeitdarstellung allerdings viel zu detailliert und müssen reduziert und mit Materialien versehen werden. Der Weg ist trotzdem meist der günstigste.

Aus Fotos. Photogrammetrie rechnet aus einer Serie von Aufnahmen ein texturiertes Modell. Das funktioniert gut bei matten, formstabilen Gegenständen und schlecht bei glänzenden, durchsichtigen oder sehr dünnen. Die Werkzeuge dafür sind inzwischen auf Standardhardware nutzbar.

Neu modelliert. Bei Produkten ohne CAD-Grundlage und ohne fotografierbares Muster bleibt die Modellierung. Das ist die teuerste Variante und rechnet sich nur bei Artikeln, die lange im Sortiment bleiben.

In allen drei Fällen gilt: Das Modell muss maßhaltig sein. Der ganze Nutzen der Darstellung im Raum hängt daran, dass der Schrank genau so breit ist wie der echte. Ein falsch skaliertes Modell ist schlechter als gar keines, weil es eine Entscheidung auf falscher Grundlage herbeiführt.

Was AR im Shop leisten soll

Der Zweck ist nüchtern: eine Unsicherheit vor dem Kauf ausräumen. Passt das Sofa in die Nische? Wirkt der Farbton im eigenen Licht so wie auf dem Foto? Ist die Leuchte für den Raum zu groß? Diese Fragen sind der Grund, warum ein Warenkorb liegen bleibt, und sie sind der Grund für einen Teil der Retouren.

Deshalb wirkt AR nicht bei jedem Sortiment gleich. Sinnvoll ist es bei Produkten, die Raum einnehmen, bei denen Größe schwer vorstellbar ist oder bei denen Varianten optisch entscheiden. Bei Verbrauchsgütern und Standardartikeln bringt es nichts außer Ladezeit.

Eine Zahl, wie stark Retouren zurückgehen, nennen wir hier bewusst nicht – der Effekt hängt am Sortiment und an der Qualität der Modelle. Was sich aber messen lässt: ob Besucher, die die AR-Ansicht öffnen, häufiger bestellen und seltener zurückschicken als vergleichbare Besucher ohne. Diese Auswertung gehört von Anfang an eingeplant, sonst bleibt die Funktion eine Vermutung.

Aufwand, Grenzen und Ladezeit

Ein 3D-Modell ist ein großer Datenposten. Ein GLB im Bereich mehrerer Megabyte lädt auf einer mobilen Verbindung spürbar länger als das Produktfoto daneben. Deshalb wird das Modell nachgeladen, erst wenn jemand es anfordert, und die Produktseite baut sich unabhängig davon auf. Was dabei technisch zählt, steht im Eintrag zu Page Speed.

Die weiteren Grenzen sind ebenso praktisch: Texturen müssen komprimiert vorliegen, sonst frisst das Modell Speicher auf dem Gerät. Ältere Telefone brechen bei komplexen Szenen ab. Und die Pflege läuft mit dem Sortiment mit – jede neue Farbvariante ist ein neues Modell oder zumindest eine neue Textur.

Wie sich so etwas in einen bestehenden Shop einfügt, ohne die Produktdatenpflege zu sprengen, ist am Ende eine Frage der Systemarchitektur; die Grundlagen dazu stehen unter Webentwicklung und im Überblick zum E-Commerce.

Wie das Format entstanden ist

Die Vorstellung von USDZ auf der WWDC 2018 war der Moment, ab dem AR-Ansichten ohne eigene App funktionierten. Bis dahin musste ein Händler eine Anwendung entwickeln und Kunden dazu bewegen, sie zu installieren. Wir haben die Ankündigung damals im Beitrag zu ARKit 2 für Onlineshops eingeordnet. Was seinerzeit offen war – ob die Darstellung auf die Apple-Welt beschränkt bleibt –, hat sich mit Scene Viewer und glTF erledigt.

Was Augmented Reality bezeichnet

AR steht für Augmented Reality, auf Deutsch erweiterte Realität. Die reale Umgebung wird dabei um virtuelle Objekte ergänzt, die lagerichtig eingeblendet werden – das Kamerabild bleibt sichtbar, das Objekt kommt dazu. Anders als bei Virtual Reality, wo eine vollständig künstliche Umgebung an die Stelle der echten tritt, bleibt der Nutzer in seinem Raum.

Das bekannteste Beispiel außerhalb des Handels steht in der Sportübertragung: eingeblendete Abstandslinien und Markierungen auf dem Spielfeld, die für den Zuschauer aussehen, als lägen sie auf dem Rasen.

Umsetzung

Wir übernehmen die Aufbereitung der Modelle, die Umwandlung in USDZ und glTF, die Einbindung in Shop oder Website und die Messung, ob die Funktion tatsächlich genutzt wird. Sinnvoll ist der Einstieg über eine überschaubare Zahl von Artikeln, an denen sich zeigt, ob der Aufwand sich für Ihr Sortiment lohnt.

Welche Produkte sich dafür eignen, klären wir gern vorab. Zur Umsetzung im Shop selbst siehe Onlineshop erstellen lassen; für ein konkretes Vorhaben schreiben Sie uns kurz.