Repolode
Enviar
sloemo01

sloemo01/diorama

Playbook e kit de código Three.js para criar pequenos dioramas em pixel art com câmera fixa, paleta reduzida, dithering e QA determinístico por frame.

Ver no GitHub
Estrelas
342
Forks
23
Issues abertas
0
Último commit
há 7 dias

O que é?

Diorama é um playbook e kit de código pronto para copiar, voltado à criação de pequenas cenas encenadas em pixel art com Three.js. Aqui, um diorama é uma cena minúscula sobre uma base, capturada por uma câmera fixa em três quartos, com uma paleta de 64 cores, dithering ordenado, contorno em tinta e figuras animadas em escala de brinquedo. O repositório se concentra no SKILL.md, um único arquivo autocontido que aborda o fluxo de criação com pesquisa como primeira etapa, os padrões visuais e de animação, o pipeline e o processo de QA.

A cena é uma função pura do tempo, então qualquer frame pode ser congelado, capturado e comparado. Os templates oferecem módulos para a paleta, o passe de pós-processamento, a câmera, a iluminação, a geometria, os rigs, o movimento de veículos, os caminhos, o combate, a água e os efeitos, além de uma folha DESIGN.md e registros de origem e licença dos assets importados.

A pasta verify/ contém exemplos práticos, e templates/qa/ reúne oito scripts executados com Playwright que verificam frames congelados, sequências de movimento e séries de frames por entidade. Os scripts de QA precisam de Node com three, esbuild e playwright-core.

Recursos principais

  • 01Câmera fixa em três quartos, ajustada aos limites da cena e sem controles de órbita.
  • 02Redução à paleta de 64 cores, dithering ordenado e contorno em tinta aplicados em um passe fixo de pós-processamento.
  • 03Cenas determinísticas em que qualquer frame pode ser congelado e comparado.
  • 04Módulos prontos para copiar para câmera, iluminação, rigs, veículos, água, combate e efeitos.
  • 05Scripts de QA com Playwright para verificar frames congelados, sequências de movimento e resultados de frames por entidade.

Casos de uso

  • Criar pequenos dioramas animados em pixel art ou cenas de game art com Three.js.
  • Gerar renders determinísticos cujos frames possam ser comparados para detectar regressões.
  • Usar um agente de programação com IA para seguir um fluxo estruturado de pesquisa à construção de cenas 3D.

Início rápido

  1. 1

    Clone o repositório

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

    Leia o SKILL.md, o playbook completo, antes de compilar

  3. 3

    Copie os módulos necessários de templates/ para o seu projeto

Antes de usar

  • Os scripts de QA precisam do Node com three, esbuild e playwright-core instalados.
  • O fluxo de instalação foi criado para um agente de IA capaz de executar comandos do shell.

Tópicos

#threejs#pixel-art#webgl#creative-coding#game-art#procedural-generation#3d-animation#diorama#pixelation#skill

Perguntas frequentes

O que é diorama?
Playbook e kit de código Three.js para criar pequenos dioramas em pixel art com câmera fixa, paleta reduzida, dithering e QA determinístico por frame. Diorama é um playbook e kit de código pronto para copiar, voltado à criação de pequenas cenas encenadas em pixel art com Three.js. Aqui, um diorama é uma cena minúscula sobre uma base, capturada por uma câmera fixa em três quartos, com uma paleta de 64 cores, dithering ordenado, contorno em tinta e figuras animadas em escala de brinquedo. O repositório se concentra no SKILL.md, um único arquivo autocontido que aborda o fluxo de criação com pesquisa como primeira etapa, os padrões visuais e de animação, o pipeline e o processo de QA.
diorama é gratuito? Qual é a licença?
diorama é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
diorama ainda é mantido?
Manutenção ativa. O último commit de diorama foi em 30 de out. de 2026.
Para que posso usar diorama?
Criar pequenos dioramas animados em pixel art ou cenas de game art com Three.js. Gerar renders determinísticos cujos frames possam ser comparados para detectar regressões. Usar um agente de programação com IA para seguir um fluxo estruturado de pesquisa à construção de cenas 3D.
Como instalar diorama?
Clone o repositório: git clone https://github.com/sloemo01/diorama.git "<target>" Leia o SKILL.md, o playbook completo, antes de compilar Copie os módulos necessários de templates/ para o seu projeto
Onde consigo diorama?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/sloemo01/diorama

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados