Конфигуратор окон в 3D и дополненной реальности: клиент видит окно у себя дома

Задача

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

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

Сайт для покупателей, построенный вокруг этого конфигуратора, описан в нашем кейсе Estimia. Здесь - о самом конфигураторе.

2D-редактор

Клиент начинает с шаблона - глухое окно, двух- или трёхстворчатое, с фрамугой, балконная дверь, раздвижная или складная система - и дальше меняет его прямо на чертеже. Нажимаешь на стекло - появляется небольшая панель: разделить по горизонтали или вертикали, удалить или выбрать открывание (глухое, поворотное, поворотно-откидное, верхнеподвесное, нижнеподвесное, штульповая створка). Тянешь импост - створки подстраиваются, размеры в миллиметрах на краях обновляются.

В боковой панели добавляется остальное: раскладка (межстекольная, накладная или по створке), подоконники и отливы, рольставни, москитные сетки, доборные профили, приточные клапаны. Цвета разбиты на стандартные и особые RAL, снаружи и внутри можно выбрать разный цвет, есть ламинация под дерево. Любое действие отменяется - по всем окнам заказа, шаг за шагом до самого начала.

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

Фигурные окна по реальной геометрии

Арки, полуарки, треугольники, трапеции и круги - то место, где большинство калькуляторов сдаётся и считает описанный прямоугольник. Здесь каждое непрямоугольное окно - настоящий контур: список вершин, каждая сторона прямая или дугой. Клиент может выбрать готовую форму, потянуть вершины и выгнуть стороны или нарисовать произвольный контур по сетке. Деления внутри формы становятся настоящими створками, у каждой своё открывание; под аркой можно оставить обычную раскладку створок и импостов.

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

Двери и перегородки

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

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

Перголы с кровлей и боковыми ограждениями

У пергол свой набор параметров: отдельностоящая, удлинённая или пристенная; ширина, глубина и высота, с более низкой задней частью для наклонной кровли. Кровля - поворотные ламели, неподвижное или раздвижное стекло, поликарбонат, сэндвич-панель или выдвижной тент. Каждую открытую сторону - фасад, левую, правую - можно оставить открытой или закрыть: экранной шторой, раздвижным или неподвижным стеклом (прозрачным, тонированным или матовым) либо стенкой из алюминиевых ламелей. У перголы с уклоном можно закрыть и треугольники между кровлей и боковинами.

Чертёж - перспектива от переднего угла на уровне глаз: клиент видит кровлю снизу, как увидел бы её в саду. Цена складывается из ставок компании: базовая цена и цена за квадратный метр площади, надбавки за кровлю за квадратный метр, ограждения по площади каждой стороны, треугольники по их площади и надбавки за цвет каркаса и ламелей.

3D из той же геометрии, а затем AR в комнате

Один переключатель превращает чертёж в 3D-модель. Это не отдельная модель, которая может разойтись с чертежом: она строится из той же рассчитанной геометрии, по которой рисуется 2D, поэтому каждое деление, створка, арка и состыкованный блок совпадают точно. Рама и створки протягиваются по контуру по реальному сечению профиля, наружный и внутренний цвет разделены по глубине профиля, ламинация показывает настоящую текстуру, а раскладка, сетки, подоконники и рольставни стоят там, где их выбрали. Ползунок “Открыть” поворачивает створки на петлях, сдвигает раздвижные и складывает гармошкой складные. На перголе тот же ползунок поворачивает ламели.

Потом клиент нажимает “Посмотреть в AR”. На компьютере конфигуратор показывает QR-код, на телефоне всё открывается сразу. Модель выгружается в двух форматах - для Android и для iPhone, - сохраняется по случайной ссылке и открывается во встроенном AR-просмотрщике телефона в натуральную величину: окна ставятся на стену, перголы - на пол. Ссылки живут 48 часов, после чего файлы удаляются; загрузки ограничены по размеру, проверяются по содержимому и по частоте с одного посетителя.

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

Экономия энергии и IRPF в смете

Итог сметы отвечает на следующий вопрос клиента: что я получу обратно? Для каждого окна показывается оценка годовой экономии на отоплении и кондиционировании, простой срок окупаемости в годах и возможный вычет по подоходному налогу IRPF за работы по повышению энергоэффективности. Экономия считается от разницы между теплопередачей нового окна и солнечным фактором стекла и показателями старого окна с одинарным стеклом, по средним по стране ценам на энергию и данным климатических зон.

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

Технологии

- Конфигуратор: React 19 + TypeScript, Tailwind CSS
- Геометрическое ядро: Paper.js (прямоугольные деревья, полигональные контуры с дугами, состыкованные блоки)
- Цены: расчёт по конфигурации, на каталоге и марже каждой компании
- 3D: three.js, загружается по требованию отдельным пакетом
- AR: выгрузка GLB и USDZ, Google model-viewer (WebXR, Scene Viewer, AR Quick Look)
- Сервер: Laravel (приём AR-моделей, ссылки с токеном, срок жизни и очистка)
- Хранение файлов: Cloudflare R2
- Отмена и повтор: история всего заказа на сериализуемых снимках
- Языки: испанский, английский, русский

Результат

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