DOU Labs: как в WeAR studio создали приложение – виртуальный интернет-магазин бытовой техники
В рубрике DOU Labs мы приглашаем IT-компании делиться опытом собственных интересных разработок и внутренних технологических инициатив. Вопросы и заявки на участие присылайте на Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. .
Добрый день. Я — Павел Эльясов, Tech Lead компании WeAR studio. Хочу ознакомить вас с нашим продуктом и некоторыми аспектами его технической реализации в рамках разработки e-Commerce проекта «Алло». Это виртуальный интернет-магазин, который позволяет посмотреть товары с помощью фотореалистичных 3D-моделей.
Идея
«Алло» обратились к нам с просьбой предоставить им эффективное IT-решение, которое помогло бы продавать крупногабаритную технику без смены локаций магазинов. Этим решением стал виртуальный магазин «Алло» — приложение дополненной реальности (AR) для Android и iOS, которое пользователи могут загрузить на телефон или планшет.
Одной из наших ключевых задач было создание визуального ряда самых ходовых категорий бытовой техники, соблюдая минимальную погрешность в размере. Виртуальный магазин дал возможность пользователям в деталях рассматривать огромное количество абсолютно реалистичных 3D-моделей холодильников, стиральных машин, бойлеров и других товаров в их настоящем виде и размере... у себя дома. Сегодня виртуальный магазин насчитывает около 400 моделей в 35 категориях, но очень скоро ассортимент вырастет до 1000.
Главное преимущество такого решения для клиента в том, что магазин не имеет временно-пространственных пределов. Он буквально бесконечен. То есть со временем он легко может быть заполнен миллионом товаров. Дополнительные преимущества для клиента: оптимизация пространства, возможность играть на поле технологий, позиционируя себя как инновационный бренд, воплощение любых идей с помощью AR (например, кастомизация окружения под значимые события). Аналогов такого приложения в Европе нет. В Америке похожие есть только у Amazon и Shopify.
User experience виртуального магазина прост. Пользователь устанавливает приложение на свое устройство. Запустив приложение, сканирует пространство, и перед ним открывается дверь в виртуальное окружение с каталогом товаров техники.
Виртуальное окружение — это стильный интерьер фирменного магазина «Алло». Его можно в любой момент отключить и поместить 3D-модель техники в реально существующее пространство. Например, поставить стиральную машину натуральных размеров к себе в ванную. Посмотреть, вписывается ли новый чайник в интерьер кухни.
Реализация
Поскольку безмаркерная технология AR-трекинга была доступна на тот момент только для iPhone, мы начали искать решение, которое позволяло бы с помощью фильтра Калмана анализировать видеотекстуру, а также данные с акселерометра и гироскопа для возможности запуска приложения на Android-девайсах.
После релиза ARKit от Apple и ARCore от Google стало ясно, что виртуальный магазин будет создаваться на их базе. Аналогов этим SDK в плане точности треккинга поверхности на данный момент нет. Хотя нужно принимать в расчет, что эти SDK ограничивают целевую аудиторию. Приложение доступно только для тех покупателей, у которых есть телефоны последних моделей (iPhone oт 6s, поддерживающий ARKit, и зоопарк Аndroid — 29 девайсов, поддерживающих ARCore). С одной стороны, это уменьшение количества пользователей, c другой стороны — только так можно гарантировать максимально удобный покупательский опыт и решить проблемы реалистичности объектов и адекватной работы приложения.
В итоге была выбрана следующая связка: Unity+ ARKit+ ARCore.
Виртуальный магазин — это не только финальное приложение, но и 3 закулисных приложения, контролирующих pipeline производства и тестирования, написанных на Unity и на .NET WinForms. Логика управления вынесена на наш backend на Java.
Над всем этим работала команда из 5 человек: 2 Unity developers, Java developer, QA и UI/UX дизайнер. Контент создает команда 3D-моделлеров из 30 человек. Формально разработка началась в ноябре 2017 года, приложение было выпущено в августе 2018. На длительность разработки повиляла смена версии Unity и изменение архитектуры приложения на заранее адаптированную под e-Commerce решение.
Cоздать магазин реалистичной виртуальной техники — значит последовательно решить огромное количество задач, вывести уникальные правила и алгоритмы, что мы и сделали.
Реалистичность vs производительность
Это одна из самых серьезных проблем. Чтобы показать пользователям, как будут выглядеть модели техники, приходилось балансировать между реалистичностью их отображения и производительностью приложения. Дело в том, что все модели бытовой техники были созданы с нуля нашими 3D-моделлерами — деталь за деталью, текстура за текстурой. В результате они получились максимально реалистичными и в то же время довольно тяжелыми.
Количество моделей, которые можно разместить в зоне видимости AR камеры, — ограничено для сохранения высокой FPS (frame per second). Решилась эта проблема учетом таких факторов, как:
- количество полигонов моделей;
- количество материалов на модели;
- освещение (статическое-динамическое).
Был найден компромисс, который позволил при достаточно высокой производительности приложения достичь высокой реалистичности. Именно этот компромисс задал серию правил, которые легли в основу производства. Были вычислены наиболее подходящие компрессии текстур и определены шейдера, позволяющие не терять в качестве и тем не менее не уменьшать производительность.
Но это не единственное решение, способствующее воплощению реалистичности моделей. Правильное освещение, звуки, анимации — именно эти факторы мы учитывали при создании виртуального магазина для достижения максимальной реалистичности.
Освещение
Правильная настройка света «оживляет» модель, делая ее настоящей в восприятии пользователя. Это естественные тени от объектов, блики, отражения окружающей среды.
Например, открывая виртуальный холодильник, пользователь видит отражения стеклянного потолка на прозрачных пластиковых ящиках. Или замечает, почти подсознательно, как бликует барабан машинки.
Кстати, освещение виртуального магазина было настроено для виртуального окружения. Когда же модель переносится в реальное окружение, реалистичность освещения теряется. Сейчас как раз занимаемся решением этой задачи.
Анимации и звуки
Анимации товаров в виртуальном магазине — это новый уровень вовлечения пользователя с помощью интерактивного взаимодействия с виртуальным объектом. Мы добавили анимацию со звуками в такие объекты, как кофеварки, блендеры, чайники. Теперь можно поставить чайник на свой стол и увидеть и даже услышать, как из него идет пар.
Артефакты
Мы подозревали, что проблема артефактов возникнет на нескольких моделях, но она оказалась более масштабной. Причина тому — модели c абсолютно разной геометрией (многослойная прозрачность и т. д.) и многообразие Android/iOS устройств.
На разных устройствах 3D-модели отображались со всевозможными дефектами (баги отображения на текстурах, пятна). Проблема была решена с помощью выбора определенных шейдеров, компрессии текстур, подбора системы освещения. Это позволило использовать единый алгоритм настройки модели под разные устройства и наладить непрерывный процесс производства.
Проблема ожидания загрузки моделей
Решение задачи реалистичности моделей потянуло за собой другие, такие как «вес» моделей. Ведь для достижения натурального вида товара нужны были тяжеловесные текстуры. К сожалению, загрузить реалистичную 3D-модель со скоростью света невозможно, потому что невозможно предугадать качество и скорость интернета для каждого пользователя.
Современный пользователь не ждет. Если он не получает результат в течение 3 секунд, он переключается на что-то новое. Поскольку пользователю приходилось ожидать загрузку
В контексте виртуального магазина, голограмма — эта реальная модель без текстур. То есть мы брали «голые» 3D-модели техники и накладывали материал с шейдером голограммы на всю геометрию, что дало пользователям возможность скачать и отобразить модель на сцене максимально быстро.
Голограмма также позволяет пользователю понять, что именно будет загружено: стиральная машина, кофеварка или холодильник, то есть ожидание становится оправданным. Пока пользователь смотрит на голограмму, подгружается основная модель.
Проблема размеров техники
Когда человек покупает технику себе домой, первое, что его на самом деле интересует — это параметры. Пользователю всегда хочется знать реальный размер техники, ведь даже пару сантиметров могут быть критичными.
Мы решили эту задачу, добавив опцию линейки, которая автоматически вычисляет размеры любой техники в виртуальном магазине.
Результаты и планы
Сейчас приложение уже в релизе, однако маркетинговая кампания по рекламе приложения еще не стартовала из-за недостаточного количества моделей. Приложение доступно для всех, у кого есть устройства, поддерживающие технологии ARKit & ARCore. Сегодня виртуальный магазин «Алло» можно скачать с Google Play и App Store. В приложении реализованы функции выбора и просмотра информации о товаре, интерактив с 3D-объектами (анимации, вращение, увеличение), рулетка и способность посмотреть на товар у себя дома.
В дальнейшем планируем постепенно превратить приложение в полноценный интернет-магазин с фильтрацией, включая фильтрацию по «AR-рулетке» (пользователь замеряет «АР-рулеткой» пространство, и программа сама находит ему подходящий вариант). В планах: больше интерактива, динамическое окружение и в конечном итоге — приложение, которое полностью динамически формируется на серверной стороне.
