Interaktywne 3D w internecie przy użyciu sprzętu Google: usługi edukacyjne nowej generacji

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

Organizacja Google zajmująca się marketingiem urządzeń i usług (DSM) nadzoruje strategie wprowadzania na rynek szerokiej gamy produktów: telefonów, zegarków, słuchawek, tabletów, urządzeń do inteligentnego domu i odpowiednich subskrypcji. Wszystkie te produkty są dostępne w Google Store i u globalnych dostawców zewnętrznych. Klienci dowiadują się o tych produktach w internecie i w sklepach stacjonarnych.

Jednym z głównych wyzwań dla tego zespołu jest edukacja konsumentów i sprzedawców na temat zastosowań i korzyści płynących z ekosystemu sprzętowego Google oraz zaawansowanych funkcji AI. Aby pomóc konsumentom lepiej poznać produkty i funkcje, zespół DSM stworzył wirtualną przestrzeń 3D z zaawansowaną technologią internetową, która rozwiązuje wiele z tych problemów. Z tego opracowania dowiesz się, jak zespół stworzył bardziej wciągające wrażenia dla klientów, wprowadzając te nowe wrażenia w cztery razy szybciej i za połowę ceny tradycyjnych zasobów cyfrowych.

Wyzwanie: edukacja dotycząca produktu

Edukowanie pracowników obsługi klienta i klientów, którzy dopiero zaczynają korzystać ze sprzętu Google, na temat zalet funkcji takich jak interoperacyjność i sztuczna inteligencja jest kosztowne i trudne. Tradycyjne strategie edukacyjne dotyczące produktów opierają się na treściach cyfrowych tworzonych na podstawie produktów fizycznych, które są następnie hostowane na platformach do nauki w internecie. Te platformy edukacyjne zawierają specyfikacje techniczne produktów, zdjęcia i filmy, ale nie zapewniają dostępu do produktów fizycznych ani połączonych.

Tworzenie treści edukacyjnych, takich jak filmy, jest kosztowne, skomplikowane w lokalizacji na potrzeby rynków globalnych i prawie niemożliwe do ponownego wykorzystania w innych usługach. Tworzenie początkowych zasobów wymaga budżetu na casting, garderobę, poszukiwanie lokalizacji, opłaty za lokalizacje, opłaty za studio, ekipy filmowe i postprodukcję. Koszty produkcji i wyniki pracy muszą uwzględniać lokalizację. Modyfikowanie zasobów, lokalizacji, produktów, kopii i talentów jest szczególnie trudne w przypadku tradycyjnego marketingu. Biorąc pod uwagę fakt, że większość obsługiwanych produktów wprowadza nowe funkcje co kilka miesięcy, te zasoby są już nieaktualne, gdy zostaną ukończone.

lepsze sposoby udostępniania informacji o produktach,

Aby znaleźć lepszy sposób na udostępnianie informacji o produktach, zespół DSM eksperymentował z wykorzystaniem VR/AR w aplikacji. Wyniki były obiecujące: zwiększyło się zaangażowanie, a także wielkość koszyka w punktach sprzedaży. Jednak pobieranie aplikacji było znaczną barierą wejścia zarówno dla pracowników działu sprzedaży, jak i dla klientów, a ograniczenie możliwości do aplikacji oznaczało, że nie można było jej osadzać w innych usługach własnych lub zewnętrznych, takich jak store.google.com.

Lekkie rozwiązania z użyciem <model-viewer>

Po sukcesie modeli 3D produktów w ramach edukacji na temat produktów zespół zdecydował się zastosować to podejście w internecie. Jednym ze sposobów jest użycie <model-viewer> do tworzenia wrażeń 3D z wykorzystaniem poszczególnych produktów.

<model-viewer> to komponent internetowy, który umożliwia deklaratywnie dodawanie modelu 3D do strony internetowej, a jednocześnie przechowywanie modelu w Twojej witrynie. Możesz to zobaczyć na stronie Pixel Fold w Google Store, gdzie <model-viewer> pozwala użytkownikom zobaczyć Pixel Fold pod dowolnym kątem i w różnych pozycjach. Model 3D można było łatwo zintegrować z resztą interfejsu HTML, korzystając z przycisków, które opowiadają historię za pomocą kątów kamery i interaktywnych wariantów kolorów. Dzięki <model-viewer> możesz zaoferować użytkownikom dowolne wrażenia.

Tworzenie modeli 3D

Pierwszym krokiem do stworzenia wirtualnego środowiska 3D jest utworzenie modeli 3D produktów. Zespół DSM stworzył modele 3D w systemie CAD. Dzięki ścisłej współpracy z projektantami tworzącymi modele CAD produktów udało się wyeksportować rendery o niskiej liczbie wielokątów, które można było zoptymalizować pod kątem internetu. Oto niektóre sprawdzone metody, które pomogły im osiągnąć ten wynik.

  • Geometria:
    • Skup się na dokładnym odwzorowaniu geometrii (kształtu i skali) pod każdym kątem.
    • Unikaj używania map normalnych do zaokrągleń krawędzi.
    • Tworzenie naklejek jako osobnej geometrii.
  • Kolory i materiały:
    • Cel: spójna wizualizacja właściwości fizycznych.
    • Weź pod uwagę dynamikę oświetlenia w czasie rzeczywistym.
    • Używaj oddzielnych zestawów tekstur i materiałów dla każdego typu siatki (nieprzezroczystej, przezroczystej z teksturą i dekalki).
    • W razie potrzeby przeprowadź kolejne iteracje projektów z początkowymi projektantami CAD.
  • Rozmiar pliku:
    • Wyeksportuj model o niskiej liczbie wielokątów w formacie GLB, aby można go było używać w <model-viewer>.
    • Kompresowanie geometricznych siatek ręcznie przez projektanta 3D, za pomocą oprogramowania zewnętrznego lub za pomocą oprogramowania do kompresji, takiego jak DRACO (OS).

Ponieważ te modele 3D będą często używane na telefonach komórkowych, zostały zoptymalizowane przez ustawienie maksymalnego rozmiaru pliku z teksturami wynoszącego 2 MB, aby umożliwić obsługę urządzeń starszej generacji i słabych połączeń z internetem.

<model-viewer>

Zespół DSM używa komponentu internetowego open source <model-viewer> firmy Google do umieszczania nowo utworzonych modeli 3D na stronach internetowych. Aby modele utworzone w kroku 1 były zgodne z <model-viewer>, zasoby muszą być w formacie GLTF lub GLB (rozszerzenie .glb). Oba formaty są zwarte, kompresowane i szybko wczytywane do GPU. Komponent <model-viewer> jest obsługiwany przez wszystkie główne przeglądarki evergreen.

Podczas tego etapu największym wyzwaniem dla zespołu DSM było to, że paleta kolorów sprzętu Google nie była renderowana prawidłowo. Ostatecznie zespół odkrył, że za utracone kolory odpowiada mapowanie tonów ACES (standard w branży filmowej). Aby rozwiązać ten problem, opracowali nowy Khronos PBR Neutral Tone Mapper, który ma na celu rozwiązanie tych niedoskonałości i dokładne odwzorowanie kolorów na ekranie, przy jednoczesnym unikaniu przepalonych świateł i przesunięć odcieni związanych z mapowaniem tonów liniowych.

<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>

Więcej informacji o <model-viewer> znajdziesz na stronie modelviewer.dev. Aby przetestować modele 3D i pobrać całą stronę startową, skorzystaj z naszego edytora.

Zaawansowane rozwiązania z użyciem three.js

<model-viewer> to świetny, wydajny sposób wyświetlania modelu 3D i interakcji z nim. Czasami jednak zespół DSM potrzebował bardziej wciągającego i połączonego z internetem środowiska niż to, które oferuje <model-viewer>. Przykładem jest tu premiera Nest Mini + C. <model-viewer> mogłaby umożliwić potencjalnym klientom obejrzenie produktu w 3D w internecie, ale nie mogłaby pokazać jego przydatności w połączeniu z innymi produktami Google Hardware i funkcjami AI, takimi jak Asystent.

Aby to zrobić, zespół użył biblioteki, na której opiera się <model-viewer>, three.js. Three.js to silnik gier JavaScript typu open source. Dzięki niemu zespół był w stanie stworzyć środowisko wirtualnego domu z kamerami, światłami i głośnikami Nest. Dzięki temu zespół mógł w czasie rzeczywistym otrzymywać informacje o tym, jak urządzenia ze sobą współpracują.

Dialogflow

Ostatnim krokiem w tworzeniu połączonych usług jest dodanie Asystenta Google. Dzięki temu użytkownicy mogli wypróbować autentyczne polecenia i rutyny w ramach połączonego wirtualnego środowiska. Jednak wstawienie Asystenta Google z obecnego konta użytkownika wiązałoby się z kilkoma problemami związanymi z prywatnością. Aby stworzyć rozwiązanie skoncentrowane na ochronie prywatności, DSM współpracowało z usługą Google Cloud Dialogflow, aby odwzorować Asystenta Google w tej dziedzinie. Ten ogólny diagram pokazuje, jak aplikacja internetowa korzystała z interfejsu API Dialogflow (przekształcony z podstawy Dialogflow). W przypadku każdej konwersacyjnej kolejki aplikacja internetowa korzystała z klasyfikacji intencji Dialogflow, a interfejs API zwracał wstępnie określone wyrażenia użytkownika, które pasowały do intencji.

Schemat przepływów danych użytkownika

Więcej informacji o Dialogflow znajdziesz w dokumentacji Google Cloud.

Wynik końcowy: element iframe, który można osadzić

Efektem końcowym jest biblioteka zasobów, które można osadzić na stronie internetowej za pomocą <model-viewer>, lub wykorzystać w pełnym środowisku wirtualnym, aby pomóc klientom dowiedzieć się więcej o poszczególnych produktach i ich wzajemnych powiązaniach. Ta usługa jest autentyczna, skalowalna i ekonomiczna. Pierwsze wirtualne doświadczenie zostało udostępnione w maju 2021 r. i chociaż nie jest już dostępne na stronie Google Store, możesz je wypróbować.

Wyniki

Od premiery Nest Mini +C zespół DSM mógł ponownie używać i rozwijać framework, który przez ostatnie 2 lata był wykorzystywany do coraz skuteczniejszych premier urządzeń z portfolio Pixel. Dzięki wdrożeniu iteracji tych zasobów 3D i doświadczeń z ich użyciem zespół był w stanie do tej pory czterokrotnie zwiększyć liczbę interaktywnych narzędzi edukacyjnych dotyczących produktów i potroić liczbę produktów korzystających z tej technologii internetowej.

Efektem końcowym jest autentyczne szkolenie dotyczące produktów z marką, które obejmuje coraz większą liczbę przypadków użycia na skalę bardziej zrównoważoną, spójną i interaktywną niż w przypadku poprzednich strategii. Zespół DSM dysponuje solidnym portfolio komponentów, które umożliwiają tworzenie wciągających doświadczeń, które można szybko dostosować do dynamicznych celów biznesowych. Dzięki tym ulepszeniom zespół DSM może wdrażać nowe materiały edukacyjne dotyczące produktów 4 razy szybciej i za mniej niż połowę kosztów niż w przypadku wcześniejszych, bardziej tradycyjnych procesów.