AliExpress головного мозга

Только AliExpress мог взять День холостяка, студенческий праздник с оттенком грусти, и превратить его за несколько лет в Международный день шоппинга. Вот уже несколько лет 11.11 легко и непринуждённо конкурирует с «Чёрной пятницей», захватывая весь мир. Разумеется, лидер ритейла такой силы и такого потенциала не мог обойти вниманием современные технологии. В последнее время AliExpress не просто увлекся модными гаджетами и приложениями, но и начал на них много зарабатывать. Очень много. Недавно наша компания Fibrum создала платформу, послужившую основой для виртуального магазина AliExpress. В этой статье я расскажу об особенностях этой платформы VR-магазинов. Кстати, для нашей платформы очки не нннада. Ну почти.

ymqjuceok3ppdvecmyg9p-jgt-w.jpeg

Первые эксперименты с другой реальностью


Многие знают, что 11 ноября китайцы, увлеченные магией цифр, отмечают День холостяка, так как эта дата собирает вместе четыре единицы (11.11). В последние годы в День холостяка проходит всё больше распродаж в интернет-магазинах, и 11 ноября становится китайской «Черной пятницей». Поэтому наш совместный с AliExpress проект и был приурочен ко дню онлайн-шоппинга в Поднебесной.

Сам AliExpress уже тестировал VR-магазины в 2016 году. Коммерческий успех этого эксперимента в прошлогоднюю «Черную пятницу» был феноменальным — VR-магазины посетили 8 млн человек. Неудивительно, что AliExpress решил продолжить в том же духе, только теперь уже в России.


Вот так выглядят VR-магазины AliExpress для пользователей из Австралии, Америки и Японии.

Первый проект Alibaba немного отличался от российского тем, что был реализован c применением технологии дополненной, а не виртуальной реальности. О проекте можно посмотреть репортаж CNN.

3 ноября 2017 года мы осуществили пробный запуск виртуального магазина AliExpress в нашей стране. А 7 ноября магазин Tmall в виртуальной реальности заработал в полную силу: в 11 российских городах была размещена реклама с QR-кодами, по которым можно было перейти в магазин с VR-товарами AliExpress.

Почему AliExpress выбрал Fibrum


В 2015 году наша компания стала победителем совместного конкурса стартапов «Сколково» и AliExpress, и мы получили право разместить VR-шлемы Fibrum Pro на китайской торговой площадке. Так началось наше сотрудничество с AliExpress. Оно было успешным, и это стало решающим при выборе подрядчика для создания виртуальных магазинов в России.

Кстати, в 2016 году состоялась личная встреча основателя Alibaba Джека Ма с CEO Fibrum Ильёй Флаксом во время Всемирного интернет-форума в Китае. Мы подарили свой VR-шлем Джеку Ма. Хотя беседа была не очень долгой, за это время Илья и Джек успели поговорить о наших продуктах.

xfnc9ksgfzdo4hxrlxqiny7nscc.jpeg


Как выглядит VR-магазин


По скану QR-кода или по прямой ссылке покупатель заходит в магазин, выбирает один из трех отделов (виртуальные комнаты «Техника», «Детям» и «Мода») и оказывается среди виртуальной продукции.

Пользователь перемещается по виртуальному магазину, направляя взгляд в нужную сторону и активируя кнопку с пиктограммой ног.

c877deca013cd2aa3dea2b7b3f0ffb9b.jpg

Чтобы выбрать товар, пользователь задерживает на нем взгляд, что вызывает загрузку ретайкла (указателя в центре взгляда), после чего открывается сцена с close-up — детальным просмотром товара и его характеристик с возможностью покрутить его по оси Х, а также добавить в корзину.
Фактически, пользователю не нужен шлем виртуальной реальности (доступ возможен с обычного браузера), но для более полного погружения в VR я бы посоветовал всё же надеть шлем — так интереснее. Главное, чтобы шлем был совместим с вашим телефоном.


Покупатели — геймеры


Чтобы увлечь покупателя, мы использовали механику игры и придумали разные «фишки».
За каждое действие (даже за входы и выходы из комнат) пользователю начисляются геймификационные баллы.

Если поймать кота, который «гуляет» по Tmall, можно «заработать» купон на $2–4. Носиться по комнатам за животным не придется. В нашем магазине нет звукового сопровождения, и только кот выдаёт свое присутствие очередным «мяу». Когда пользователь слышит «кота», он должен «словить» его взглядом, чтобы получить скидку.

ntjogixep1ms1zpkycgadjz7n8q.png


За наведение смартфона на стеклянный куб, который есть в каждой комнате, пользователь получал приглашение на оффлайн-мероприятие Tmall, которое прошло в Москве у торгового центра «Атриум». Набирая баллы, пользователь приобретает особый статус, которым можно поделиться в социальных сетях.

В комнатах также поставили «Тинькофф сундук»: открыв его, покупатель может получить бонус на приобретение товаров.

Техническая реализация


Коллеги из AliExpress настаивали, чтобы мы все сделали в браузере, так как это намного удобнее традиционной модели с созданием отдельного приложения, использовать которое можно только со шлемом виртуальной реальности. Web-VR более доступен, и это стало решающим фактором. Тогда это казалось почти невозможным. Тем более, за месяц, который нам дали на всё про всё.
Мы рискнули, хотя и понимали, что подобных решений никто не делал и по ходу будет много проблем.

По итогам консультации со специалистами AliExpress мы написали техническое задание, в рамках которого начали разработку. От AliExpress мы получали фотографии товаров и на их основании делали 3D-модели. В целом процесс 3D-моделирования был довольно стандартным, за исключением необходимости преобразовывать полученные файлы в специальный формат, который используется в фреймворке. Например, вот так выглядит модель комнаты с расположенными в ней предметами.

txwpgg1uaggfdik1rfzannaxi8c.jpeg


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

Над платформой работали восемь специалистов: три дизайнера, два разработчика, тестировщик, менеджер по продукту и арт-директор. Менеджер по продукту курировал вопросы взаимодействия с AliExpress. Арт-директор отвечал за визуальную составляющую.

В итоге у нашей команды получилось очень сложное технологическое решение с несколькими комнатами, геймификацией, с VR-режимом в браузере с любого телефона.  

Платформа для VR-магазина AliExpress разработана с нуля при использовании HTML-фреймворка A-Frame для создания сайтов виртуальной реальности (технология также известна как Web-VR). Основная технология отрисовки — WebGL.

Поскольку виртуальная реальность в проекте для AliExpress реализована в виде веб-приложения, работающего в браузере, ресурсы для него распределяются иначе. А раз нет необходимости создавать тяжёлые графические элементы, производительность у него выше, чем у классических VR-решений.

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

Я не раз слышал жалобы пользователей, попробовавших VR, на задержки при повороте головой и нечеткое изображение. К магазину AliExpress все это не имеет отношения, поскольку он разрабатывался на основе Web-VR и не является приложением, которое устанавливается напрямую из магазина. Недостаточное расстояние между объектами (тоже частая жалоба VR-пользователей) в этом проекте опять же не является большой проблемой: мы выявили подобное на стадии тестирования, слегка переставили объекты на полках, и стало комфортно.

Слабые места проекта и главные наши «грабли» — это  неполная поддержка Web-VR браузерами современных смартфонов. Web-VR все еще активно развивается, дорабатывается, и некоторые особенности могут быть реализованы при помощи полифилов. Соответственно, стопроцентная работоспособность функционала не может быть гарантирована и должна тщательно тестироваться.

Итоги и перспективы


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

Fibrum же получил очень ценный опыт разработки Web-VR проектов, который впоследствии можно масштабировать на другие проекты. Мы надеемся, что пример AliExpress вдохновит российские компании более активно использовать виртуальную реальность в качестве канала продаж.
А пока мы работаем над другим проектом — запуском нового приложения, в котором можно выбрать эмоцию и испытать её, отправившись в приключения в виртуальной реальности. О нем мы, конечно, тоже расскажем читателям Хабра. Но в следующий раз.

© Habrahabr.ru