Repolode
sloemo01

sloemo01/diorama

Плейбук и набор готового кода на Three.js для небольших диорам в пиксель-арт стиле с фиксированной камерой, ограниченной палитрой, дизерингом и детерминированной проверкой кадров.

Звёзды
339
Форки
22
Открытые issues
0
Последний коммит
7 дней назад

Что это?

Diorama — это плейбук и набор кода, который можно скопировать в проект, чтобы создавать небольшие постановочные сцены в пиксель-арт стиле на Three.js. Диорама здесь — миниатюрная сцена на подставке, снятая фиксированной камерой в ракурсе три четверти: с палитрой из 64 цветов, упорядоченным дизерингом, контурной обводкой и анимированными фигурками игрушечного масштаба. В центре репозитория — SKILL.md, единый автономный файл с описанием рабочего процесса, который начинается с исследования, визуальных и анимационных стандартов, пайплайна и процесса QA.

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

В папке verify/ находятся готовые примеры, а в templates/qa/ — восемь скриптов на базе Playwright для проверки зафиксированных кадров, полос движения и серий кадров для отдельных сущностей. Для скриптов QA нужны Node, three, esbuild и playwright-core.

Ключевые возможности

  • 01Фиксированная камера в ракурсе три четверти, подогнанная под границы сцены; без управления вращением.
  • 02Ограничение палитры до 64 цветов, упорядоченный дизеринг и контурная обводка в фиксированном проходе постобработки.
  • 03Детерминированные сцены, в которых можно зафиксировать и сравнить любой кадр.
  • 04Готовые к копированию модули для камеры, освещения, ригов, транспорта, воды, боевых сцен и эффектов.
  • 05Скрипты QA на базе Playwright для проверки зафиксированных кадров, полос движения и результатов проверки кадров для отдельных сущностей.

Сценарии использования

  • Создание небольших анимированных диорам в пиксель-арт стиле или игровых сцен на Three.js.
  • Подготовка детерминированных рендеров для сравнения кадров при регрессионном тестировании.
  • Использование AI-агента для написания кода по структурированному процессу создания 3D-сцен — от исследования до сборки.

Быстрый старт

  1. 1

    Клонируйте репозиторий

    git clone https://github.com/sloemo01/diorama.git "<target>"
  2. 2

    Перед сборкой прочитайте SKILL.md — полное руководство

  3. 3

    Скопируйте нужные модули из templates/ в свой проект

Что важно знать

  • Для QA-скриптов нужен Node с установленными three, esbuild и playwright-core.
  • Процесс установки рассчитан на ИИ-агента, который может выполнять команды оболочки.

Темы

Частые вопросы

Что такое diorama?
Плейбук и набор готового кода на Three.js для небольших диорам в пиксель-арт стиле с фиксированной камерой, ограниченной палитрой, дизерингом и детерминированной проверкой кадров. Diorama — это плейбук и набор кода, который можно скопировать в проект, чтобы создавать небольшие постановочные сцены в пиксель-арт стиле на Three.js. Диорама здесь — миниатюрная сцена на подставке, снятая фиксированной камерой в ракурсе три четверти: с палитрой из 64 цветов, упорядоченным дизерингом, контурной обводкой и анимированными фигурками игрушечного масштаба. В центре репозитория — SKILL.md, единый автономный файл с описанием рабочего процесса, который начинается с исследования, визуальных и анимационных стандартов, пайплайна и процесса QA.
diorama можно использовать бесплатно? Какая у него лицензия?
diorama распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
diorama всё ещё поддерживается?
Активно поддерживается. Последний коммит в diorama — 30 окт. 2026 г..
Для чего можно использовать diorama?
Создание небольших анимированных диорам в пиксель-арт стиле или игровых сцен на Three.js. Подготовка детерминированных рендеров для сравнения кадров при регрессионном тестировании. Использование AI-агента для написания кода по структурированному процессу создания 3D-сцен — от исследования до сборки.
Как установить diorama?
Клонируйте репозиторий: git clone https://github.com/sloemo01/diorama.git "<target>" Перед сборкой прочитайте SKILL.md — полное руководство Скопируйте нужные модули из templates/ в свой проект
Где скачать diorama?
Исходный код и инструкции по установке — на GitHub: https://github.com/sloemo01/diorama

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

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

1,5 тыс.+370 за неделю179JavaScriptAGPL-3.0Активно поддерживаетсяОбновлён 22 часа назад

Открытый каталог интерактивных UI-компонентов на Three.js/WebGL без входа в систему, с интерактивными превью и полным исходным кодом на React.

7,1 тыс.+184 за неделю668HTMLMITАктивно поддерживаетсяОбновлён 2 месяца назад