Вводная задача от заказчика, проблематика, цели

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

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

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

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

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

МАКЕТЫ/ИЗОБРАЖЕНИЯ

Первая версия дизайна Android

Первая версия дизайна iOS 

Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

МАКЕТЫ/ИЗОБРАЖЕНИЯ

Вторая версия дизайна Android

Вторая версия дизайна iOS

Результаты сотрудничества

1760 скачиваний с момента запуска приложения.

230 установленных копий в настоящий момент.

4 заявки в первый месяц запуска приложения

1 заявка на открытие партнерского магазина

40 000 руб. - средний чек

МАКЕТЫ/ИЗОБРАЖЕНИЯ

Конструктор двери в приложении

Вставка двери в интерьер пользователя

Результаты сотрудничества

Заключение

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

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

Перейти на сайт