Открыть вкладку браузера и начать строить дом — без установки, без лицензий, без регистрации. Pascal Editor делает именно это: 3D-редактор зданий, полностью работающий в браузере, на уровне, который недавно требовал десктопных пакетов вроде AutoCAD или Revit.
Инструмент построен на WebGPU — графическом API, который даёт браузеру прямой доступ к видеокарте. Раньше 3D-моделирование в браузере упиралось в WebGL: медленно, ограниченно, без настоящей геометрии. WebGPU меняет порог входа.
Название вводит в заблуждение. Pascal Editor — не среда для написания кода на языке Pascal. Это инструмент 3D-моделирования зданий, и «Pascal» здесь — имя проекта, а не язык программирования.
Что это
Pascal Editor — open-source проект под лицензией MIT. Открыли вкладку editor.pascal.app — и моделируете: стены, этажи, крыши, двери, окна, мебель. Никакой регистрации, никакой установки, никаких лицензионных отчислений.
Рендеринг полностью идёт через видеокарту в браузере. Под капотом — React Three Fiber (React-обёртка над Three.js) и WebGPU. Уровень графики, который до недавнего времени был доступен только нативным приложениям. Проёмы в стенах реально вырезаются в геометрии через булевые операции — не текстуры поверх.
Важно: Pascal Editor — инструмент ранних этапов проектирования: визуализация, прототипирование, эксперименты. Не замена AutoCAD или Revit для рабочей документации.
Зачем нужно
- Набросать планировку для клиента. Расставили зоны, показали живую 3D-сцену в браузере — без отправки тяжёлых файлов и установки просмотрщиков.
- Конфигуратор на сайт застройщика. Берёте форк репозитория, меняете под свои задачи, встраиваете в React-приложение. Благодаря React Three Fiber интеграция — это просто ещё одни React-компоненты в вашем дереве.
- Учебная кодовая база. Разработчику, который хочет разобраться в браузерном 3D, Pascal Editor полезен как референс: понятная архитектура, разделение зон ответственности, актуальный стек.
- 3D-планы для умного дома. Сообщество Home Assistant применяет редактор для чертежей помещений — результат связывают с системами домашней автоматизации.
- Генерация по описанию. Текстовый промпт «вилла с бассейном на два этажа» создаёт черновую модель — дальше доводите руками до нужной точности.
Как устроено
Архитектура — монорепо на Turborepo, три пакета. Next.js-приложение в apps/editor, ядро в packages/core (схемы, стейт-менеджмент, системы), рендеринг в packages/viewer (3D-компоненты).
editor-v2/
├── apps/
│ └── editor/ # Next.js приложение
├── packages/
│ ├── core/ # Схемы, стейт-менеджмент, системы
│ └── viewer/ # 3D-рендерингТехнологический стек:
| Технология | Зачем |
|---|---|
| React 19 + Next.js 16 | Фреймворк приложения, SSR, роутинг |
| React Three Fiber | React-обёртка над Three.js — 3D становится компонентным подходом |
| Three.js + WebGPU | Рендеринг на видеокарте через браузер. WebGPU — следующее поколение после WebGL |
| Zustand | Стейт-менеджмент — лёгкий и предсказуемый |
| three-bvh-csg | Булевые операции с геометрией: вырезать проём в стене, объединить объёмы |
NPM-пакеты выложены как отдельные библиотеки: @pascal-app/core — схемы и состояние, @pascal-app/viewer — рендеринг 3D. Их можно ставить в чужие проекты и использовать как зависимости.
Иерархия узлов
Сцена описывается узлами (nodes) — базовыми примитивами данных. Каждый узел имеет тип, ID и родительскую ссылку. Узлы хранятся в плоском словаре, не во вложенном дереве. Иерархия:
Site
└── Building
└── Level
├── Wall → Item (doors, windows)
├── Slab
├── Ceiling → Item (lights)
├── Roof
├── Zone
├── Scan (3D reference)
└── Guide (2D reference)Управление состоянием
Каждый пакет имеет свой Zustand-store. useScene в @pascal-app/core хранит данные сцены: узлы, корневые ID, «грязные» узлы (требующие пересчёта). Сохраняется в IndexedDB с историей undo/redo на 50 шагов через Zundo. useViewer в @pascal-app/viewer — текущий выделение, режим отображения уровней. useEditor — активный инструмент, видимость слоёв, настройки панели.
Системы и рендеринг
Системы — React-компоненты, которые выполняются в цикле рендеринга (useFrame) и обновляют геометрию по «грязным» узлам. Когда узел меняется, он помечается как dirty, и соответствующая система пересчитывает геометрию в следующем кадре.
| Система | Ответственность |
|---|---|
| WallSystem | Генерация геометрии стен со скосами и CSG-вырезами под двери/окна |
| SlabSystem | Генерация геометрии пола из полигонов |
| RoofSystem | Генерация геометрии крыш |
| ItemSystem | Размещение предметов на стенах, потолках или полу |
| LevelSystem | Видимость и вертикальное позиционирование уровней |
Рендереры — React-компоненты, создающие Three.js-объекты для каждого типа узла. WallRenderer создаёт placeholder-mesh, регистрирует его в реестре сцены, и WallSystem обновляет геометрию по данным узла.
Шина событий и пространственный поиск
Компоненты общаются через типизированную шину событий (mitt): wall:click, item:enter, zone:context-menu. Для размещения предметов используется spatialGridManager — проверяет, можно ли поставить предмет на пол или стену, и вычисляет высоту пола.
Плагины
Редактор расширяется через плагины. Плагин поставляет типы узлов (схема, 3D/2D-рендеринг, инструменты размещения, инспектор параметров) и панели через тот же манифест, что и встроенные элементы. Отдельного внутреннего API нет — плагины используют тот же интерфейс, что и built-ins.
Когда использовать
| Ситуация | Подходит / не подходит | Почему |
|---|---|---|
| Быстрый прототип планировки для клиента | Подходит | Браузер, без установки, интерактивная 3D-модель сразу |
| Конфигуратор на сайт застройщика | Подходит | React Three Fiber — обычные React-компоненты, форк MIT-лицензии |
| Рабочая документация для стройки | Не подходит | Инструмент ранних этапов, не AutoCAD-killer |
| Продакшен для широкой аудитории | С оговоркой | WebGPU полноценно работает только в Chrome, нужен фоллбэк |
| Изучение WebGPU и React Three Fiber | Подходит | Чистая архитектура, современный стек, open-source код |
Пример
Самый быстрый способ — зайти в онлайн-редактор:
https://editor.pascal.appРегистрация не требуется. Открыли — и можно строить.
Локальный запуск для доработки или self-hosting:
git clone https://github.com/pascalorg/editor.git
cd editor
npm install
npm run devПодключение NPM-пакетов к своему проекту:
npm install @pascal-app/core @pascal-app/viewerОграничения
Ограничения
Что учитывать
Границы инструмента — технические и стадийные. Перед внедрением важно понимать, где Pascal Editor перестаёт быть полезным.
WebGPU работает только в Chrome — Полная поддержка WebGPU — в Chrome на десктопе.
Firefox и Safari поддерживают WebGPU частично или за флагом. Если ваш продукт рассчитан на широкую аудиторию, часть пользователей не сможет работать с 3D-сценой. Решение — проверять поддержку через navigator.gpu и показывать фолбэк: 2D-план, скриншот сцены или сообщение с предложением открыть в Chrome.
Не подходит для рабочей документации — Pascal Editor — инструмент ранних этапов: визуализация, прототипирование, эксперименты с планировкой.
Он не генерирует чертежи и не ведёт спецификации. AutoCAD (от $1 975/год) и Revit (от $3 645/год) остаются инструментами для рабочей документации. Pascal Editor — $0, но в другой нише.
Производительность зависит от GPU — Весь рендеринг идёт на видеокарте клиента, серверных вычислений нет.
На встроенной графике сложные сцены могут подтормаживать при вращении камеры — источник прямо указывает на эту зависимость. На дискретной видеокарте те же сцены работают плавно. Ограничение — не в коде, а в отсутствии серверного рендеринга: мощный сервер не поможет, если у пользователя слабое устройство.
Ранняя стадия проекта — Редактор активно развивается.
На момент проверки (июль 2026) версия в репозитории — editor-v2, NPM-пакеты @pascal-app/core и @pascal-app/viewer опубликованы. Для production-внедрения фиксируйте версию пакетов в package.json и следите за релизами в репозитории.
Антипаттерны
Антипаттерны
Чего не делать
Ошибки возникают, когда Pascal Editor воспринимают как «бесплатный AutoCAD» или забывают про браузерные ограничения.
Рассчитывать на все браузеры — Встраивать редактор в продукт для широкой аудитории без фолбэка — пользователи Firefox и Safari увидят пустой canvas или ошибку.
WebGPU там не стабилен: Firefox поддерживает частично за флагом, Safari в процессе. Проверяйте navigator.gpu перед инициализацией и заготовьте 2D-режим или сообщение «откройте в Chrome». Без этого часть аудитории получит сломанный опыт.
Использовать для рабочей документации — Пытаться выпустить чертежи, спецификации или расчёты конструкций через Pascal Editor — инструмент для этого не предназначен.
Результат — 3D-сцена с геометрией, а не комплект чертежей. Для рабочей документации нужен AutoCAD или Revit. Pascal Editor полезен на этапе «показать клиенту планировку» и «набросать зонирование», не дальше.
Полагаться только на editor.pascal.app — Онлайн-редактор на editor.pascal.app — публичный экземпляр.
Для production — форкните репозиторий и разверните у себя. Лицензия MIT это разрешает. NPM-пакеты @pascal-app/core и @pascal-app/viewer можно подключить к своему Next.js-приложению и управлять собственным экземпляром редактора.
Чеклист
Чеклист
Проверка перед запуском
Конкретные шаги, которые нужно выполнить перед внедрением или запуском Pascal Editor в свой продукт.
Проверить поддержку WebGPU в браузере — Откройте chrome://gpu в Chrome — найдите строку WebGPU, она должна быть отмечена как Hardware accelerated.
В Firefox — about:config, флаг dom.webgpu.enabled. В Safari — Develop, Feature Flags, WebGPU. Если флаг выключен или отсутствует — включите, перезапустите браузер, проверьте снова. Без аппаратного ускорения редактор не запустится.
Оценить GPU целевого устройства — Откройте editor.pascal.app и постройте сцену с несколькими стенами, дверями и мебелью.
Вращайте камеру — если движение рывками, GPU не справится с реальными проектами. Для production рекомендуйте дискретную графику. На встроенной графике тестируйте простые сцены без мебели.
Зафиксировать версии NPM-пакетов — При установке @pascal-app/core и @pascal-app/viewer указывайте точную версию, не caret-диапазон.
Проект на ранней стадии, и обновления могут менять API. Проверяйте releases в github.com/pascalorg/editor и обновляйте версию вручную после тестирования.
Подготовить фолбэк для не-Chrome браузеров — Если продукт для широкой аудитории — до запуска реализуйте проверку navigator.gpu и альтернативный режим: 2D-план, статичный скриншот 3D-сцены или сообщение «откройте в Chrome».
Без фолбэка пользователи Firefox и Safari получат пустой экран.
Ссылки
Ссылки
- Сайт: editor.pascal.app
- Репозиторий: github.com/pascalorg/editor
- Документация: mintlify.com/pascalorg/editor
- Сайт: pascaleditor.app
- Сайт: Discord сообщество
- Документация: @pascal-app/core на npm
- Документация: @pascal-app/viewer на npm