RACKLIGHT: операционная система склада в 3D, которую можно прощёлкать, — концепт

VITON¹³ делает концепт-продукты, чтобы показать диапазон там, где у нас пока нет клиентского проекта. RACKLIGHT — операционный из них: WMS для Norvane DC-02, придуманного склада ответственного хранения с 400 товарами, 38 исходящими заказами в день, пятью воротами приёмки, пятью воротами отгрузки и холодильной камерой. Компания, её клиенты, перевозчики, поставщики и все цифры вымышлены, и демо прямо говорит об этом закреплённой плашкой.

Задачу мы поставили себе сами. Складской софт обычно показывает запасы таблицами кодов — значит, пусть интерфейсом станет сам склад: каждая паллета на виду, каждое действие отражается в зале, но без превращения в 3D-витрину. Нужны были сценарии, которые узнает начальник смены, цифры за каждой рекомендацией, английский и русский, ноутбук и телефон.

Склад — здание 108 × 80 м на three.js с ортографической изометрической камерой: 12 основных рядов с зоной отбора и резервом, 4 ряда в стеклянной холодильной камере, приёмка, упаковочные места с конвейером, линии отгрузки и 10 ворот с фурами. 1 656 ячеек — инстансированные паллеты, окрашенные по остатку, а в тепловом режиме — по частоте отбора. Девять сборщиков и пять погрузчиков ездят по графу проходов, фуры по расписанию сдают задом к воротам, а при наведении на ячейку видны SKU, количество и заполненность.

С ним работают четыре инструмента. Поиск (⌘K) охватывает все 400 SKU, заказы и коды ячеек: камера летит к ячейке, луч света подсвечивает её, а от ближайшего сборщика тянется маршрут. Оптимизатор маршрута сравнивает порядок строк в листе сборки с маршрутом, построенным методом ближайшего соседа и 2-opt по кратчайшим расстояниям между рядами, и отправляет по нему сборщика. Правило размещения при скане на приёмке выбирает ячейку по оборачиваемости — ходовой товар ближе к упаковке, медленный на верхние ярусы резерва, охлаждённый в холодильную камеру, — и погрузчик везёт туда паллету. Четвёртый инструмент — аналитика запасов.

Вокруг сцены — панели показателей (заполненность по зонам, принято и отгружено за день, точность сборки, заказы до ближайшей отсечки перевозчика, лента событий и шкала доков), таблица запасов с фильтрами и графиком спроса за 90 дней для каждого SKU, очередь заказов по статусам и отсечкам и диаграмма Ганта на 10 ворот. Все изменения сохраняются у посетителя в браузере, а одна кнопка сбрасывает песочницу.

Аналитика запасов — это демо-ИИ, и интерфейс так и говорит: правила и статистика в браузере, а не языковая модель. У каждого SKU 90 дней сгенерированного спроса с недельной сезонностью; прогноз строится на сезонных индексах за последние восемь недель и линейном тренде с затуханием, страховой запас при z = 1,65 задаёт точку заказа, а четыре списка показывают дефицит (закажите поставку — и к воротам встанет фура), излишки, неликвид и перестановки с метрами, которые они сэкономят. Каждое действие меняет 3D-сцену: паллеты приезжают, переезжают, окрашиваются в фиолетовый для распродажи или уезжают.

Всё процедурное: ни 3D-моделей, ни текстур-картинок, ни внешних запросов. Оболочка на чистом JavaScript собрана esbuild и отрисовывается первой; сцена на three.js — отдельный чанк, который грузится после неё. Паллеты — инстансированные меши с одним доработанным материалом для швов коробок, затемнения, теплового свечения и включения света в интро; тени перерисовываются только при изменении остатков, разрешение снижается, если кадры запаздывают, а в фоновой вкладке отрисовка встаёт на паузу. На телефоне — облегчённая сцена с меньшим числом людей и машин, лента показателей, нижние шторки и панель вкладок.

Сейчас это работающий концепт по адресу tarasovvitalii.com/demos/racklight/: четыре раздела, четыре инструмента и около 230 строк интерфейса на каждом из двух языков. 28 сентября 2026 года мы измерили продакшен-сборку: первый скрипт — 10 КБ в gzip (после переделки загрузки), сцена на three.js — 154 КБ в gzip, вся сборка — 1,0 МБ без картинок, моделей и текстур. В Chrome в headless-режиме на MacBook Air с Apple M5, в окне 1600 × 1000 при Retina-масштабе, сцена держала 55–60 fps при стандартной частоте кадров 60 Гц в шести состояниях, а без ограничения выдавала 160–200 fps — около 5–6 мс на кадр.

Ещё мы прогнали собственный код маршрутизации демо на 1 140 заказах, которые оно генерирует за 30 дней. Оптимизированный маршрут в медиане на 32 % короче обхода по порядку строк листа сборки, а заказ с экранов сокращается с 409 до 211 м. Против листа, просто отсортированного по коду ячейки, медианный выигрыш — около 9 %; для склада, который уже сортирует листы сборки, честнее сравнивать именно так.

RACKLIGHT — концепт, который VITON¹³ сделал, чтобы показать диапазон; это не заказной продукт. Norvane DC-02, его клиенты, перевозчики, поставщики, товары и все цифры вымышлены и генерируются в браузере: за демо нет ни пользователей, ни заказчиков, ни склада, ни выручки, и оно ничего не доказывает о внедрении или экономии на реальном складе. Демо-ИИ — правила и статистика на устройстве посетителя, а не обученная модель, и настоящего спроса он не видел.

Демо не подключено ни к настоящей WMS, ни к ERP, ни к сканерам штрихкодов, ни к системе доков; схема склада задана в коде, а не импортирована из чертежей, а маршрутизация не учитывает заторы, тележки и пакетную сборку. Частота кадров снята на одном компьютере в headless Chrome за один день, а проверка Lighthouse ниже сделана на живом адресе 28 сентября 2026 года, с имитацией телефона, а не на настоящих устройствах. Демо намеренно закрыто от поиска.

Как проверить портфолио веб-студии →