DØMO ARCHITOYSЛетняя школа Михаила Корси для архитекторов

Подробный отчёт ·

JavaScript-конструктор архитектора

Практический навигатор по браузерным технологиям: от генеративной графики, параметрической геометрии и 3D-сцен до карт, геоаналитики, камеры, звука и экспорта.

Событие
DØMO ARCHITOYS
Формат
лекция-демонстрация + практический выбор стека

Четвёртый день DØMO ARCHITOYS посвящён расширению технологического словаря архитектора. После идеи, исследования темы, технического задания и проектирования механики возникает практический вопрос: из каких готовых деталей собрать работающую браузерную систему?

Ответ даёт не одна универсальная программа, а экосистема веб-технологий. Одни библиотеки рисуют, другие строят трёхмерную сцену, третьи вычисляют геометрию, четвёртые работают с картой, камерой или звуком. Задача автора — распределить роли и соединить их в короткую причинную цепочку.

Вход → интерпретация → вычисление → представление → взаимодействие → выход.

Браузер — это среда выполнения

HTML задаёт структуру интерфейса, CSS — его визуальную систему, JavaScript — поведение и вычисления. Внутри страницы браузер предоставляет собственные возможности: Canvas и SVG для графики, WebGL и WebGPU для работы с графическим процессором, Web Audio для звука, MediaDevices для камеры и микрофона, Geolocation для положения пользователя, File API для локальных файлов, Web Workers для фоновых вычислений и хранилища для состояния проекта.

Библиотека не отменяет эти технологии, а делает их доступнее. Three.js упрощает работу с WebGL; Tone.js организует Web Audio; Leaflet и MapLibre собирают из низкоуровневых возможностей интерактивную карту.

Карта ролей

Проектная задача Основные инструменты Что появляется на экране или в файле
Генеративный рисунок, паттерн, схема Canvas, SVG, p5.js, D3 линии, поля, диаграммы, анимация
Интерактивная 3D-сцена Three.js или Babylon.js модель, свет, камера, материалы, выбор объектов
Параметрическая 2D/3D-геометрия Maker.js, JSCAD вычисляемый контур или тело, SVG/DXF/STL
Карта и данные территории Leaflet или MapLibre GL JS подложка, слои, подписи, GeoJSON
Геопространственный расчёт Turf.js буферы, расстояния, пересечения, центры, сетки
Глобус, рельеф и большие 3D-данные CesiumJS WGS84-глобус, terrain, 3D Tiles
Камера, поза, кисти, лицо MediaPipe Tasks координаты ключевых точек и распознанные классы
Голос, частота, ритм, синтез Web Audio, Tone.js аудиосигнал и числовые параметры времени/частоты
Быстрая панель настроек lil-gui ползунки, списки, переключатели

1. Генеративная графика: Canvas, SVG, p5.js и D3

Для первых процедурных экспериментов не всегда нужна трёхмерная сцена. Планировочная сетка, фасадный ритм, орнамент, поле плотности или диаграмма могут быть убедительно собраны в 2D.

Canvas работает как растровая поверхность: JavaScript последовательно рисует на ней линии, фигуры и изображения. Он удобен для большого количества быстро меняющихся элементов. SVG хранит графику как структуру векторных объектов: каждый путь, текст или круг можно стилизовать, выбирать и экспортировать.

p5.js создан для доступного творческого программирования. Он особенно полезен на старте, когда нужно быстро связать число, движение мыши, звук или случайность с визуальным правилом. D3 связывает данные с элементами HTML, SVG или Canvas и подходит для авторских диаграмм и пространственных представлений данных.

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

2. Интерактивное 3D: Three.js и Babylon.js

Three.js — библиотека для построения трёхмерных сцен в браузере. Она организует базовые сущности: сцену, камеру, источник света, геометрию, материал и средство вывода. Официальные примеры показывают загрузку моделей, физические материалы, анимацию, инстансинг, постобработку и множество процедурных сцен.

GLTFLoader загружает glTF 2.0 и бинарные GLB-модели. Это позволяет подготовить исходный объект в Blender или другой программе, а в браузере менять материалы, видимость частей, положение камеры и пользовательские параметры.

Babylon.js решает близкий круг задач, но предлагает более цельный движок с большим количеством готовых подсистем. Для небольшого авторского конфигуратора Three.js часто даёт прямой и гибкий путь; для сцены, близкой к игре или симуляции, Babylon.js может сократить сборку инфраструктуры. Это не абсолютное правило — выбор подтверждается маленьким прототипом.

Мини-эксперимент: параметрическая башня из повторяемых этажей. Ползунок меняет высоту и число модулей, переключатель — тип завершения, клик по этажу показывает его параметры, результат сохраняется как PNG и JSON.

3. Процедурный мир — это правило, а не готовый эффект

Процедурный мир возникает, когда пространство строится из алгоритмов. Случайность обычно управляется фиксированным начальным значением — seed. Тогда один и тот же seed воспроизводит тот же ландшафт, квартал или набор объектов.

Базовая схема может включать:

  1. сетку или систему координат;
  2. функцию высоты или плотности;
  3. правила размещения дорог, воды, зданий и растительности;
  4. ограничения — уклон, расстояние, инсоляцию или зонирование;
  5. уровни детализации и повторное использование геометрии;
  6. сохранение seed и параметров.

Three.js отвечает за визуальное представление, но профессиональный смысл создают ваши правила. Для большой сцены важны instancing, уровни детализации, облегчённые материалы и контроль числа полигонов.

4. Параметрическая геометрия: JSCAD и Maker.js

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

JSCAD представляет собой набор браузерных и серверных инструментов для параметрических 2D- и 3D-проектов на JavaScript. Модель описывается кодом и перестраивается из параметров; официальная документация подчёркивает точность, воспроизводимость и применение для 3D-печати.

Maker.js работает прежде всего с модульными линейными 2D-чертежами. Он поддерживает экспорт, в том числе SVG и DXF, и полезен для фасадных контуров, раскроя, орнаментов и деталей для лазерной резки.

Мини-эксперимент: генератор мемориальной стелы. Параметры меняют профиль, высоту, угол среза и количество ступеней; экран одновременно показывает 3D-представление и точный 2D-контур для экспорта.

5. Карты: OpenStreetMap, Leaflet и MapLibre GL JS

Здесь особенно важно не смешивать понятия. OpenStreetMap — открытая база географических данных. Leaflet и MapLibre GL JS — библиотеки, которые могут показывать карты и слои, полученные от разных поставщиков.

Leaflet — лёгкая библиотека для мобильных интерактивных карт. Она хорошо подходит для маркеров, растровых подложек, всплывающих окон и несложных GeoJSON-слоёв.

MapLibre GL JS использует WebGL и векторные тайлы. Стиль карты задаётся документом, поэтому можно управлять цветом, видимостью и порядком слоёв, наклонять карту и работать с объёмными представлениями.

Использование данных OpenStreetMap требует атрибуции. Публичные тайловые серверы также имеют собственные правила и ограничения нагрузки; для рабочего продукта нужно отдельно выбрать допустимого поставщика тайлов.

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

6. Геоанализ: Turf.js

Карта показывает данные, но не обязательно анализирует их. Turf.js предоставляет модульные функции пространственного анализа для браузера и Node.js, работающие с GeoJSON.

С его помощью можно рассчитывать расстояния и площади, строить буферы, центры и сетки, проверять попадание точки в полигон, пересекать и объединять геометрии. Это позволяет превратить картографическую подложку в простой исследовательский инструмент.

Мини-эксперимент: вокруг выбранного участка автоматически строятся зоны доступности 300, 500 и 1000 метров; система подсчитывает объекты каждого типа и показывает результат на карте и в диаграмме.

7. Глобус, рельеф и 3D Tiles: CesiumJS

CesiumJS предназначен для высокоточной трёхмерной геопространственной визуализации на глобусе WGS84. Он поддерживает потоковую работу с рельефом и форматом 3D Tiles для больших неоднородных наборов 3D-данных — зданий, фотограмметрии и облаков точек.

CesiumJS нужен не каждому проекту. Для карты одного квартала MapLibre часто проще. Cesium становится оправданным, когда критичны глобальные координаты, рельеф, масштаб территории, большие 3D-наборы или движение по поверхности Земли.

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

8. Камера и тело: MediaPipe Tasks

MediaPipe Tasks предоставляет веб-API для задач компьютерного зрения, текста и аудио. В архитектурной игрушке особенно интересны распознавание позы, кистей, лица и объектов.

Система возвращает не готовую архитектуру, а результаты распознавания — например, координаты ключевых точек. Автор решает, как эти числа интерпретируются. Расстояние между кистями может задавать пролёт, высота руки — этажность, наклон корпуса — деформацию объёма.

Камера требует явного разрешения пользователя. Нужно объяснить, что считывается, обрабатывается ли поток локально и сохраняются ли данные.

Мини-эксперимент: раскрытие павильона жестом. Разведение рук изменяет ширину, поднятие ладони — высоту навеса, короткая фиксация позы сохраняет вариант.

9. Голос, ритм и звук: Web Audio и Tone.js

Web Audio API даёт браузеру граф обработки звука. Tone.js добавляет знакомые музыкальные сущности: транспорт, точное планирование событий, синтезаторы и эффекты.

Для архитектурного инструмента звук может быть как входом, так и выходом. Анализ микрофона позволяет извлечь громкость или спектр; музыкальная сетка может задавать ритм фасада; изменение пространства может сопровождаться синтезированным звуковым откликом.

Мини-эксперимент: голос строит башню. Средняя громкость управляет шириной, высота тона — вертикальным шагом, паузы создают общественные уровни, а вся запись сохраняется вместе с параметрами результата.

10. Панель параметров и состояние

lil-gui позволяет быстро создать техническую панель ползунков, списков и переключателей. Она удобна для раннего прототипа и отладки связей, но не обязана становиться финальным интерфейсом продукта.

Все параметры полезно хранить в одном объекте состояния. Тогда интерфейс изменяет состояние, вычислительные функции перестраивают модель, визуальный слой показывает результат, а экспорт сохраняет ту же конфигурацию как JSON.

const state = {
  floors: 8,
  width: 18,
  roof: "folded",
  seed: 2047
};

function update(next) {
  Object.assign(state, next);
  rebuildGeometry(state);
  renderScene(state);
}

Эта простая дисциплина предотвращает ситуацию, когда разные кнопки независимо и непредсказуемо меняют сцену.

11. Экспорт: сначала определить назначение

Слово «экспорт» скрывает разные результаты:

  • PNG или JPEG фиксирует изображение, но не геометрию;
  • JSON сохраняет параметры и структуру данных;
  • SVG и DXF передают 2D-векторные контуры;
  • STL передаёт поверхность для печати, но не полноценную сцену;
  • glTF/GLB передаёт веб-ориентированную 3D-сцену с геометрией, материалами и другими поддерживаемыми свойствами;
  • GeoJSON хранит географические объекты и их свойства.

Наличие экспортёра в библиотеке ещё не гарантирует пригодность файла для конкретного CAD/BIM-процесса. Проверка считается завершённой только тогда, когда файл открыт в целевой программе, масштаб и координаты сохранены, а геометрия соответствует дальнейшей задаче.

12. Что соединить в проектах школы

«Чертёж → трёхмерное пространство»

Вход: изображение или векторный контур. Обработка: Canvas/SVG, при необходимости распознавание линий. Представление: Three.js. Выход: PNG, JSON, после проверки — GLB.

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

«Фотография → форма + палитра»

Вход: фотография. Обработка: Canvas получает пиксели и палитру. Геометрия: собственные правила или JSCAD. Представление: Three.js. Выход: изображение, параметры, палитра.

Главная работа здесь не техническая, а методическая: точно описать, как цвет, контраст и композиция связаны с архитектурными свойствами.

Конфигуратор здания

Вход: параметры типологии. Геометрия: Three.js для ранней сцены; JSCAD или Maker.js там, где нужен точный контур. Интерфейс: сначала lil-gui, затем авторская панель. Выход: JSON, PNG и проверенный формат модели.

Персональный городской музей

Вход: фотография, геолокация, заметка. Карта: Leaflet или MapLibre. Данные: GeoJSON. Анализ: Turf.js для пространственных связей. Выход: карта личной коллекции и карточки объектов.

Найденные сведения должны хранить источник и отличаться от личного комментария пользователя.

Archi Helper

Вход: изображение планшета. Обработка: Canvas для масштаба, зон и цвета; при развитии — отдельные модели компьютерного зрения. Представление: SVG-слой с замечаниями поверх изображения и D3 для метрик. Выход: чек-лист и аннотированное изображение.

Автоматическая проверка должна ясно отделять формальные критерии от профессиональной интерпретации проекта.

Матрица выбора

Перед подключением библиотеки ответьте на семь вопросов:

  1. Какую одну функцию она выполняет в пользовательском сценарии?
  2. Можно ли собрать ту же проверку средствами браузера без новой зависимости?
  3. Поддерживается ли библиотека и есть ли официальная документация с рабочими примерами?
  4. Какова лицензия библиотеки и лицензия данных или тайлов, которые она показывает?
  5. Работает ли она на телефоне и на менее мощном компьютере?
  6. Какие разрешения, ключи, квоты или внешние сервисы ей требуются?
  7. Как будет проверен результат — визуально, численно и в целевой программе?

Практическое задание четвёртого дня

Каждый участник готовит одну схему:

пользовательское действие → входные данные → библиотека обработки → правило автора → библиотека представления → сохраняемый результат.

Затем собирается минимальный технический опыт. Он может быть очень маленьким: одна карта с одним слоем, один жест, изменяющий один параметр, один генератор контура или одна загружаемая GLB-модель. Критерий успеха — не визуальное богатство, а полностью работающая причинная связь.

Чек-лист готовности

  • Главная механика объясняется одной фразой.
  • У каждой библиотеки есть одна понятная роль.
  • Внешние источники и данные подписаны.
  • Разрешения камеры, микрофона и геолокации запрашиваются осмысленно.
  • Состояние проекта можно сохранить и восстановить.
  • Есть индикатор загрузки и понятное сообщение об ошибке.
  • Проверена работа мышью, касанием и клавиатурой там, где это необходимо.
  • Большая модель оптимизирована, а тяжёлые вычисления не блокируют интерфейс.
  • Экспорт открыт в целевой программе и проверен.
  • Первая версия не пытается решить задачи, которые ещё не исследованы.

Главный вывод

JavaScript-библиотеки расширяют палитру архитектора: линия может стать алгоритмом, карта — вычислительным полем, модель — интерактивной системой, а голос или жест — исходными данными для формы.

Но технология приобретает смысл только внутри спроектированной причинной связи. Сильный браузерный инструмент начинается не с Three.js, карты или нейросети. Он начинается с профессионального вопроса — и использует ровно те детали, которые помогают этот вопрос исследовать.