Repolode
Enviar
sloemo01

sloemo01/diorama

Guía práctica y kit de código Three.js para crear pequeños dioramas de pixel art con cámara fija, ajuste a una paleta, dithering y control determinista de fotogramas.

Ver en GitHub
Estrellas
342
Forks
23
Issues abiertos
0
Último commit
hace 8 días

¿Qué es?

Diorama es una guía práctica y un kit de código listo para copiar e integrar, pensado para crear pequeñas escenas escenificadas de pixel art en Three.js. Aquí, un diorama es una escena diminuta sobre una base, capturada desde una cámara fija en tres cuartos, con una paleta de 64 colores, dithering ordenado, contornos entintados y figuras animadas a escala de juguete. El repositorio gira en torno a SKILL.md, un único archivo independiente que cubre el flujo de trabajo de construcción con investigación previa, los estándares visuales y de animación, el pipeline y el proceso de QA.

La escena es una función pura del tiempo, por lo que cualquier fotograma se puede congelar, capturar y comparar. Las plantillas incluyen módulos para la paleta, el paso de postprocesamiento, la cámara, la iluminación, la geometría, los rigs, el movimiento de vehículos, las rutas, el combate, el agua y los efectos, además de una hoja DESIGN.md y registros de fuentes y licencias para los recursos importados.

La carpeta verify/ contiene ejemplos resueltos, y templates/qa/ incluye ocho scripts basados en Playwright que comprueban fotogramas congelados, secuencias de movimiento y series de fotogramas por entidad. Los scripts de QA requieren Node con three, esbuild y playwright-core.

Funciones clave

  • 01Cámara fija en tres cuartos, ajustada a los límites de la escena y sin controles de órbita.
  • 02Ajuste a una paleta de 64 colores, dithering ordenado y contorno entintado aplicados en un paso fijo de postprocesamiento.
  • 03Escenas deterministas en las que se puede congelar y comparar cualquier fotograma.
  • 04Módulos listos para copiar e integrar de cámara, iluminación, rigs, vehículos, agua, combate y efectos.
  • 05Scripts de QA basados en Playwright para comprobar fotogramas congelados, secuencias de movimiento y resultados por fotograma y entidad.

Casos de uso

  • Crear pequeños dioramas animados de pixel art o escenas de arte para videojuegos en Three.js.
  • Generar renders deterministas cuyos fotogramas se puedan comparar para detectar regresiones.
  • Usar un agente de programación con IA para seguir un flujo de trabajo estructurado, desde la investigación hasta la construcción de escenas 3D.

Inicio rápido

  1. 1

    Clona el repositorio

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

    Lee SKILL.md, el playbook completo, antes de compilar

  3. 3

    Copia los módulos que necesites de templates/ a tu proyecto

Antes de usarlo

  • Los scripts de QA necesitan Node con three, esbuild y playwright-core instalados.
  • El proceso de instalación está pensado para un agente de IA que pueda ejecutar comandos de shell.

Temas

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

Preguntas frecuentes

¿Qué es diorama?
Guía práctica y kit de código Three.js para crear pequeños dioramas de pixel art con cámara fija, ajuste a una paleta, dithering y control determinista de fotogramas. Diorama es una guía práctica y un kit de código listo para copiar e integrar, pensado para crear pequeñas escenas escenificadas de pixel art en Three.js. Aquí, un diorama es una escena diminuta sobre una base, capturada desde una cámara fija en tres cuartos, con una paleta de 64 colores, dithering ordenado, contornos entintados y figuras animadas a escala de juguete. El repositorio gira en torno a SKILL.md, un único archivo independiente que cubre el flujo de trabajo de construcción con investigación previa, los estándares visuales y de animación, el pipeline y el proceso de QA.
¿diorama es gratuito? ¿Qué licencia tiene?
diorama es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿diorama sigue mantenido?
Mantenimiento activo. El último commit de diorama fue el 30 oct 2026.
¿Para qué puedo usar diorama?
Crear pequeños dioramas animados de pixel art o escenas de arte para videojuegos en Three.js. Generar renders deterministas cuyos fotogramas se puedan comparar para detectar regresiones. Usar un agente de programación con IA para seguir un flujo de trabajo estructurado, desde la investigación hasta la construcción de escenas 3D.
¿Cómo se instala diorama?
Clona el repositorio: git clone https://github.com/sloemo01/diorama.git "<target>" Lee SKILL.md, el playbook completo, antes de compilar Copia los módulos que necesites de templates/ a tu proyecto
¿Dónde consigo diorama?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/sloemo01/diorama

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados