Repolode
Submit
sloemo01

sloemo01/diorama

A playbook and Three.js code kit for building small pixel-art dioramas with a locked camera, palette snap, dithering and deterministic frame QA.

View on GitHub
Stars
342
Forks
23
Open issues
0
Last commit
8 days ago

What is it?

Diorama is a playbook and copy-in code kit for making small staged pixel-art scenes in Three.js. A diorama here is a tiny scene on a slab, shot from a locked three-quarter camera, with a 64-colour palette, ordered dither, an inked contour and toy-scale animated figures. The repository centres on SKILL.md, a single self-contained file that covers the research-first build workflow, the visual and animation standards, the pipeline, and the QA process.

The scene is a pure function of time, so any frame can be frozen, captured and compared. Templates provide modules for the palette, post-processing pass, camera, lighting, geometry, rigs, vehicle movement, paths, combat, water and effects, along with a DESIGN.md sheet and source and licence logs for imported assets.

The verify/ folder contains worked examples, and templates/qa/ holds eight Playwright-driven scripts that check frozen frames, motion strips and per-entity frame series. The QA scripts need Node with three, esbuild and playwright-core.

Key features

  • 01Locked three-quarter camera fitted to the scene bounds, with no orbit controls.
  • 0264-colour palette snap, ordered dither and ink contour applied in a fixed post pass.
  • 03Deterministic scenes where any frame can be frozen and compared.
  • 04Copy-in modules for camera, lighting, rigs, vehicles, water, combat and effects.
  • 05Playwright-based QA scripts for frozen frames, motion strips and per-entity frame verdicts.

Use cases

  • Building small animated pixel-art dioramas or game-art scenes in Three.js.
  • Creating deterministic renders that can be frame-compared for regression checks.
  • Using an AI coding agent to follow a structured research-to-build workflow for 3D scenes.

Quick start

  1. 1

    Clone the repository

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

    Read SKILL.md, the full playbook, before building

  3. 3

    Copy the modules you need from templates/ into your project

Things to know

  • The QA scripts need Node with three, esbuild and playwright-core installed.
  • The install flow is written for an AI agent that can run shell commands.

Topics

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

FAQ

What is diorama?
A playbook and Three.js code kit for building small pixel-art dioramas with a locked camera, palette snap, dithering and deterministic frame QA. Diorama is a playbook and copy-in code kit for making small staged pixel-art scenes in Three.js. A diorama here is a tiny scene on a slab, shot from a locked three-quarter camera, with a 64-colour palette, ordered dither, an inked contour and toy-scale animated figures. The repository centres on SKILL.md, a single self-contained file that covers the research-first build workflow, the visual and animation standards, the pipeline, and the QA process.
Is diorama free to use? What license does it have?
diorama is open source under the MIT license. Check the license terms before using it in commercial products.
Is diorama still maintained?
Actively maintained. The last commit to diorama was on Oct 30, 2026.
What can I use diorama for?
Building small animated pixel-art dioramas or game-art scenes in Three.js. Creating deterministic renders that can be frame-compared for regression checks. Using an AI coding agent to follow a structured research-to-build workflow for 3D scenes.
How do I install diorama?
Clone the repository: git clone https://github.com/sloemo01/diorama.git "<target>" Read SKILL.md, the full playbook, before building Copy the modules you need from templates/ into your project
Where can I get diorama?
The source code and installation instructions are on GitHub: https://github.com/sloemo01/diorama

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects