Главное Свежее Вакансии Образование
1 849 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как мы дополненную реальность в интернет-магазин внедряли

Всем привет, меня зовут Алексей. Сегодня хочу рассказать о нашем опыте внедрения технологии дополненной реальности для интернет-магазина.

b_5b8fee52e09a5.jpg

В последнее время в разнообразных СМИ все чаще мелькает информация о трендах Ecommerce на 2019-й и 2020-й годы и практически во всех упоминается AR. Сегодня хотел рассказать о нашем опыте внедрения технологии дополненной реальности для интернет-магазина.

Технология интересна и полезна для пользователя, поскольку помогает примерять товары в режиме реального времени.

Предыстория

Не так давно мы взяли в работу проект, интернет-магазин оптики. На предпроектном анализе на сайтах конкурентов выявилась интересная особенность, 3Д-примерка. Она показалась значимой, так как увеличивала время пребывания пользователя на сайте и вероятность совершения покупки.

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

Столкновение с реальностью

Когда разработка проекта близилась к завершению, и он уже был размещен на боевом сервере, пришло время вспомнить о данном модуле. В сам процесс разработки мы углубляться не будем, там все как у всех. Те, кого заинтересовал проект, могут почитать о нем, перейдя по ссылке https://wbest.ru/portfolio/magazin-s-dopolnennoy-real-nost-yu/.

center

Мы начали зондировать почву на предмет официального разработчика модуля 3Д-примерки. Это оказалось несложно, у Flash-приложений есть лицензионное соглашение, которое ведет прямиком на сайт разработчика.

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

Отмечу, что письмо было на английском. Добавили аккаунт в Skype, время было назначено, среда или четверг, история умалчивает. В назначенное время набираем, и каково было моё удивление, когда на том конце я слышу французский язык. Сделали быстрый перевод через Гугл-переводчик и перешли на английский, но это тоже не помогло: несовершенное знание разговорного английского с двух сторон не позволило нормально разговаривать. Гугл-переводчик нас опять спас, и после пяти минут переписки где-то в недрах их офиса нашлась девушка из отдела поддержки, которая знала русский.

На 60 минут разговора она стала нашим переводчиком. После короткого знакомства перешли к сути, где нам озвучили цены. Годовая лицензия на данный модуль приближалась к 1 млн 500 тыс. рублей по зимнему курсу евро (цена называлась именно в них). Плюс к этому, чтобы создавать 3Д-рендеры очков и оправ, нам потребуется еще установка за 20 тыс. евро (но это разово). Мы сказали, что подумаем, и ушли думать.

Заказчику были озвучены данные условия, что, конечно, оказалось значительно дороже, чем ожидалось. Данный блок было решено отложить на неопределённое время.

Поиск решения

Прошел примерно месяц, меня не покидала мысль, что решение существует, но я его просто не вижу. Конечно, над этим я не размышлял 24/7, но примерно несколько раз в неделю вспоминал.

Был, конечно, вариант реализации по следующему принципу:

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

Не помню, каким именно образом, но мне в голову наконец-то пришла здравая мысль: на дворе 2018-й, должны быть какие-то разработки, задействующие веб-камеру и браузер!

Серфинг забугорного Google подтвердил мои мысли. Все оказалось даже проще, чем я думал. Чтобы получить видеопоток с веб-камеры, достаточно было подключить JS и написать пару строк в HTML. После этого мы смогли видеть себя на экране.

Дело оказалось в шляпе, осталось только сверху изображения разместить фото товара, конечно PNG и с прозрачным фоном.

Реализация

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

Следующая задача состояла в том, чтобы заставить изображение оправы «надеваться», или более просто определять, следить и позиционировать фото в зависимости от положения зрачков на видео. Задача казалась очень сложной, но мое образование инженера по комплексной защите объектов информации говорило, что это не так. Я знал, что данная технология уже работает примерно с 90-х годов.

Осталось только найти вариант реализации на HTML5. Опять прибегли к помощи Google, и быстрый серф нашел несколько китов, функционал которых практически полностью повторял приложение MSQRD. Все киты (их нашлось два) оказались платными, а убеждение, что если кто-то сделал, то и мы сможем, заставило продолжать искать решение.

Примерно через два дня меня осенило зайти посерфить на Github, и – о чудо! – там оказался нужный мне проект. Было несколько вариантов реализации для приложения, а также JS+HTML, который мы и взяли на тесты.

Было много функций маски, замена лиц и прочее, среди них были две особенно интересных, это работа с PNG и 3D-рендерами.

center

Как вы поняли, было два варианта развития: использование фотографий или 3D-рендеров. Рендеры показались более интересными, и мы начали пробовать их создавать: взяли один предмет, сфотографировали со всех ракурсов по кругу, и начали пробовать делать рендер.

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

В общем, данную задачу мы так и не решили. Если среди читателей найдется специалист, который подскажет, с помощью чего можно из фото сделать вот такой рендер, будем ждать его на нашей почте info@wbest.ru. В ответ получит респект и уважуху.

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

Примерно за пару-тройку дней тестовая страница была собрана, убран весь лишний функционал, чтобы ускорить работу.

center

Согласовали все моменты с заказчиком и перенесли функционал на боевой каталог. Поскольку для интернет-магазина мы использовали Битрикс и для примерки нам нужна была только фотография, было добавлено еще одно свойство – файл, в который менеджер магазина мог загружать обработанные фото.

Сейчас в нашем каталоге примерно 100 позицией с данной функцией и на подходе еще больше моделей солнцезащитных очков.

Аспекты и интересные нюансы

Данный вариант реализации неплохо работает в последних версиях браузеров и на мобильных телефонах на Android с последней версией браузера.

Для функционирования нужен SSL-сертификат, Chrome не дает получить видеопоток по HTTP.

Данный вариант реализации более перспективный, если сравнивать его с Flash, которая вскоре вовсе перестанет поддерживаться.

Серфинг видеопотока довольно затратный с точки зрения канала. Достаточно быстро работает практически на любом Wi-Fi или проводном Интернете вообще на десктопе. Достаточно неплохо показывает себя на 4G; 3G уже подлагивает.

Мобильное приложение для 3Д-примерки, конечно, более выгодно, поскольку так можно получить видеопоток непосредственно с камеры, минуя прокладку браузера и передачи данных.

В нашей реализации всплывающее окно довольно долго инициализируется, примерно 15–25 секунд в зависимости от Интернета (ловит поток и загружает JS), но после первой загрузки работает довольно быстро.

Еще одна особенность работы в браузере: нужно получить разрешение от пользователя, позволяющее инициализировать камеру. Это увеличивает безопасность.

Что получили на выходе

В качестве итога данной статьи – самый важный вопрос: увеличились ли продажи интернет-магазина после внедрения данной фичи?

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

Судя по данным Яндекс.Метрики, мы можем сравнить ключевые метрики интернет-магазина, где была реализована онлайн-примерка с общей совокупностью всех визитов, на одном временном интервале:

center

Ключевые метрики в целом по интернет - магазину

center

Ключевые метрики на странице с онлайн - примеркой

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

За то время, как была внедрена онлайн-примерка общая конверсия интернет-магазина увеличилась на 0,11

Это значит, люди данной фичей пользуются.

Как развиваемся сейчас

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

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

Но если пофантазировать, можно легко найти более широкое применение, например, в сфере продажи одежды или мебели.

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

В мебельной сфере на экране телефона можно примерно прикинуть, как будет смотреться диван в комнате или кресло в кабинете.

Заключение

Спасибо, что добрались до конца. Надеюсь, данная информация оказалось вам полезной.

+7
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
iBurattino
Синхронизация товаров между интернет-магазином и «Товарами ВКонтакте»
Александр Аббасов
Молодцы, очень любопытно!
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Евгений Молдовану
Интересно! Теперь собрать в коробку и продавать как французы :)
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Алексей Петров
Интересная идея, но тут есть нюанс.
Применимость данного модуля в рамках конкретной сферы достаточно ограничена (в той же оптике например), а для другого сегмента модуль уже придаться изменять, что делает масштабирование по отраслям трудозатратным занятием что бы продавать коробку.
Ответить
Олег Нечаев
Тату-маркет сделайте на свободных мощностях, бижутерию, интерьеры.
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Алексей Петров
По интерьерам реализовывали коллеги для Леруа, но правда мобильное приложение там свои интересные моменты есть, связанные с подготовкой рендеров (хотя недавно видел новость что можно будет с камеры смартфона сделать нужный рендер, возможно это упростит жизнь).
По бижутерии интересное предложение, думаю займемся на одном из проектов.
По Тату салону интересная идея, но как писал выше нужно делать под конкретную организацию.
Ответить
Алексей Тарасов
| Серфинг видеопотока довольно затратный с точки зрения канала.

Вы всего лишь захватываете с камеры видео-поток и обрабатываете его на клиенте. Какая разница какой канал интернета у пользователя. Вы же не потащили всю обработку к себе на сервер? )
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Алексей Петров
Согласен с вами. Тут у нас не точность в тексте.
Ответить
Алексей Тарасов
Уверен, что в лицензии автора запрещено использование его кода в коммерческих целях. Дураков, которые разбрасывают миллионы, очень мало среди разработчиков.
Ответить
Webest
Разработка и продвижение сайтов. Комплексные маркетинговые исследования.
Алексей Петров
Возможно. Возможно, не совсем верно выставили акцент, хотели донести мысль, что коллеги из Франции очень не за маленькие деньги продают устаревший продукт / технологию.
Ответить
Алексей Тарасов
Речь не о разработке французов. Я указал на лицензию опенсорсного проекта, который вы скачали с гитхаба, и использовали для своего коммерческого продукта.

Не всё, что в открытом виде лежит в интернете, разрешено использовать в коммерческих проектах. Скорее всего, лицензия запрещает это делать.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.