Технопарк IT

WebGL-продукты

Линейка браузерных 3D-контуров: сцена, конфигуратор, визуализация в рантайме

Одна продуктовая линейка, а не набор разрозненных демо: WebGL-контуры, которые крутятся в браузере заказчика — сцена, конфигуратор, визуализация. Каждый продукт со своим разбором и рабочей сборкой внутри страницы.

Обсудить похожий проект

Отрасль: WebGL / real-time 3D / продукт в браузере
Срок: линейка продуктов
Год: 2026

Продукты линейки

Открытая кабина лифта по центру кадра: шлифованная сталь, зеркало, тёплый свет

WebGL · конфигураторпервый продукт линейки

Конфигуратор кабин лифтов

Подбор отделки кабины в браузере — с выгрузкой и заявкой на расчёт

Габариты, отделка щитов, потолок, пол, приказной пост, аксессуары, двери и лифтовой холл. На выходе — изображения, PDF-спецификация с артикулами, ссылка на конфигурацию и заявка. Рабочая сборка встроена прямо в страницу.

41материал отделки
< 2 сдо интерактивности

Смотреть продукт

Межкомнатная дверь по центру кадра: тёмный шпон, матовое стекло, тёплый свет за полотном

WebGL · конфигураторвторой продукт линейки

Конфигуратор межкомнатных дверей

Вся линейка Dariano — Unreal Engine и контур в браузере

Конфигуратор всей линейки Dariano, собранный в Unreal Engine: коллекции, отделки, остекление и фурнитура. На странице продукта — запись оригинала и браузерная сборка WebGL-линейки.

18параметров двери
1кодовая база на два продукта

Смотреть продукт

Оранжевая металлическая лестница по центру кадра: два марша, площадка, ограждение, тёмный фасад

WebGL · конфигуратортретий продукт линейки

Конфигуратор металлических лестниц

Расчёт по высоте вместо погонных метров: спецификация металла, масса и цена

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

13параметров конструкции
кгспецификация металла на лету

Смотреть продукт

Было

Задача

Заказчику обычно показывают ролик, Unity-сборку или «откройте в отдельном плеере». Нужен рабочий контур в браузере: крутить модель, собрать комплектацию, показать объект коллегам без установки. Разные продукты, один слой — WebGL, сцена, управление камерой и встраивание на сайт.

Сделали

Решение

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

Итог

Результат

WebGLРендер в браузере, не ролик
3DСцена, конфигуратор, визуализация

Линейка живёт одной страницей кейса: каждый продукт — направление со слайдами и внедрением, без россыпи отдельных URL «ради галочки».
Контур рассчитан на браузер заказчика: встроили на сайт или в кабинет, а не отдали архив со сценой.
Все продукты линейки встроены в свои страницы рабочими сборками, а не показаны роликом.
Линейка проверена трижды: каждый следующий продукт собран той же кодовой базой и отличается построителем геометрии и набором конфигурационных файлов.

Технологии

Стек

WebGL
GLSL
glTF

Следующий шаг

Нужен WebGL-контур на сайт: конфигуратор, сцена или визуализация в браузере?

Обсудить проект