Конфигуратор интерьера автомобиля с послойной склейкой изображений
Сложная форма оформления заявки с выбором и проверкой совместимости опций и визуализации с трех ракурсов
1Цели и задачи
Необходимо было проводить первичное анкетирование клиентов по большому количеству опций и параметров с предоставлением визуальной составляющей будущего интерьера автомобиля.Большое количество опций для выбора с описательной частью требовалось уместить в компактной лид-форме с визуализацией с трех ракурсов (front, rear, side).
- FRONT - вид со стороны VIP-дивана на перегородку с водителем
- REAR - вид на VIP диван
- SIDE - вид в три четверти со стороны двери
2Интерфейс конфигуратора
Интерфейс конфигуратора состоит из меню выбора параметров с раскрывающимися блоками, визуализации с переключателем front/rear/side, и описания текущей конфигурации с конверсионными кнопками заказа и печати pdf-спецификации.
32D-визуализация с трех ракурсов
Визуализация в конфигураторе формируется путем послойной программной склейки текущих выбранных опций - каждая опция может иметь свое изображение на прозрачном фоне, маску окрашивания, на которой конкретными зафиксированными в конфигураторе цветами отмечены зоны, которые будут затонированы в текущий выбранный клиентом цвет соответствующей зоны. В конфигуарторе предусмотрены следующие зоны окрашивания:- Цвет отделки - Кожа (основа)
- Цвет отделки - Кожа (компаньон)
- Цвет отделки - Алькантара
- Цвет отделки - Ковровое покрытие
- Отделка диванов VIP-салона - Кожа (основа)
- Отделка диванов VIP-салона - Кожа (компаньон)
- Отделка натуральным деревом - Основа
- Отделка натуральным деревом - Компаньон
Таким образом, возможно программное окрашивание по 8 разным областям изображения. Схема формирования финальной визуализации следующая: для текущего выбранного ракурса склеиваются с указанием выбранного слоя (номер от 1 до 9) все изображения и все маски текущих выбранных опций (минимально это изображение с накладками бортов и текущим выбранным vip-диваном, но возможна последовательная склейка до 9 слоев) далее полученное изображение пропускается через маску с указанием цвета тонирования (текущие выбранные цвета отделки).
В административном разеде сайта для каждой визуализации указывается файл самой визуализации и файл с маской:
4Запрещенные состояния
Для контроля выбора опций используется две схемы - разрешенные и запрещенные взаимосвязанные опции. При выборе каждой опции пользователю деактивируются/активируются возможные в текущий момент времени варианты.
Такая сложная схема формирования изображений потребовала и своеобразного административного интерфейса - для хранения данных используется несколько взаимосвязанных инфоблоков 1С-Битрикс и свойства привязки для указания, с какой опцией разрешено использование данной опции и с какой опции, наоборот, разрешено.
Схема хранения и генерации изображений в конфигураторе потребовала объемной подготовки наполнения (изображений и масок к ним). Поэтому также был отработан вариант при отсутствии готовых масок на конкретные ракурсы (в этом случае отображается нетонированное изображение, но сама склейка все равно работает)
5PDF-спецификация и заявка
Конверсионные кнопки позволяют оформить заявку (в этом случае будут собраны контактные данные клиента и отправлена заявка вместе со спецификацией и указанием всех выбранных клиентом параметров в конфигураторе).
Также возможно скачивание спецификации - в этом случае конфигуратор формирует сразу 3 ракурса (front, rear и side) и создает pdf-файл.
Оглавление
Оглавление
Нужен похожий проект?
Расскажите о задаче — покажем близкие по смыслу работы и предложим решение со сроками и бюджетом.
Похожие проекты
