Interaktives 3D im Web mit Google-Hardware: Präzisions- und Lernerlebnis der nächsten Generation

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish

Die Abteilung „Devices and Services Marketing“ (DSM) von Google ist für die Markteinführungsstrategien einer breiten Palette von Produkten verantwortlich: Smartphones, Smartwatches, In-Ear-Kopfhörer, Tablets, Smart-Home-Geräte und relevante Abos. Diese Produkte sind sowohl im Google Store als auch bei globalen Drittanbietern erhältlich. Nutzer erfahren online und im Einzelhandel von diesen Produkten.

Eine ständige Herausforderung für dieses Team besteht darin, Verbraucher und Einzelhändler über die Anwendungsfälle und Vorteile des Google-Hardware-Ökosystems und der erweiterten KI zu informieren. Um den Verbrauchern die Produkte und Funktionen besser zu vermitteln, hat das DSM-Team einen virtuellen 3D-Raum mit fortschrittlicher Webtechnologie erstellt, um viele dieser Herausforderungen zu meistern. In dieser Fallstudie erfahren Sie, wie das Team ein immersiveres Erlebnis für Kunden geschaffen hat und diese neuen Funktionen viermal schneller und zu einem Drittel der Kosten herkömmlicher digitaler Assets eingeführt hat.

Die Herausforderung: Produktschulung

Es ist teuer und schwierig, Verkäufer und Kunden, die mit Google-Hardwareprodukten noch nicht vertraut sind, über die Vorteile von Funktionen wie Interoperabilität und KI aufzuklären. Traditionelle Strategien zur Produktaufklärung beruhen auf digitalen Inhalten, die mit physischen Produkten erstellt und dann auf digitalen Lernplattformen gehostet werden. Diese Lernplattformen bieten technische Produktspezifikationen, Bilder und Videos, aber keinen Zugriff auf physische oder verbundene Produkte.

Lerninhalte wie Videos sind teuer in der Produktion, komplex zu lokalisieren für globale Märkte und nahezu unmöglich für andere Produkte wiederzuverwenden. Für die Erstellung der ersten Assets sind Budgets für Casting, Garderobe, Location-Scouting, Locationgebühren, Studiogebühren, Filmcrews und Postproduktionsarbeiten erforderlich. Bei den Produktionskosten und den zu liefernden Inhalten muss auch die Lokalisierung berücksichtigt werden. Die Änderung von Assets, Standorten, Produkten, Texten und Talenten ist für traditionelles Marketing im großen Maßstab besonders schwierig. Wenn man bedenkt, dass die meisten unterstützten Produkte alle paar Monate neue Funktionen erhalten, sind diese Assets oft schon veraltet, wenn sie fertig sind.

Bessere Möglichkeiten zur Weitergabe von Produktinformationen

DSM wollte eine bessere Möglichkeit finden, Produktinformationen zu teilen, und experimentierte mit VR-/AR-Inhalten in einer App. Die Ergebnisse waren vielversprechend: Sowohl das Engagement als auch die Warenkorbgrößen an den Verkaufsstellen stiegen. App-Downloads waren jedoch eine erhebliche Einstiegsbarriere sowohl für Vertriebsmitarbeiter als auch für Kunden. Da die Funktion auf eine App beschränkt war, konnte sie nicht in andere Properties von Google oder Drittanbietern wie store.google.com eingebettet werden.

Leichtgewichtige Lösungen mit <model-viewer>

Nachdem das Team den Erfolg von 3D-Produktmodellen für die Produktaufklärung gesehen hatte, beschloss es, diesen Ansatz ins Web zu bringen. Eine Möglichkeit dazu ist die Verwendung von <model-viewer>, um 3D-Inhalte mit einzelnen Produkten zu erstellen.

<model-viewer> ist eine Webkomponente, mit der Sie einer Webseite deklarativ ein 3D‑Modell hinzufügen und das Modell auf Ihrer eigenen Website hosten können. Das können Sie auf der Seite Pixel Fold im Google Store sehen, wo Nutzer mit <model-viewer> Pixel Fold aus jedem Blickwinkel und in verschiedenen aufgefalteten Positionen sehen können. Es war einfach, das 3D‑Modell in den Rest der HTML-UX-Oberfläche einzubinden, mit Schaltflächen, die eine Geschichte durch Kamerawinkel und interaktive Farbvarianten erzählen. Mit <model-viewer> kannst du deinen Nutzern jede erdenkliche Funktion bieten.

3D-Modelle erstellen

Der erste Schritt zur Entwicklung einer virtuellen 3D-Umgebung besteht darin, die 3D-Produktmodelle zu erstellen. Das DSM-Team hat seine 3D‑Modelle in CAD erstellt. Durch die enge Zusammenarbeit mit den Designern, die das Produkt-CAD erstellten, konnte das DSM-Team Low-Poly-Renderings exportieren, die für das Web optimiert werden konnten. Einige der Best Practices, die sie dabei angewendet haben, betrafen die folgenden Bereiche.

  • Geometrie:
    • Achten Sie darauf, dass die Geometrie (Form und Skalierung) aus jedem Blickwinkel korrekt ist.
    • Verwenden Sie keine Normalmaps für abgeschrägte Kanten.
    • Erstellen Sie Decals als separate Geometrie.
  • Farben und Materialien:
    • Ziel: Einheitliche visuelle Darstellung der physikalischen Eigenschaften.
    • Berücksichtigen Sie die Lichtdynamik in Echtzeit.
    • Verwenden Sie für jeden Mesh-Typ (undurchsichtig, transparent, Decal) separate Textursätze und Materialien.
    • Wenn weitere Anpassungen erforderlich sind, überarbeiten Sie die Designs mit den ursprünglichen CAD-Designern.
  • Dateigröße:
    • Exportieren Sie das Modell als Low-Poly-Modell im GLB-Format, damit es von <model-viewer> verwendet werden kann.
    • Die geometrischen Netze manuell von einem 3D-Designer, einem Anbieter oder über Komprimierungssoftware wie DRACO (OS) komprimieren.

Da diese 3D‑Modelle häufig auf Smartphones verwendet werden, wurden sie optimiert, indem eine maximale Dateigröße mit Texturen von 2 MB festgelegt wurde, um Geräte der älteren Generation und schwache Internetverbindungen zu unterstützen.

<model-viewer>

Das DSM-Team verwendet die <model-viewer>-Open-Source-Webkomponente von Google, um die neu erstellten 3D‑Modelle in seine Webseiten einzubetten. Damit die in Schritt 1 erstellten Modelle mit <model-viewer> kompatibel sind, müssen die Assets im glTF- oder GLB-Format (Erweiterung .glb) vorliegen. Beide Formate sind kompakt, komprimierbar und werden schnell in die GPU geladen. Die <model-viewer>-Komponente wird von allen gängigen Evergreen-Browsern unterstützt.

Die größte Herausforderung bei diesem Schritt war, dass die Farbpalette der Google-Hardware nicht korrekt gerendert wurde. Das Team fand schließlich heraus, dass das ACES-Tonmapping (ein Standard der Filmbranche) für die verlorenen Farben verantwortlich war. Um dieses Problem zu lösen, haben sie einen neuen Khronos PBR Neutral Tone Mapper entwickelt, der speziell auf diese Mängel zugeschnitten ist und Farben präzise auf dem Bildschirm darstellt, ohne dass es zu überbelichteten Highlights und Farbverschiebungen kommt, die mit linearem Tone Mapping verbunden sind.

<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>

Weitere Informationen zu <model-viewer> finden Sie unter modelviewer.dev. Wenn Sie Ihre 3D-Modelle testen und eine vollständige Start-Website herunterladen möchten, verwenden Sie unseren Editor.

Schwergewichtige Lösungen mit three.js

<model-viewer> ist eine hervorragende, leistungsstarke Möglichkeit, ein 3D‑Modell darzustellen und damit zu interagieren. Manchmal benötigte das DSM-Team jedoch eine immersivere und vernetztere Weboberfläche, als mit <model-viewer> möglich ist. Ein Beispiel hierfür ist die Einführung von Nest Mini + C. Mit <model-viewer> konnten potenzielle Kunden ein Produkt im Web in 3D erleben, aber nicht seine Nützlichkeit in Kombination mit anderen Google-Hardwareprodukten und KI-Funktionen wie Assistant zeigen.

Für diese Aufgabe wandte sich das Team an die Bibliothek, die <model-viewer> zugrunde liegt: three.js. Three.js ist eine Open-Source-JavaScript-Game-Engine. Mit ihr konnte das Team ein Framework mit wiederverwendbaren Assets für eine virtuelle Haushaltsumgebung mit Nest-Innenkameras, -Lampen und -Lautsprechern erstellen. So konnte das Team in Echtzeit Feedback dazu geben, wie die Geräte miteinander interagierten.

Dialogflow

Als letzten Schritt fügen Sie Google Assistant hinzu. So konnten Nutzer authentische Befehle und Abläufe mit der vernetzten virtuellen Umgebung ausprobieren. Das Einfügen von Google Assistant über das vorhandene Konto des Nutzers würde jedoch eine Reihe von Datenschutzproblemen aufwerfen. Um eine datenschutzorientierte Lösung zu entwickeln, arbeitete DSM mit dem Google Cloud Dialogflow-Dienst zusammen, um Google Assistant in diesem Bereich nachzuahmen. Das folgende allgemeine Diagramm zeigt, wie die Web-App die Dialogflow API verwendet (angepasst aus den Dialogflow-Grundlagen). Für jede Unterhaltungsrunde verwendete die Webanwendung die Intent-Klassifizierung von Dialogflow und die API gab vordefinierte Endnutzerausdrücke zurück, die dem Intent entsprachen.

Ein Diagramm der Aufrufabfolgen.

Weitere Informationen zu Dialogflow finden Sie in der Google Cloud-Dokumentation.

Endergebnis: ein einbettbarer iFrame

Das Endergebnis ist eine Asset-Bibliothek, die mit <model-viewer> in eine Webseite eingebettet oder in einer vollständig virtuellen Umgebung verwendet werden kann, damit Kunden mehr über einzelne Produkte und ihre Verknüpfung erfahren. Die Lösung ist authentisch, skalierbar und kostengünstig. Diese erste virtuelle Erfahrung wurde im Mai 2021 eingeführt. Sie ist zwar nicht mehr auf der Website des Google Store verfügbar, Sie können sie aber trotzdem ausprobieren.

Die Ergebnisse

Seit der Einführung von Nest Mini +C konnte das DSM das Framework für die Einführungen des Pixel-Portfolios in den letzten zwei Jahren mit wachsendem Erfolg wiederverwenden und erweitern. Durch die Iteration dieser 3D-Assets und ‑Umgebungen konnte das Team bisher die Anzahl der interaktiven Produktschulungen vervierfachen und die Anzahl der Produkte, die von dieser Webtechnologie profitieren, verdreifachen.

Das Endergebnis ist eine authentische Produktschulung mit Markenbezug für eine wachsende Anzahl von Anwendungsfällen im großen Stil, die nachhaltiger, einheitlicher und interaktiver ist als frühere Strategien. Und in Zukunft hat das DSM-Team jetzt ein solides Portfolio an Komponenten für eine immersive Erfahrung, das es schnell an dynamische Geschäftsziele anpassen kann. Dank dieser Verbesserungen kann das DSM-Team neue Produktschulungsinhalte viermal schneller und zu weniger als der Hälfte der Kosten der früheren, traditionelleren Prozesse veröffentlichen.