Дополненная реальность для производителя межкомнатных дверей

Мобильные приложения

Предыстория:

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

Задачи клиента

  1. 1. Повысить лояльность покупателей.
  2. 2. Установить прямую и постоянную связь с конечным потребителем.

Лояльность покупателей

Бизнес ориентирован на широкую целевую аудиторию, при этом двери - это товар с длительным сроком эксплуатации (их редко меняют).

Для завлечения пользователя предложена концепция с использованием технологии дополненной реальности. Концепция заключалась в том, что пользователь может “примерить” дверь в собственном интерьере.

Такое мобильное приложение способно генерировать новые заказы и способствует установлению постоянной связи с конечным потребителем.

Технология дополненной реальности

Исходные данные

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

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

Мобильное приложение в старом дизайне

Мобильное приложение в старом дизайне

Процесс реализации

Работа над проектом началась с разработки ТЗ и макетов. В ТЗ был определен протокол передачи сообщений между сервером и клиентским мобильным приложением. В начале работы над приложением, для сокращения общих сроков разработки, был разработан алгоритм автоматической вставки двери в проем.

Старый дизайн приложения для планшетов

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

Мобильное приложение новый дизайн

Мобильное приложение новый дизайн

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

Мобильное приложение новый дизайн для планшета

Самым значимым этапом в работе стала разработка алгоритма

Алгоритм модуля дополнительной реальности по поиску дверного проема.

  1. 1. Выделение контуров на изображении
  2. 2. Поиск четырехугольников
  3. 3. Выбор среди четырехугольников дверного проема
  4. 4. Отслеживания найденного проема
  5. 5. Вставка изображения двери в дверной проем

Подробнее по каждому пункту алгоритма:

Выделение контуров.

Данный блок выполняется в два этапа:

  1. 1. Подготовка изображения к поиску контуров
  2. 2. Поиск.

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

Мобильное приложение по примерке дверей

На втором этапе выделения контуров происходит поиск линий на обработанном ранее изображении. Для этого используется преобразование Хафа.

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

Поиск четырехугольников.

Так как все изображения дверных проемов геометрически представляют собой прямоугольники (при фронтальном виде) или трапеции (при виде сбоку), то было принято решение искать, среди найденных ранее линий контуров, четырехугольники с углом между смежными сторонами от 60 до 120 градусов. Однако, прежде чем проверять, является ли четырехугольник подходящим его следует выделить среди огромного количества отрезков. Для этого был разработан рекурсивный алгоритм обхода массива, объединяющий линии по три таким образом, чтобы они составляли 3 из 4 возможных сторон четырехугольника.

Механизм поиска дверного проема

Выбор среди четырехугольников дверного проема.

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

Отслеживания найденного проема

Найденный контур дверного проема привязывается к характеристическим точкам изображения, полученным на основе алгоритма Shi-Tomasi. Непосредственно отслеживание происходит на основе вычисления оптического потока Лукаса-Канаде, которое позволяет найти сдвиг характеристических точек между кадрами. По этому сдвигу находится новое положение и форма контура дверного проема.

Вставка изображения двери в дверной проем.

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

Реальный результат примерки двери

Приемка заказчиком и финальное тестирование.

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

Финальное тестирование приложения проводилось на устройствах заказчика через функционал beta-тестирования маркетов (Google Play и Apple TestFlight).

Бизнес-результат заказчика:

  • 1760 скачиваний с момента запуска приложения.
  • 230 установленных копий в настоящий момент.
  • 4 заявки в первый месяц запуска приложения
  • 1 заявка на открытие партнерского магазина
  • 40 000 руб. - средний чек

Скачать приложение можно кликнув по ссылке:

Для устройств на платформе Android.

Для устройств на платформе IOS.

Понравилась статья? Расскажи друзьям
Комментировать