Отдел Google по маркетингу устройств и услуг (DSM) курирует стратегии вывода на рынок широкого спектра продуктов: смартфонов, часов, наушников, планшетов, устройств для умного дома и соответствующих подписок, которые доступны как через Google, так и через Google. Магазин и сторонние поставщики по всему миру. Люди узнают об этих продуктах в Интернете и в обычных розничных магазинах.
Одной из постоянных задач для этой команды является информирование потребителей и розничных продавцов о вариантах использования и преимуществах аппаратной экосистемы Google и передовых возможностей искусственного интеллекта. Чтобы помочь потребителям лучше понять продукты и функциональные возможности, команда DSM создала виртуальное 3D-пространство с использованием передовых веб-технологий для решения многих из этих проблем. В этом тематическом исследовании вы можете узнать, как команда создала более захватывающий опыт для клиентов, запустив эти новые возможности в четыре раза быстрее и за половину стоимости традиционных цифровых активов.
Задача: обучение продукту
Обучение продавцов и клиентов, впервые использующих аппаратные продукты Google, преимуществам таких функций, как совместимость и искусственный интеллект, обходится дорого и сложно. Традиционные стратегии обучения продуктам основаны на цифровом контенте, который создается с использованием физических продуктов, а затем размещается на платформах цифрового обучения. Эти обучающие платформы предоставляют технические характеристики продуктов, изображения и видео, но не предоставляют доступ к физическим или подключенным продуктам.
Учебный контент, такой как видео, дорого производить, его сложно локализовать для глобальных рынков и практически невозможно повторно использовать в разных продуктах. Создание первоначальных активов требует бюджетов на кастинг, гардероб, поиск локаций, оплату локаций, гонорары студии, съемочную группу и постпродакшн. Производственные затраты и результаты также должны учитывать локализацию; изменение активов, местоположений, продуктов, текста и талантов особенно сложно контролировать в масштабе традиционного маркетинга. А если учесть, что большинство поддерживаемых продуктов теряют функции каждые пару месяцев, эти активы уже устарели к моменту их завершения.
Изучаем более эффективные способы обмена информацией о продуктах
Пытаясь найти лучший способ поделиться информацией о продукте, команда DSM экспериментировала с возможностями VR/AR в приложении. Результаты оказались многообещающими: возросло взаимодействие и увеличился размер корзин в точках продаж. Однако загрузка приложений была серьезным барьером для входа как для продавцов, так и для клиентов, а ограничение опыта приложения означало, что его нельзя было встроить в другие собственные или сторонние ресурсы, такие как store.google.com .
Облегченные решения с <model-viewer>
Увидев успех 3D-моделей продуктов для обучения продуктам, команда решила перенести этот подход в Интернет. Один из способов добиться этого — использовать <model-viewer> для создания 3D-эффектов с отдельными продуктами.
<model-viewer> — это веб-компонент, который позволяет вам декларативно добавлять 3D-модель на веб-страницу, размещая ее на своем собственном сайте. Вы можете увидеть это в действии на странице Pixel Fold в Google Store, где <model-viewer> позволяет пользователям видеть Pixel Fold под любым углом и в различных сложенных положениях. Было легко интегрировать 3D-модель в остальную часть пользовательского интерфейса HTML с кнопками, позволяющими рассказывать историю с помощью ракурсов камеры и интерактивных цветовых вариантов. С помощью <model-viewer> вы можете предоставить своим пользователям любые впечатления, о которых только можно мечтать.
Создание 3D-моделей
Первым шагом к разработке виртуального 3D-опыта является создание 3D-моделей продукта. Команда DSM создала свои 3D-модели в САПР. Тесно сотрудничая с дизайнерами, создающими САПР, команда DSM смогла экспортировать низкополигональные рендеры, которые можно было оптимизировать для Интернета. Некоторые из лучших практик, которые они использовали для достижения этой цели, касались следующих областей.
- Геометрия:
- Сосредоточьтесь на том, чтобы геометрия (форма и масштаб) была точной со всех сторон.
- Избегайте использования карт нормалей для скашивания краев.
- Создавайте декали как отдельную геометрию.
- Цвета и материалы:
- Цель: последовательное визуальное представление физических свойств.
- Учитывайте динамику освещения в реальном времени.
- Используйте отдельные наборы текстур и материалы для каждого типа сетки (непрозрачная, прозрачная, декаль).
- Если потребуются дополнительные корректировки, работайте над проектами вместе с оригинальными дизайнерами САПР.
- Размер файла:
- Экспортируйте как низкополигональную модель в формате GLB, чтобы модель могла использоваться
<model-viewer>. - Сжимайте геометрические сетки вручную 3D-дизайнером, поставщиком или с помощью программного обеспечения для сжатия, такого как DRACO (ОС).
- Экспортируйте как низкополигональную модель в формате GLB, чтобы модель могла использоваться
Поскольку эти 3D-модели часто использовались на мобильных телефонах, они были оптимизированы путем установки максимального размера файла с текстурами в 2 МБ для поддержки устройств старшего поколения и слабого подключения к Интернету.
<model-viewer>
Команда DSM использует веб-компонент Google с открытым исходным кодом <model-viewer> для встраивания вновь созданных 3D-моделей в свои веб-страницы. Чтобы модели, созданные на первом этапе, были совместимы с <model-viewer> , ресурсы должны быть в формате gITF или GLB (расширение .glb). Оба формата компактны, сжимаемы и быстро загружаются в графический процессор. Компонент <model-viewer> поддерживается всеми основными вечнозелеными браузерами.
На этом этапе самой большой проблемой, с которой столкнулась команда DSM, было то, что аппаратная цветовая палитра Google отображалась неточно. В конце концов команда обнаружила, что за потерю цветов ответственна тональная карта ACES (стандарт киноиндустрии). Чтобы решить эту проблему, они разработали новый преобразователь нейтральных тонов Khronos PBR специально для устранения этих недостатков и точного отображения цветов на экране, избегая при этом пересветов и сдвигов оттенков, связанных с линейным отображением тонов.
<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>
Чтобы узнать больше о <model-viewer> , посетите modelviewer.dev . Чтобы протестировать свои 3D-модели и загрузить целый стартовый веб-сайт, попробуйте наш редактор .
Тяжелые решения с Three.js
<model-viewer> — отличный и эффективный способ отображения одной 3D-модели и взаимодействия с ней. Однако иногда команде DSM требовался более захватывающий и взаимосвязанный веб-интерфейс, чем это возможно с помощью <model-viewer> . Одним из примеров был запуск Nest Mini + C. <model-viewer> мог позволить потенциальным клиентам испытать продукт в 3D в Интернете, но не мог продемонстрировать свою полезность в сочетании с другими продуктами Google Hardware и функциями искусственного интеллекта, такими как помощник.
Для этой задачи команда обратилась к библиотеке, лежащей в основе <model-viewer> , Three.js. Three.js — это игровой движок JavaScript с открытым исходным кодом, и команде удалось создать структуру многократно используемых ресурсов для виртуальной домашней среды, содержащую внутренние камеры Nest, освещение и динамики. Это дало команде основу для предоставления обратной связи в режиме реального времени о том, как устройства взаимодействуют друг с другом.
Диалоговый поток
Последний этап создания взаимосвязанного опыта — добавление Google Assistant. Это означало, что пользователи могли опробовать настоящие команды и процедуры с помощью взаимосвязанного виртуального опыта. Однако вставка Google Assistant из существующей учетной записи пользователя создаст ряд проблем с конфиденциальностью. Чтобы создать решение, обеспечивающее конфиденциальность, DSM работал с сервисом Google Cloud Dialogflow, чтобы имитировать Google Assistant в этой области. На следующей схеме общего уровня показано, как веб-приложение использовало API Dialogflow (адаптировано из Основы Dialogflow). Для каждого диалога веб-приложение использовало классификацию намерений Dialogflow, а API возвращал заранее определенные выражения конечного пользователя, соответствующие намерению.
Чтобы узнать больше о Dialogflow, посетите документацию Google Cloud .
Конечный результат: встраиваемый iFrame.
Конечным результатом является библиотека ресурсов, которую можно внедрить в веб-страницу с помощью <model-viewer> или использовать в полноценной виртуальной среде, чтобы помочь клиентам узнать больше об отдельных продуктах и о том, как они взаимосвязаны. Этот опыт одновременно аутентичен, масштабируем и экономически эффективен. Этот первый виртуальный опыт был запущен в мае 2021 года, и хотя его больше нет на веб-сайте Google Store, вы все равно можете его опробовать .
Результаты
С момента запуска Nest Mini +C DSM удалось повторно использовать и расширять структуру, созданную за последние два года при запуске портфолио Pixel, с возрастающим успехом. Благодаря внедрению этих 3D-ресурсов и опыта команде на данный момент удалось в четыре раза увеличить количество интерактивных образовательных мероприятий по продуктам и утроить количество продуктов, использующих эту веб-технологию.
Конечным результатом является фирменное, аутентичное обучение продукту для растущего разнообразия вариантов использования в масштабе, которое является более устойчивым, связным и интерактивным, чем предыдущие стратегии. Заглядывая в будущее, команда DSM теперь имеет надежный портфель компонентов захватывающего опыта, который они могут быстро адаптировать к динамичным бизнес-целям. Эти улучшения позволяют команде DSM запускать образовательный контент по новым продуктам в четыре раза быстрее и менее чем в два раза дешевле, чем их предыдущие, более традиционные процессы.