Repolode
sloemo01

sloemo01/diorama

고정 카메라, 팔레트 스냅, 디더링, 결정론적 프레임 QA를 적용해 작은 픽셀 아트 디오라마를 만드는 플레이북이자 Three.js 코드 키트입니다.

스타
339
포크
22
열린 이슈
0
마지막 커밋
7일 전

어떤 프로젝트인가요?

Diorama는 Three.js로 작은 픽셀 아트 연출 장면을 만들기 위한 플레이북이자 복사해 넣어 쓸 수 있는 코드 키트입니다. 여기서 디오라마는 얇은 받침대 위에 꾸민 작은 장면으로, 고정된 3/4 카메라로 촬영하고 64색 팔레트, ordered dither, 잉크 윤곽선, 장난감 크기의 애니메이션 캐릭터를 적용합니다. 저장소의 핵심은 단일 독립 실행형 파일인 SKILL.md로, 조사부터 시작하는 제작 워크플로, 비주얼 및 애니메이션 기준, 파이프라인, QA 절차를 다룹니다.

장면은 시간만을 입력으로 받는 순수 함수이므로 어떤 프레임이든 고정해 캡처하고 비교할 수 있습니다. 템플릿에는 팔레트, 후처리 패스, 카메라, 조명, 지오메트리, 리그, 차량 이동, 경로, 전투, 물, 효과를 위한 모듈과 DESIGN.md 시트, 가져온 에셋의 출처 및 라이선스 로그가 포함됩니다.

verify/ 폴더에는 작성된 예제가 있고, templates/qa/에는 고정 프레임, 모션 스트립, 엔티티별 프레임 시리즈를 검사하는 Playwright 기반 스크립트 8개가 있습니다. QA 스크립트를 실행하려면 three, esbuild, playwright-core가 설치된 Node가 필요합니다.

핵심 기능

  • 01장면 경계에 맞춰 구도를 잡는 고정 3/4 카메라를 제공하며, 오빗 컨트롤은 없습니다.
  • 02고정된 후처리 패스에서 64색 팔레트 스냅, ordered dither, 잉크 윤곽선을 적용합니다.
  • 03어떤 프레임이든 고정하고 비교할 수 있는 결정론적 장면을 제공합니다.
  • 04카메라, 조명, 리그, 차량, 물, 전투, 효과용 모듈을 복사해 사용할 수 있습니다.
  • 05고정 프레임, 모션 스트립, 엔티티별 프레임 판정을 검사하는 Playwright 기반 QA 스크립트를 제공합니다.

활용 사례

  • Three.js로 작은 애니메이션 픽셀 아트 디오라마나 게임 아트 장면 만들기.
  • 회귀 검사를 위해 프레임 단위로 비교할 수 있는 결정론적 렌더링 생성하기.
  • AI 코딩 에이전트가 구조화된 조사부터 제작까지의 워크플로에 따라 3D 장면을 만들도록 하기.

빠른 시작

  1. 1

    저장소를 클론합니다

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

    빌드하기 전에 전체 플레이북인 SKILL.md를 읽습니다

  3. 3

    필요한 모듈을 templates/에서 프로젝트로 복사합니다

사용 전 알아둘 점

  • QA 스크립트를 실행하려면 three, esbuild, playwright-core가 설치된 Node가 필요합니다.
  • 이 설치 과정은 셸 명령을 실행할 수 있는 AI 에이전트를 대상으로 작성되었습니다.

토픽

자주 묻는 질문

diorama은(는) 무엇인가요?
고정 카메라, 팔레트 스냅, 디더링, 결정론적 프레임 QA를 적용해 작은 픽셀 아트 디오라마를 만드는 플레이북이자 Three.js 코드 키트입니다. Diorama는 Three.js로 작은 픽셀 아트 연출 장면을 만들기 위한 플레이북이자 복사해 넣어 쓸 수 있는 코드 키트입니다. 여기서 디오라마는 얇은 받침대 위에 꾸민 작은 장면으로, 고정된 3/4 카메라로 촬영하고 64색 팔레트, ordered dither, 잉크 윤곽선, 장난감 크기의 애니메이션 캐릭터를 적용합니다. 저장소의 핵심은 단일 독립 실행형 파일인 SKILL.md로, 조사부터 시작하는 제작 워크플로, 비주얼 및 애니메이션 기준, 파이프라인, QA 절차를 다룹니다.
diorama은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
diorama은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
diorama은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. diorama의 마지막 커밋은 2026년 10월 30일입니다.
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를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트