Организация Google Devices and Services Marketing (DSM) курирует стратегии выхода на рынок для широкого спектра продуктов: смартфонов, часов, наушников, планшетов, устройств для умного дома и соответствующих подписок, все из которых доступны как через Google Store, так и у глобальных сторонних поставщиков. Люди узнают об этих продуктах в Интернете и в физических розничных магазинах.
Одной из постоянных задач этой команды является обучение потребителей и розничных продавцов вариантам использования и преимуществам аппаратной экосистемы Google и передовых возможностей ИИ. Чтобы лучше помочь потребителям понять продукты и функциональные возможности, команда DSM создала трехмерное виртуальное пространство с передовыми веб-технологиями для решения многих из этих проблем. В этом исследовании вы можете узнать, как команда создала более захватывающий опыт для клиентов, запустив эти новые возможности в четыре раза быстрее и за половину стоимости традиционных цифровых активов.
Задача: обучение продукту
Обучение продавцов и клиентов, которые впервые используют аппаратные продукты 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 UX с кнопками, чтобы рассказать историю с помощью углов камеры и интерактивных вариантов цвета. С <model-viewer> вы можете предоставить своим пользователям любой опыт, который вы только можете придумать.
Создание 3D-моделей
Первым шагом к разработке 3D-виртуального опыта является создание 3D-моделей продукта. Команда DSM создала свои 3D-модели в CAD. Тесно сотрудничая с дизайнерами, создающими CAD продукта, команда DSM смогла экспортировать низкополигональные рендеры, которые можно было оптимизировать для веба. Некоторые из лучших практик, которые они использовали для достижения этого, были в следующих областях.
- Геометрия:
- Сосредоточьтесь на том, чтобы геометрия (форма и масштаб) были точны со всех сторон.
- Избегайте использования карт нормалей для скашивания кромок.
- Создавайте наклейки как отдельную геометрию.
- Цвета и материалы:
- Цель: единообразное визуальное представление физических свойств.
- Рассмотрите динамику освещения в реальном времени.
- Используйте отдельные наборы текстур и материалов для каждого типа сетки (непрозрачная, прозрачная, наклейка).
- При необходимости внесения дополнительных корректировок проведите повторную проверку проектов совместно с исходными разработчиками САПР.
- Размер файла:
- Экспортируйте как низкополигональную модель в формате GLB, чтобы модель могла использоваться
<model-viewer>. - Сжатие геометрических сеток вручную выполняется 3D-дизайнером, с помощью поставщика или с помощью программного обеспечения для сжатия, например DRACO (OS).
- Экспортируйте как низкополигональную модель в формате GLB, чтобы модель могла использоваться
Поскольку эти 3D-модели часто использовались на мобильных телефонах, они были оптимизированы путем установки максимального размера файла с текстурами в 2 МБ для поддержки устройств старого поколения и слабых интернет-соединений.
<model-viewer>
Команда DSM использует веб-компонент с открытым исходным кодом <model-viewer> от Google для встраивания новых 3D-моделей в свои веб-страницы. Чтобы модели, созданные на первом этапе, были совместимы с <model-viewer> , активы должны быть в формате gITF или GLB (расширение .glb). Оба формата компактны, сжимаемы и быстро загружаются в графический процессор. Компонент <model-viewer> поддерживается всеми основными вечнозелеными браузерами.
На этом этапе самой большой проблемой, с которой столкнулась команда DSM, было то, что цветовая палитра оборудования Google отображалась неточно. В конце концов команда обнаружила, что тональное отображение ACES (стандарт киноиндустрии) было ответственно за потерю цветов. Чтобы решить эту проблему, они разработали новый Khronos PBR Neutral Tone Mapper специально для устранения этих недостатков и точного отображения цветов на экране, избегая при этом пересвеченных бликов и смещений оттенков, связанных с линейным тональным отображением.
<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, освещение и динамики. Это дало команде основу для предоставления обратной связи в реальном времени о том, как устройства взаимодействуют друг с другом.
Dialogflow
Последняя часть создания взаимосвязанного опыта — добавление Google Assistant. Это означало, что пользователи могли попробовать аутентичные команды и процедуры с взаимосвязанным виртуальным опытом. Однако вставка Google Assistant из существующей учетной записи пользователя открыла бы ряд проблемных вопросов конфиденциальности. Чтобы создать решение, ориентированное на конфиденциальность, DSM работала со службой Google Cloud Dialogflow, чтобы имитировать Google Assistant в этом пространстве. Следующая высокоуровневая диаграмма показывает, как веб-приложение использовало API Dialogflow (адаптировано из Dialogflow Basics ). Для каждого разговорного хода веб-приложение использовало классификацию намерений Dialogflow, и API возвращало предопределенные выражения конечного пользователя, которые соответствовали намерению.
Чтобы узнать больше о Dialogflow, посетите документацию Google Cloud .
Конечный результат: встраиваемый iFrame
Конечным результатом является библиотека активов, которую можно встроить в веб-страницу с помощью <model-viewer> или использовать в полной виртуальной среде, чтобы помочь клиентам узнать больше об отдельных продуктах и о том, как продукты взаимодействуют. Опыт является как аутентичным, масштабируемым, так и экономически эффективным. Этот первый виртуальный опыт был запущен в мае 2021 года, и хотя его больше нет на сайте Google Store, вы все равно можете попробовать его .
Результаты
С момента запуска Nest Mini +C DSM смогла повторно использовать и расширить фреймворк для последних двух лет запусков портфолио Pixel с возрастающим успехом. Благодаря операционализации итерации этих 3D-активов и опыта, команда смогла на данный момент увеличить в четыре раза количество интерактивных образовательных продуктов и утроить количество продуктов, использующих эту веб-технологию.
Конечным результатом является фирменное, аутентичное обучение продуктам для растущего перестановки вариантов использования в масштабе, которое является более устойчивым, связным и интерактивным, чем предыдущие стратегии. И заглядывая вперед, команда DSM теперь имеет надежный портфель компонентов иммерсивного опыта, который они могут быстро адаптировать к динамическим бизнес-целям. Эти улучшения позволяют команде DSM запускать новый образовательный контент по продуктам в четыре раза быстрее и менее чем за половину стоимости, чем их предыдущие, более традиционные процессы.