×Закрыть

DOU Labs: как в WeAR studio создали приложение — виртуальный интернет-магазин бытовой техники

В рубрике DOU Labs мы приглашаем IT-компании делиться опытом собственных интересных разработок и внутренних технологических инициатив. Вопросы и заявки на участие присылайте на editors@dou.ua.

Добрый день. Я — Павел Эльясов, 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 секунд, он переключается на что-то новое. Поскольку пользователю приходилось ожидать загрузку 3-5 моделей при слабом интернете, было решено использовать голограммы.

В контексте виртуального магазина, голограмма — эта реальная модель без текстур. То есть мы брали «голые» 3D-модели техники и накладывали материал с шейдером голограммы на всю геометрию, что дало пользователям возможность скачать и отобразить модель на сцене максимально быстро.

Голограмма также позволяет пользователю понять, что именно будет загружено: стиральная машина, кофеварка или холодильник, то есть ожидание становится оправданным. Пока пользователь смотрит на голограмму, подгружается основная модель.

Проблема размеров техники

Когда человек покупает технику себе домой, первое, что его на самом деле интересует — это параметры. Пользователю всегда хочется знать реальный размер техники, ведь даже пару сантиметров могут быть критичными.

Мы решили эту задачу, добавив опцию линейки, которая автоматически вычисляет размеры любой техники в виртуальном магазине.

Результаты и планы

Сейчас приложение уже в релизе, однако маркетинговая кампания по рекламе приложения еще не стартовала из-за недостаточного количества моделей. Приложение доступно для всех, у кого есть устройства, поддерживающие технологии ARKit & ARCore. Сегодня виртуальный магазин «Алло» можно скачать с Google Play и App Store. В приложении реализованы функции выбора и просмотра информации о товаре, интерактив с 3D-объектами (анимации, вращение, увеличение), рулетка и способность посмотреть на товар у себя дома.

В дальнейшем планируем постепенно превратить приложение в полноценный интернет-магазин с фильтрацией, включая фильтрацию по «AR-рулетке» (пользователь замеряет «АР-рулеткой» пространство, и программа сама находит ему подходящий вариант). В планах: больше интерактива, динамическое окружение и в конечном итоге — приложение, которое полностью динамически формируется на серверной стороне.

LinkedIn

25 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Паш, крутая статья, вы молодцы :)

Думаю, це — прорив!

Павел я уверен что это очень интересный и важный проект — Вы и АЛЛО продвигаете рынок к новым возможностям продажи. И то что кому то сейчас это кажется ненужным, неинтересным, бесполезным, не очень качественным — это всего лишь субъективное и частное мнение. Я думаю использование ВР позволит сгладить разницу между классической оффлайновой розницей и онлайн продажами, тем самым создавая такой способ коммуникации с потребителем который будет сочетать в себе лучшее из обеих каналов.
Удачи вам как реализаторам и АЛЛО как инноваторам в этом проекте!
Я думаю с точки зрения обсуждения бизнес-перспектив (не аспектов технической реализации) — DOU не совсем так аудитория которой интересна эта тема. ИМХО попробуйте поделиться этим на LinkedIn-е — мне кажется там будет интересно об этом узнать.

Слушайте, сделайте видео с примером работы вашего приложения в реальной комнате. Интересно же глянуть. Андроед мой ваше приложение все одно не потянет, а менять его не собираюсь еще очень долго.
Интересно же посмотреть, как ваша AR работает и заценить.

Т.е. вы на видео в реалтайме находите углы, полки и автоматом помещаете в различные места объекты ваши?
Если так, то очень круто сделали.
Вы бы в акцентировали это акцентировали. По статье и не понять.
По статье получается, что у вас есть помещение, нарисованное в 3D чем-то и в него уже помещаются объекты. Это тоже приличная работа, но есть куча инструментов уже для такого и профессиональных и любительских.

Андроед

Який ще андроЕд? Що він там андроЇсть?

ru.wikipedia.org/wiki/Android

Прочитав данную статью у меня возникли весьма смешанные ощущения, наверное начнем с того что к самому результату работы коим является «приложение», Я как разработчик отношусь очень положительно, стабильно работающее, интуитивно понятный UX, и эффекты... куда же без них, они разбавляют нашу скучную рутину, но сама концепция e-commerce в AR как по мне пугает и заставляет задуматься куда нас движет маркетинг, во всяком случае пока мы говорим о 5-6 дюймовых носимых гаджетах, ну Я не могу понять как может быть удобно пусть даже и в относительно тестово/примерном режиме что-то адекватно расположить у себя в квартире и примерить скажем холодильник в полный его размер к интерьеру, кстати большой респект и отсылка с правильному UX за линейку это частично помогает решить ситуацию но не спасает ее, в ключе этого могу сказать что замечание Алексея по поводу ARCore не так и критично)) а он на данный момент весьма стабилен и работает на много больше чем 29-ти девайсах.

Изменения обычных для нас дейтсвий (в данном случае покупок онлайн) часто пугают, но так и внедряются инновации. Насколько это может превратиться в повседневную рутину, боюсь мы узнаем только после более массового тестирования и обратной связи от пользователей

Полностью согласен что это может быть витком (возможно промежуточным) в развитии индустрии в целом, возможно вы сейчас задаете тренд как в свое время одна фруктовая компания со своим весьма «неординарным» подходом к UI/UX

Очень интересная штука! Приложение немного не стабильно еще на iphoneX, но все равно интересно. У холодильников дверцы начинают хлопать после закрытия)) Я думаю максимально востребованным было бы поставить товар в свой интерьер и посмотреть, как впишется — холодильник в углу, соковыжималка на моем столе и т.д. Успехов в дальнейшей работе!

Спасибо за отзыв! Размещение виртуальных товаров в интерьере уже реализовано в приложении ALLO. Любую единицу техники вы можете примерить к своей квартире и посмотреть подходит ли все идеально.

Речь идёт о предоставлении возможности пользователю ознакомиться с товаром в деталях не по картинке,а его реальном (резмер,детализация) виде.

Так можно или нельзя?

Думаю это следующая итерация электронной торговли — виртуализация торговых площадок. Сейчас конкуренция в электронной коммерции очень высокая и оставаться на лидирующих позициях в такой гонке, возможно исключительно сочетая маркетинговую тактику и технологические инновации. Думаю подобные решения, это хороший пример того, как именно будет выглядеть, повседневная, электронная торговля в ближайшем будущем.

И нафига оно обычному юзверю?

Даже если всё хорошо работает, что сначала нужно нарисовать 3D схему помещения, раскрасить — сильно непросто.
А вот как софт для контор, что делают ремонт и интерьер под ключ самое то. Но не думаю, что им оно подойдет на смартфонах. А вот для смартфонов часть, что показывает загруженную модель.

Или оно таки дорисовывает модели быт техники на видео, что смарт снимает.
Ну так покажите результирующее видео в реальном помещении.
Или вы выбрали вариант, если кому интересно, пусть идет ставит приложение на смарфон и после смотрит. Спасибо, не надо мне разного лишнего мусора на телефоне. В тех же ведроидах до сих пор с анинсталом приложений всё плохо (куча останков остается, которые вырезать еще тот гемор).

Тут посыл немного иного характера. Речь идёт о предоставлении возможности пользователю ознакомиться с товаром в деталях не по картинке,а его реальном (резмер,детализация) виде. Что касается «кэша» приложения-он прекрасно «сносится» после деинсталяции,не оставляя мусора в системе.

Ну может ваш заказчик и провел маркетинговое исследование и понял, что такое ему нужно.
Как юзверю мне такое нафиг не нужно. Мне хватает воображения, чтобы посмотрев пару фоток, представить, как оно в реале будет.

Как юзверю было бы интересно, вот снимаю смартом помещение с мебелью уже и оно дорисовывает мне бытовую технику в мною желаемые места. Но тут получается задачка совсем другой сложности и пока толком не решаемая.
Второй вариант, как богатенький буратино иду в контору, что делает ремонт под ключ и они мне скидывают модели, по которым я гуляю (ну как в играх).

Там не только кеш, но и еще куча мусора, что остается. Но последнее время я во внутренности ведроида не смотрел, может в каких его новых версиях уже и пофикшено. У меня на нем, карты, пару болталок, почта и телефон, пару расписаний транспортов и всем этим приложениям уже лет по 5-7 — больше он ни чему не применим.

Виртуальные консультанты будут?

Конечно будут, как только открывается дверь 10 консультантов бегут на тебя и твоя задача увернуться от них получая очки)) Но если серьезно, то плюсы виртуального магазина как раз в том, что пользователям не нужно лишний раз общаться с консультантами и говорить всем знакомое «спасибо, я просто смотрю».

Жаль только ARCore работает только на двух с половиной устройствах.

Это совсем не так, на данный момент ARCore доступен на более чем 29 девайсах developers.google.com/...​iscover/supported-devices. Конечно, цифра небольшая по сравнению с общим количеством Android-устройств,но думается вскоре список станет в разы больше)

Ну я утрирую конечно же, но печаль в том, ч то с такой политикой, и «любовью» вендоров обновлять ПО своих устройств, существующие девайсы получат поддержку ARCore предположительно никогда. Так что надежда только на будущие аппараты)

Arcore сильно привязан к некоторым особенностям процессорной архитектуры.
А так почему именно arcore?

Это можно делать и без него.
Называется slam в один глаз.
Вот мои опыты youtu.be/l9BLFKdyGrE
Данный видос был записан на древней 4ядреной мотороле.

Подписаться на комментарии