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, wdrażając nowe rozwiązania 4 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 poznają sprzęt Google, na temat zalet takich funkcji jak interoperacyjność i sztuczna inteligencja, jest kosztowne i trudne. Tradycyjne strategie edukacyjne dotyczące produktów opierają się na treściach cyfrowych tworzonych z wykorzystaniem produktów fizycznych, a następnie hostowanych na platformach do nauki w trybie online. 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 przypadku lokalizacji na potrzeby rynków globalnych i prawie niemożliwe do ponownego użycia 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 prace postprodukcyjne. 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 otrzymuje nowe funkcje co kilka miesięcy, te zasoby są już nieaktualne, gdy zostaną ukończone.
Wyszukiwanie lepszych sposobów 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. Pobieranie aplikacji było jednak znaczną barierą wejścia zarówno dla pracowników działu sprzedaży, jak i dla klientów. 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 na to 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 pozostałymi elementami 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 tym, aby geometria (kształt i skala) była prawidłowa 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ą dostawcy lub za pomocą oprogramowania do kompresji, takiego jak DRACO (OS).
- Wyeksportuj model o niskiej liczbie wielokątów w formacie GLB, aby można go było używać w
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 tonacji ACES (standard w branży filmowej). Aby rozwiązać ten problem, opracowaliśmy 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 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ącej i połączonej z internetem aplikacji niż <model-viewer>. Przykładem jest wprowadzenie na rynek Nest Mini + C. <model-viewer> mogłaby umożliwić potencjalnym klientom obejrzenie produktu w 3D w internecie, ale nie mogłaby pokazać, jak dobrze sprawdza się w połączeniu z innymi produktami Google Hardware i funkcjami AI, takimi jak Asystent.
W tym celu zespół wykorzystał bibliotekę stanowiącą podstawę <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 dotychczasowego konta użytkownika wiązałoby się z kilkoma problemami związanymi z prywatnością. Aby stworzyć rozwiązanie skoncentrowane na ochronie prywatności, firma DSM współpracowała z usługą Google Cloud Dialogflow, aby naśladować 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.
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. Jest to autentyczne, skalowalne i wydajne rozwiązanie. 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 potroić 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 zapewniają wciągające wrażenia i mogą być szybko dopasowywane do dynamicznych celów biznesowych. Dzięki tym ulepszeniom zespół DSM może wdrażać nowe treści edukacyjne dotyczące produktów 4 razy szybciej i za mniej niż połowę kosztów w porównaniu z wcześniejszymi, bardziej tradycyjnymi procesami.