Dział marketingu urządzeń i usług Google nadzoruje strategie wprowadzania na rynek szerokiej gamy produktów: smartfonów, zegarków, słuchawek dousznych, tabletów, inteligentnych urządzeń domowych oraz powiązanych subskrypcji. Wszystko to jest dostępne zarówno w Google Store, jak i w sklepach zewnętrznych dostawców na całym świecie. Klienci dowiadują się o tych produktach zarówno online, jak i w sklepach stacjonarnych.
Jednym z nieustannych wyzwań dla tego zespołu jest informowanie klientów i sprzedawców o przypadkach użycia oraz zaletach ekosystemu sprzętowego Google i zaawansowanych rozwiązań AI. Aby ułatwić konsumentom poznanie produktów i funkcji, zespół DSM stworzył wirtualną przestrzeń 3D przy użyciu zaawansowanej technologii internetowej, która sprostała wielu z tych problemów. Z tego studium przypadku dowiesz się, jak zespół zapewnił klientom bardziej atrakcyjne wrażenia, uruchamiając nowe wersje 4 razy szybciej i przy koszcie niższym o połowę w porównaniu z tradycyjnymi zasobami cyfrowymi.
Wyzwanie: edukacja w zakresie usług
Przeszkolenie sprzedawców i klientów, którzy dopiero zaczynają korzystać ze sprzętu Google, na temat korzyści płynących z takich funkcji jak interoperacyjność i AI jest kosztowne i trudne. Tradycyjne strategie edukacyjne opierają się na treściach cyfrowych, które są tworzone z użyciem fizycznych produktów, a następnie hostowane na cyfrowych platformach edukacyjnych. Platformy te zawierają specyfikacje techniczne produktów, zdjęcia i filmy, ale nie zapewniają dostępu do fizycznych ani połączonych produktów.
Tworzenie treści edukacyjnych, takich jak filmy, jest kosztowne, złożone do zlokalizowania na rynki globalne i prawie niemożliwe do ponownego wykorzystania w różnych usługach. Stworzenie początkowych zasobów wymaga budżetu na obsadę, garderobę, rozpoznanie lokalizacji, opłaty lokalizacji, opłaty studyjne, ekipy filmowe i prace postprodukcyjne. Koszty produkcji i materiałów do dostarczenia muszą też brać pod uwagę lokalizację. Zmiana zasobów, lokalizacji, produktów, tekstów i pracowników jest szczególnie trudna w przypadku zarządzania tradycyjnym marketingiem na dużą skalę. Jeśli weźmiesz pod uwagę, że funkcje w większości obsługiwanych usług są zmniejszane co kilka miesięcy, zobaczysz, że te zasoby są nieaktualne, zanim przestaną być używane.
Poznawanie lepszych sposobów udostępniania informacji o produktach
Szukając lepszego sposobu udostępniania informacji o produkcie, zespół DSM eksperymentował z funkcjami VR/AR w aplikacji. Wyniki były obiecujące zarówno w zwiększeniu zaangażowania użytkowników, jak i większej wielkości koszyków w punktach sprzedaży. Pobrania aplikacji stanowiły jednak poważną przeszkodę zarówno dla sprzedawców, jak i klientów, a ograniczenie dostępu do aplikacji oznaczało, że nie można jej umieścić w innych usługach własnych lub innych firm, takich jak store.google.com.
Lekkie rozwiązania dzięki <model-viewer>
Po sukcesie modeli 3D w edukacji o usługach zespół zdecydował się wprowadzić to podejście do internetu. Możesz to robić np. za pomocą narzędzia <model-viewer> do tworzenia atrakcji 3D z poszczególnymi produktami.
<model-viewer> to komponent internetowy, który umożliwia deklaratywne dodawanie modelu 3D do strony internetowej i hostowanie go w Twojej witrynie.
Widać to w praktyce na stronie Pixel Fold w Google Store, gdzie <model-viewer> umożliwia użytkownikom oglądanie urządzenia Pixel Fold pod dowolnym kątem i w różnych złożonych pozycjach. Łatwo było zintegrować model 3D z pozostałymi elementami interfejsu HTML, dodając przyciski do opowiadania historii za pomocą różnych kątów kamery i interaktywnych wersji kolorystycznych. Dzięki <model-viewer> możesz zapewnić użytkownikom wszystko, co tylko chcesz.
Tworzenie modeli 3D
Pierwszym krokiem do opracowania wirtualnego doświadczenia 3D jest utworzenie modeli produktów 3D. Zespół DSM stworzył swoje modele 3D w technologii CAD. Dzięki ścisłej współpracy z projektantami zajmującymi się tworzeniem modeli CAD DSM udało się wyeksportować obiekty renderowane w niskiej jakości poly, które można zoptymalizować pod kątem internetu. Oto niektóre ze sprawdzonych metod, które zastosowali, aby to osiągnąć.
- Geometria:
- Skup się na zapewnieniu dokładnej geometrii (kształtu i skali) pod każdym kątem.
- Unikaj używania normalnych map do cięcia krawędzi.
- Twórz naklejki jako oddzielne elementy geometryczne.
- Kolory i materiały:
- Cel: spójna wizualna reprezentacja właściwości fizycznych.
- Zastanów się nad dynamiką oświetlenia w czasie rzeczywistym.
- Użyj oddzielnych zestawów tekstur i materiałów dla każdego typu siatki (nieprzezroczyste, przezroczyste, kalkomania).
- W razie potrzeby powielaj projekty z pierwotnymi projektami CAD.
- Rozmiar pliku:
- Wyeksportuj model jako model mało wielokątny w formacie GLB, aby mógł go używać
<model-viewer>. - Skompresuj sieci geometryczne ręcznie za pomocą projektanta 3D, współpracy z dostawcą lub oprogramowania kompresji, takiego jak DRACO (OS).
- Wyeksportuj model jako model mało wielokątny w formacie GLB, aby mógł go używać
Takie modele 3D były często używane na telefonach komórkowych, więc zostały zoptymalizowane przez ustawienie maksymalnego rozmiaru pliku z teksturami o wielkości 2 MB. Pozwoli to na obsługę urządzeń starszej generacji i słabe połączenia z internetem.
<model-viewer>
Zespół DSM używa udostępnianego przez Google komponentu internetowego typu open source <model-viewer>, aby umieszczać nowo utworzone modele 3D na stronach internetowych. Aby modele utworzone w kroku 1 były zgodne z metodą <model-viewer>, zasoby muszą być w formacie gITF lub GLB (rozszerzenie .glb). Oba formaty są kompaktowe i szybko się wczytują do GPU. Komponent <model-viewer> jest obsługiwany przez wszystkie główne przeglądarki, które zawsze są aktualne.
Największym wyzwaniem podczas tego etapu było nieprawidłowe wyrenderowanie palety kolorów sprzętu Google. W końcu zespół odkrył, że za utratę kolorów odpowiada mapowanie tonacji ACES (standard w branży filmowej). Aby rozwiązać ten problem, firma opracowała nową aplikację do mapowania tonów neutralnych Khronos, która pozwala wyeliminować te niedoskonałości i dokładnie wyświetlać kolory na ekranie, a jednocześnie uniknąć wypalonych podświetleń i przesunięć barw związanych z mapowaniem liniowym.
<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>
Aby dowiedzieć się więcej o funkcji <model-viewer>, wejdź na modelviewer.dev. Aby przetestować modele 3D i pobrać całą witrynę startową, skorzystaj z naszego edytora.
Ciężkie rozwiązania z 3.js.
<model-viewer> to świetny, skuteczny sposób na wyświetlanie i interakcję z jednym modelem 3D. Czasami jednak zespół DSM potrzebował bardziej wciągających i interaktywnych rozwiązań internetowych, niż jest to możliwe w <model-viewer>. Jednym z przykładów jest wprowadzenie na rynek urządzeń Nest Mini + C. <model-viewer> może umożliwić potencjalnym klientom obejrzenie produktu w 3D w internecie, ale nie będzie w stanie wykazać jego przydatności w połączeniu z innymi produktami Google związanymi ze sprzętem Google czy funkcjami AI, takimi jak asystent.
W tym zadaniu zespół skorzystał z biblioteki opartej na pliku <model-viewer>, three.js. Three.js to JavaScript typu open source. Nasz zespół stworzył szkielet zasobów wielokrotnego użytku dla wirtualnego środowiska domowego, w którym znalazły się wewnętrzne kamery, oświetlenie i głośniki Nest. Dzięki temu zespół mógł zbierać opinie w czasie rzeczywistym na temat interakcji tych urządzeń ze sobą.
Dialogflow
Ostatnim elementem tworzenia połączonych funkcji jest dodanie Asystenta Google. Dzięki temu użytkownicy mogli wypróbować autentyczne polecenia i rutyny w interaktywnym środowisku wirtualnym. Jednak wstawienie Asystenta Google z istniejącego konta użytkownika narasta jednak wiele problemów związanych z prywatnością. Aby stworzyć rozwiązanie zapewniające ochronę prywatności, DSM współpracował z usługą Google Cloud Dialogflow, naśladując Asystenta Google w tym pokoju. Poniższy ogólny diagram pokazuje, jak aplikacja internetowa używała interfejsu Dialogflow API (zastosowanego na podstawie podstawowych informacji Dialogflow). W przypadku każdej ścieżki rozmowy aplikacja internetowa używała klasyfikacji intencji Dialogflow, a interfejs API zwracał wstępnie określone wyrażenia użytkownika odpowiadające intencjom.
Więcej informacji o Dialogflow, znajdziesz w dokumentacji Google Cloud.
Wynik końcowy: element iframe do umieszczenia
Efektem końcowym jest biblioteka zasobów, które można umieścić 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 o tym, jak łączą się one ze sobą. Jest ono zarówno autentyczne, skalowalne, jak i ekonomiczne. Ta pierwsza wirtualna usługa została wprowadzona w maju 2021 r. i chociaż nie jest już dostępna w witrynie Google Store, nadal możesz ją wypróbować.
Wyniki
Od czasu wprowadzenia na rynek Nest Mini +C DSM może wykorzystać i rozszerzyć naszą ofertę z ostatnich 2 lat portfolio Pixela, osiągając coraz większe sukcesy. Dzięki wdrożeniu iteracji tych zasobów i doświadczeń 3D zespół do tej pory podwoił liczbę interaktywnych szkoleń produktowych i trzykrotnie zwiększył liczbę produktów, z których może korzystać ta technologia internetowa.
W rezultacie powstaje markowa, autentyczna edukacja dotycząca usługi, która rozwija się na większą skalę przypadków użycia na dużą skalę i jest bardziej trwała, spójna i interaktywna niż wcześniejsze strategie. W przyszłości zespół DSM ma teraz bogate portfolio komponentów immersyjnych, które można szybko dostosowywać do dynamicznych celów biznesowych. Dzięki tym ulepszeniom zespół DSM może wprowadzać treści edukacyjne dotyczące nowych usług 4 razy szybciej i mniej o połowę taniej niż w przypadku wcześniejszych, bardziej tradycyjnych procesów.