Какие готовые JavaScript-библиотеки можно соединить внутри одного HTML-инструмента, чтобы создавать процедурные миры, интерактивные 3D-модели, картографические подложки, параметрическую геометрию, генеративную графику и новые способы управления архитектурой.
Разобрать основные семейства браузерных инструментов — от 2D-графики и WebGL до карт, геоаналитики, камеры и звука.
Подобрать не самую модную библиотеку, а минимальный набор, который непосредственно обслуживает механику собственного проекта.
Соединить профессиональное правило, входные данные, интерактивную сцену и экспорт в одну проверяемую браузерную цепочку.
Подробный отчёт
Подробный справочник: что делает каждая библиотека, когда она действительно нужна, как инструменты соединяются между собой и какой минимальный эксперимент можно собрать за один день.
Открыть каталог инструментовТема четвёртого дня
В первые три дня участники прошли путь от идеи к структуре цифрового продукта. Четвёртый день раскрывает следующий уровень: из каких готовых технологических деталей можно собрать собственный архитектурный инструмент.
Современный браузер умеет значительно больше, чем показывать текст и изображения. Он может выводить интерактивную 2D- и 3D-графику, работать с камерой, микрофоном и геолокацией, читать локальные файлы, выполнять пространственные вычисления, сохранять данные и формировать файлы для экспорта. JavaScript-библиотеки дают готовые элементы для этих задач, чтобы не создавать графический движок, карту или распознавание жестов с нуля.
Главный принцип занятия: сначала механика проекта — затем библиотека. Инструменты не заменяют архитектурную идею. Они расширяют набор материалов, входных данных и способов взаимодействия, доступных автору.
Разговор в группе
Один инструмент редко делает всё. Рабочий прототип возникает, когда каждая библиотека получает одну ясную роль в общей архитектуре продукта.
Например, карта может быть построена на MapLibre GL JS, геометрический буфер вокруг участка — рассчитан Turf.js, объём здания — создан или показан в Three.js, а параметры — сохранены как JSON. Эти библиотеки не конкурируют: они образуют последовательность обработки данных.
Полезно различать четыре слоя. Источник даёт фотографию, звук, географическую точку или набор параметров. Вычислительный модуль превращает данные в числа и геометрию. Представление показывает карту, графику, план или 3D-сцену. Выход сохраняет изображение, конфигурацию или модель.
Для первого прототипа достаточно одной цепочки, работающей от начала до конца. Подключение десяти библиотек одновременно увеличивает вес страницы, число зависимостей и количество возможных ошибок. Поэтому минимальный стек обычно сильнее случайного каталога эффектов.
Идеи, сформулированные в этот день
Это не рейтинг и не обязательный комплект. Каждый набор отвечает на свой тип проектной задачи; внутри проекта обычно достаточно выбрать один основной инструмент визуализации и несколько узких дополнений.
Рисовать алгоритмические планы, паттерны, фасадные ритмы, диаграммы и реактивную графику. p5.js удобен для первых творческих экспериментов; D3 связывает данные с SVG, Canvas или HTML.
Подходит для быстрой проверки правила: число → линия → композиция.Создавать сцену, камеры, свет, материалы, анимацию, выбор объектов и загрузку GLB/glTF. Three.js даёт гибкий слой над WebGL; Babylon.js предлагает более цельный игровой 3D-движок.
Основной выбор для конфигураторов, виртуальных макетов и процедурных миров.Строить воспроизводимые 2D- и 3D-формы из параметров, выполнять геометрические операции и готовить файлы для дальнейшего изготовления. JSCAD работает с телами, Maker.js — с линейной 2D-геометрией.
Нужны там, где форма должна быть не только видимой, но и вычисляемой.Показывать растровые и векторные карты, работать с GeoJSON, рассчитывать расстояния и буферы, строить 3D-глобус, рельеф и большие геопространственные сцены.
OpenStreetMap — источник данных, а не готовая библиотека; атрибуция источника обязательна.Превращать жест, позу, выражение лица, голос, частоту или ритм в управляющие параметры. MediaPipe даёт готовые задачи компьютерного зрения, Tone.js — музыкальную структуру поверх Web Audio.
Так появляются интерфейсы, в которых архитектура реагирует не только на ползунок.Быстро собрать панель параметров, загрузить модели и изображения, сохранить конфигурацию, сделать снимок сцены или передать геометрию в GLB, STL, SVG либо DXF — если выбранная библиотека поддерживает нужный формат.
Формат выхода выбирают в начале проекта: красивая сцена ещё не является CAD-моделью.Что зафиксировали к завершению
После обзора каждый участник должен соотнести свою механику с четырьмя слоями: вход → вычисление → представление → выход. Для одного проекта это может быть «фотография → извлечение палитры → процедурная 3D-форма → GLB и PNG», для другого — «точка на карте → геоанализ → объекты на подложке → GeoJSON», для третьего — «жест → числовые параметры → перестройка павильона → сохранённая конфигурация».
Отдельная часть занятия посвящена ограничениям. Большие модели и текстуры требуют оптимизации; доступ к камере, микрофону и геолокации запрашивает разрешение пользователя; внешние карты и сервисы могут иметь ключи, квоты и правила использования; экспорт в профессиональный формат нужно проверять на реальном файле и в целевой программе.
Подробный каталог содержит матрицу выбора, примеры связок для пяти проектов школы, минимальные технические схемы и ссылки на официальные документы. Он задуман не как энциклопедия JavaScript, а как навигатор для следующей итерации прототипов.
Браузер объединяет интерфейс, вычисление, визуализацию и сохранение результата в одном доступном прототипе.
Библиотеку выбирают по роли в пользовательской механике, а не по количеству эффектных примеров.
Three.js показывает и оживляет сцену; параметрическое тело требует отдельной геометрической логики.
Карта, геоанализ и 3D-геоданные — разные слои, которые можно соединять через GeoJSON и координаты.
Для первой версии достаточно одной полностью работающей цепочки от входа до экспорта.
Версия для публикации
День 04 DØMO ARCHITOYS — браузер как архитектурная лаборатория.
Разбираем JavaScript-инструменты, с которыми обычная HTML-страница превращается в генеративную графику, интерактивную 3D-сцену, параметрическую модель, карту, геоаналитический сервис или интерфейс, управляемый голосом и жестами.
Главный вопрос — не «какие плагины существуют», а какую роль каждый инструмент играет в механике проекта. Собираем собственную цепочку: входные данные → вычисление → визуализация → экспорт.