사진 같은 실내 장면 (총론)
이 스킬은 여러 하위 스킬을 하나의 워크플로우로 연결하고, 바로 실행 가능한 프로젝트 템플릿을 제공합니다. 방법은 room-at-dawn(MIT)에서 가져왔습니다. 새벽 침실로, 전적으로 코드로 생성되어 브라우저에서 실행됩니다. 원본 프로젝트의 규모는 대략 다음과 같습니다:
- 183만 개의 삼각형, 로딩 약 7초(RTX 4090).
- 베이킹된 조명 파일 gi.bin 약 13MB, 베이킹 한 번에 약 30분.
- 비디오는 4K HDR10.
각 단계에 사용할 스킬
| 단계 | 스킬 | 무엇을 납품하는가 |
|---|---|---|
| 0 | 3d-spec-prompt | 아이디어를 검증 가능한 사양으로 작성: 분위기, 시간, 척도, 주요 객체, 카메라 |
| 1 크기와 외피 | 이 스킬의 template/src/layout.js, parts/room.js | 실제 크기(미터), 창문, 벽 두께, 외피 |
| 2 주요 객체 | threejs-procedural-cloth(이불, 담요, 커튼), threejs-procedural-vegetation(창밖 나무), threejs-procedural-pothos(실내 식물) | 시선이 가는 객체 |
| 2b 하늘과 창밖 | threejs-sky-backdrop(하늘 프리셋, 구름, 창밖 잔디, 집, 먼 나무 벽, 보이는 것만 생성) | 동일한 하늘을 베이킹과 화면 모두에 제공 |
| 3 재질 | threejs-procedural-textures | 벽, 바닥, 나무, 직물, 사용 흔적, 책 표지 |
| 4 소품 | threejs-lived-in-props | 의자에 걸린 천, 컵, 주전자, 양말, 전선, 종이 뭉치 |
| 5 조명 | threejs-baked-gi | 하늘 빛과 태양 반사광을 꼭짓점에 베이킹하여 gi.bin에 저장; 태양 직사광은 실시간 조명 사용 |
| 6 화면 | threejs-realtime-post | AO, bloom, 창밖과 실내 별도 노출, 색보정 |
| 7 검증, 녹화 | webgl-deterministic-recording | 스크린샷 회귀, 프레임별 렌더링, 영화 출력(피사계 심도, 모션 블러, HDR10) |
새 프로젝트 만들기
bash <skill 폴더>/scripts/new-project.sh ~/git_project/my-room
cd ~/git_project/my-room && python3 -m http.server 5430 --bind 127.0.0.1
# http://127.0.0.1:5430/ 이미 베이킹된 bake/gi.bin이 포함됨
# http://127.0.0.1:5430/?bake=128 장면을 변경한 후 다시 베이킹하고, "gi.bin 다운로드"를 클릭하여 bake/에 저장
(<skill 폴더>는 이 스킬을 로드할 때 표시되는 기본 디렉토리입니다. 플러그인으로 설치된 경우 ~/.claude/plugins/cache/ 아래에 있습니다.)
- 이 스크립트는 템플릿을 복사하고, 각 하위 스킬의 라이브러리를
src/lib/(gi, post, props, textures, cloth, vegetation, pothos, sky, film)에 복사합니다. 프로젝트는 이후 독립적으로 작동합니다. - 번들러가 필요 없으며 npm도 필요하지 않습니다. three와 three-mesh-bvh는 jsdelivr에서 로드됩니다.
- URL 매개변수:
?cam=: 카메라 (room, desk, window, corner, view－창가에 서서 밖을 봄).?t=: 시간 고정 (나뭇잎, 구름이 움직이지 않음, 스크린샷용).?view=gi: 조명만 보기.?only=furniture: 특정 부품만 생성.?exp=: 노출.
- 페이지는
window.__ready,window.__stats,window.__camera를 제공하며,webgl-deterministic-recording도구에 직접 연결할 수 있습니다. - 조작: 드래그하여 시점 회전; WASD/방향키로 이동(Shift 느린 걸음, 벽과 가구 충돌); 화면 클릭 시 마우스로 직접 고개 돌리기로 전환, 시선 높이 1.6m(Esc 종료). 궤도 모드의 카메라와 시점은 방 안으로 제한되어 있으며, 확대/축소와 평행 이동 시 벽을 뚫고 나가지 않습니다.
템플릿 구조:
| 파일 | 내용 |
|---|---|
src/layout.js | 유일하게 크기, 태양, 하늘(SKIES 프리셋), 창밖 구성(OUTSIDE), 색보정, 카메라, 통과 불가 가구 범위(BLOCKERS)를 설정하는 곳 |
src/materials.js | lit()(GI 패치, 기존 셰이더 패치 유지, 알베도 기록), solid(), tbox(), tplane(), metres() |
src/scene.js | order에 따라 각 부품을 생성, 순서 고정 |
src/parts/room.js | 바닥, 천장, 네 벽, 창문 구멍과 창턱, 검은 외피, 벽 심 |
src/parts/outside.js | 창밖: 하늘 구체, 잔디, 자갈길, 울타리, 집, 먼 나무 벽, 주요 나무와 중원경 나무(보이는 것만 생성, threejs-sky-backdrop + threejs-procedural-vegetation). 모두 gi = false, 베이킹 조명 차단 안 함 |
src/parts/furniture.js | 테이블, 의자, 의자에 걸린 수건(PBD), 컵, 주전자, 탁자 위 책, 책장 위 책 |
src/main.js | 장면 생성 → 베이킹, 파일 읽기 또는 플랫 라이트 → 태양 → 반사 → 후처리 → 카메라(궤도 + 이동, 방 안으로 제한) |
크로스 스킬 규칙 (반드시 지켜야 함)
- 단위는 미터, 좌표 고정. X는 창문 벽을 따라, Z는 실내로(창문 벽은 z = 0, z < 0은 실외), Y는 위로. 모든 크기는
layout.js에만 작성. - 결정성. 난수는 항상
RNG(seed)사용. 부품의 순서, 이름, 꼭짓점 수 중 하나라도 변경되면 해당 메시의 베이킹이 무효화됨;applyBake가 stale을 보고함. - 조명은 꼭짓점에 존재하므로 세분화 필요. 물체가 놓인 표면은 1.5–2 cm, 넓은 면적은 4–8 cm로 분할.
tbox/tplane사용. - 조명을 받는 모든 재질은
lit()을 통과해야 함.giPatch가onBeforeCompile을 직접 대체하고,lit()은 기존 패치(벽면 변화wallPatch, 직물 역광, 바람)를 뒤에 연결함. 텍스처가 있는 재질은albedo를 제공해야 함(텍스처의avg), 반사광 색상이 정확해짐. - 태양 분업: 직사광은
DirectionalLight(강도는 베이킹 설정의sun.irr과 동일)를 사용하고, 반사광은 파일에 베이킹함. 환경광이나 반구광을 추가하지 마십시오. - 벽은 단단한 벽 심을 가져야 하며, 벽 심의
shadowSide는FrontSide로 설정. 이것이 없으면 태양이 벽 바닥과 모서리에 일렬로 밝은 점을 누출함(실제 경험 있음; 자세한 내용은references/integration.md참조). - 노출은 실내에 맞춤. 실내는 실외의 약 1/20:
exposure약 4.5, 창밖은ext약 0.3으로 어둡게 처리. - 반사는 베이킹 후에 캡처.
captureEnv는applyBake/runBake이후에 실행, 프로브는 방 중앙에 배치. - 창밖 원경이 있을 때, 카메라 far는 가장 먼 객체보다 커야 함. 템플릿은 400m(나무 벽이 100m, 잔디가 260m까지 확장). far가 100에 불과하면 원경이 잘린 부분에 흰색 수평선 안개 띠가 나타나고 시점에 따라 움직임(실제 경험 있음).
- 태양 그림자 카메라는 창밖 나무 캐노피를 포함해야 함, 나무 그늘이 안으로 들어오도록: 템플릿은 태양을 30m 밖에 배치, near 12, far 40.
실제 측정 (템플릿, RTX 4090, Chrome headless, 1280×800)
- 장면 생성 1.2초, 이 중 수건 걸기 약 0.65초; 10.7만 개 삼각형; 페이지 열기부터 화면 출력까지 약 1.6초.
- 현장 베이킹 128 spp: 61,407개 샘플 포인트, 26개 worker, 6초, gi.bin 743KB. 다시 로드 후 39개 메시에 적용, 0개 무효.
preview.jpg: 방, 책상 옆, 창문, 조명만 보기.preview-bake.jpg: 왼쪽은 플랫 라이트, 오른쪽은 베이킹 후.
추가 정보
references/workflow.md: 각 단계의 절차, 결정 사항, 납품물 및 체크포인트.references/integration.md: 각 스킬 간 인터페이스, 주의 사항, 겪었던 문제.references/checklist.md: 검증 체크리스트 및 숫자 참조 범위.