3D-Конфигуратор кабины лифтов

Запрос

Поздним морозным февральским вечером мы получили немногословную заявку с сайта:

Необходимо создать программу-конструктор для пассажирских лифтов. Краткое ТЗ и описание функциональных возможностей конструктора во вложении.

Выявление цели

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

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

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

• упростить процесс демонстрации и расчета стоимости лифтовых кабин;
• продемонстрировать возможности производства.

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

• Менеджеры компании;
• Сотрудники ЖКХ;
• Жители домов, которые хотят новый лифт.

У клиента уже был разработан подобный инструмент, созданный на технологии Flash, которая перестала поддерживаться несколько лет назад. Новый конструктор клиент хотел разместить на новом сайте на Wordpress.

Исследование

Чтобы лучше понять ожидания клиента запустили старый конструктор лифтов на Flash.

Провели поиск информации о возможных способах реализации задачи:

1. PNG картинками, где потребовалось бы прорисовать все вариации делателей лифта. Это быстрый вариант реализации, в случае если набор опций заранее известен и ограничен.
2. Технология - 3D Verge - подходящий инструмент. Имеет готовую интеграцию с Wordpress, но довольно тяжеловесный и медлительный. Работает на технологии WebGL, а одно из условий, это то что ПК клиентов могут быть слабыми.
3. WebGL - технология позволяет отображать 3D-объекты внутри браузера. Из перечисленных самый гибкий, и оптимальный по быстродействию.

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

Подготовка КП

Сделали первый расчет, за основу взяли технологию PNG-картинок. Стоимость составила 45 000 руб., срок неделя. Без админки, и возможности дальнейшей настройки опций. В этом случае PNG-материалы предоставил бы заказчик.

Клиент ответил, что опции должны быть настраиваемыми, а также задача по прорисовке кабин – должна быть решена на нашей стороне.

Поэтому, во втором расчете, мы заложили, что будем использовать технологию WebGL - 432 960 руб., срок 2 месяца. Учли, что потребуется подключить 3D-дизайнера и выполнить прорисовку кабин. Создать админку для конструктора, в которой можно было бы добавлять варианты опций.

После ознакомления с КП, клиент предложил, что подготовку 3D-модели они возьмут на себя, а мы прорисуем дополнительные опции, чтобы уменьшить стоимость проекта, а также договорились, что админку пока не делаем, но само приложение – может быть расширено, если первая часть проекта будет успешно запущена.

И так, итоговый расчет по стоимости составил 246 120 руб., по срокам 1,5 месяца. Конструктор должен быть оптимизирован под мобильные устройства, без админки, 3Д - модель на клиенте.

Данный вариант устроил клиента по срокам, стоимости и функциональности.

Подписание договора

После того как КП было согласовано, запустили процесс подписания договора. В данном проекте договорились на сотрудничество по фиксированной стоимости. Это значит, что сумма, указанная в КП, не изменится, если при составлении финального ТЗ – не будет изменения функциональности конструктора. А также, что в стоимость КП заложены возможные риски.

Разработка ТЗ

Большую часть ТЗ мы уже подготовили при составлении КП, чтобы клиент увидел приблизительный конечный результат мы сделали макет в Figma. При разработке макета было проработано несколько вариантов:

1. Когда все опции видны сразу

2. Когда опции сгруппированы по блокам: Потолок, Стены, Пол, Пост приказов, Аксессуары.

Исходя из целевой аудитории, остановились на первом варианте — т.к. он предполагает меньше действий пользователей, хоть и выглядит более нагруженным. А также подготовили мобильный вариант:

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

Разработка ТЗ

Через три недели был разработан первый вариант.

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

Провели встречу с клиентом, объяснили ситуацию, запросили чертежи. Написали ТЗ для 3D-дизайнера и подключили его к проекту.

Получили от клиента x_t чертежи, которые используются в прикладном ПО инженеров (Parasolid).

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

Тестирование

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

Далее на тестировании занимались сверкой модели конструктора и отображений на рендерах 3D-дизайнеров. Хотели сделать лифт более реалистичным. Экспериментировали со светом:

Изменили размеры кабины, чтобы были ближе к реалистичным. Добавляли тени, которые не отрисовывались в WebGL отдельными текстурами. Добавляли недостающие элементы лифта, разместили зеркала и поручни.

В результате тестирования поняли, нашли оптимальные решения и хитрости, чтобы привести WebGL модель ближе к 3D-рендерам.

Передача проекта клиенту

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

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

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