Teardown Cinema

Teardown Cinema은(는) 무엇을 하나요?

teardown과 동일한 엔진(three.js 코드, 하나의 클록, 프레임별 캡처, 코드로 만든 음악)을 사용하지만 목적은 반대입니다. teardown은 설명하므로 패널이 있습니다. Cinema는 보여주므로 화면에 세계 외에는 아무것도 없습니다. 작동 예시: example/orison 디렉토리(30초 영화 Orison과 인터랙티브 페이지).

이 스킬 옆에 teardown 스킬이 필요합니다(node_modules(three, esbuild, playwright), sims/capture.mjs, sfx/ 용). 캡처는 Playwright 자체 Chromium이 필요 없습니다. CHROMIUM을 설치된 Chrome으로 설정하세요. 다운로드가 멈추면 Chrome이 작동합니다.

순서대로 방법

1. 하나의 마스터 이미지. 강력한 이미지 모델로 복잡한 그림을 생성합니다. Codex 앱 사용 시: codex exec --skip-git-repo-check -s workspace-write -C <dir> - < prompt.txt. 프롬프트는 사용자의 머신을 떠나므로 기밀 콘텐츠는 포함하지 마십시오. 이름을 붙일 수 있는 구조(돔, 리브, 링, 리본)가 있는 것을 요청하세요. Codex는 어떤 이미지 모델을 사용했는지 보고하지 않습니다.
2. 마스터로부터 텍스처 플레이트 생성. -i master.png로 첨부하고 평평하고 정면이며 균일한 조명의 플레이트를 생성합니다: 유리 패널, 순수 검정 위의 금속 트레이서리, 실크, 검정 위의 행성, 링 단면, 위에서 본 생명체. 검정은 잘라내는 부분입니다. 이 플레이트들이 결과물에 그림의 디테일이 유지되는 이유입니다. 한 번에 하나씩 생성하세요.
3. 마스터 측정 후 재구성. 이미지에서 픽셀 단위로 비율을 읽고 지오메트리를 작성하기 전에 월드 유닛으로 변환하세요. 초기 실수의 거의 대부분은 측정하지 않은 비율 때문이었습니다.
4. 하나의 입력이 몸체를 구동. 생명체나 기계의 박자를 선택하고 JS와 GLSL로 작성한 후 버텍스 셰이더에서 모든 부분을 포즈하세요. 키프레임은 없습니다. shared/kin.js, shared/glsl.js 참조.
5. 플라이스루가 아닌 쇼트. 쇼트 리스트, 각 쇼트는 내부 시간의 순수 함수이며 하드 컷과 쇼트별 그레이딩이 있습니다. 컷이 영화를 만듭니다. orison-film/shots.js 참조.
6. 매 패스마다 마스터와 비교. 히어로 프레임을 이미지 옆에 렌더링하고 차이점을 기록합니다. 수정하고 반복합니다.
7. 동일한 타임라인에서 코드로 음악 제작 teardown의 sfx/ 사용. score.py 참조.
8. 페이지는 동일한 세계이지만 다른 카메라 조작. 스크롤은 하나의 경로 위의 한 점을 선택하고, 클릭은 박자, 드래그는 시점 회전입니다. orison-live/ 참조.

레이아웃

my-film/
  brief/            마스터 이미지와 프롬프트
  assets/           플레이트, .jpg 형식 (페이지에 인라인됨)
  shared/           세계: kin.js, glsl.js, sky.js, creature.js, world.js
  my-film-film/     main.js, shots.js, timeline.json
  my-film-live/     main.js, path.js, audio.js, body.html, style.css
  score.py

명령어

영화 폴더에서 실행하세요. SKILL_DIR은 이 스킬, T는 형제 스킬 teardown입니다. Windows PowerShell 5.1에서는 npx.cmd, npm.cmd를 사용하고 &&는 사용하지 마세요.

node "$SKILL_DIR/build.mjs" ./my-film-film ./my-film-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe"    # 캡처는 설치된 Chrome 사용 가능

# 한 프레임 또는 시트, 선택한 품질: --config는 {"samples": N}을 가리킴
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png

# 전체 영화
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --fps 24 --crf 15 --config s.json --out silent.mp4
python "$T/run_sfx.py" score.py
ffmpeg -i silent.mp4 -i teardown-out/my-score.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4

--stills는 팔레트를 통해 타일링하므로 시트에는 거짓 밴딩이 나타납니다. 색상과 밴딩은 그 옆의 전체 프레임에서 평가하세요.

kit/cinema.js가 제공하는 것

new Cinema({canvas, samples, fps, shutter, msaa}) 후 cine.frame(t, draw, look).

영화 프레임은 N개의 서브 프레임 평균입니다. 각 서브 프레임은 셔터 내 시간(실제 모션 블러), 렌즈 디스크 위의 카메라(초점 평면 고정, 실제 피사계 심도, 투명 레이어 통과), 서브 픽셀 오프셋(안티앨리어싱)을 이동시킵니다. 디더링된 레이 마칭도 수렴합니다. 포스트 처리는 평균화된 HDR 이미지에 대해 한 번 실행됩니다: 블룸, 아나모픽 스트릭, 한 점을 향한 광선, ACES, 그레이딩, 그레인, 비네트. samples: 1은 라이브 페이지용 동일한 파이프라인입니다.

통합 Radeon 780M이 탑재된 노트북에서 1920x1080 해상도 결과: 프레임당 32샘플은 인코딩 포함 2.3초 소요: 30초 영화(24fps)에 27분. 960x480에서 4샘플 드래프트는 전체 영화에 41초 소요되므로 드래프트를 자유롭게 사용하세요. 라이브 페이지는 1600x900에서 전체 스크롤 구간 동안 37~51fps, 다른 작업이 없는 상태에서 특정 지점에서는 더 높았습니다. 캡처 출력에서 gpu:를 확인하세요. 소프트웨어 렌더러는 GPU 플래그가 적용되지 않았다는 뜻입니다.

성공 여부를 결정한 규칙

• 프레임에 텍스트 없음. 레이블, 숫자, 타이틀 카드, 캡션 없음. 그림이 모든 것을 전달합니다.
• 정확히 하나의 three.js만 번들. build.mjs가 강제합니다. 영화 근처에 두 번째 복사본(프로젝트 자체 node_modules)이 있으면 조용히 실패합니다: 반사 환경이 블러 레벨을 잃고 금속이 어두워집니다.
• 렌더를 동일한 크기의 마스터 옆에 놓고 차이점을 나열하세요. 비율 먼저, 그다음 색상. 픽셀 단위로 위치를 측정하고 방향으로 변환합니다. Orison의 유사성 대부분은 이러한 패스에서 나왔습니다.
• 피사계 심도는 작은 물체에만 얕게 유지. 거대한 물체에 강한 블러를 주면 미니어처처럼 보입니다. 영화의 렌즈 반경은 26유닛 생명체에 대해 0.012~0.03 유닛입니다.
• 시간과 렌즈 샘플은 시퀀스를 공유하지 않아야 함. 공유하면 블러가 보이는 호를 그립니다. 렌즈에는 황금각, 시간에는 Halton 베이스 5를 사용하세요.
• 음수가 될 수 있는 값에 pow()를 사용하지 마세요. D3D는 NaN을 반환하고 NaN 픽셀 하나가 블룸을 통해 검은 직사각형으로 퍼집니다. x*x를 사용하세요. 1.-ndv 대신 max(1.-ndv,0.). 키트도 입력을 살균합니다.
• a > b인 역방향 smoothstep(a, b, x)는 Windows에서 0을 반환합니다. 1.-smoothstep(b,a,x)를 사용하세요.
• 좁아지는 표면에 미러링된 플레이트: Mercator로 매핑하여 셀이 둥글게 유지되고 플레이트의 큰 셀만 미러링합니다. 작은 셀은 가까이서 반짝이처럼 변합니다.
• 광선과 일직선상의 패널은 더 밝지 않고 더 선명해야 함. 그렇지 않으면 유리체 내부의 물체가 읽히지 않습니다.
• 어두운 구멍에는 살아있는 무언가가 필요함. 희미한 빛이 안개를 통해 첫 박자까지 전달합니다.
• 라이브 구름: 절반 해상도에 실행 평균 사용; 카메라 근처에서 더 조밀하게 마칭. 구름은 부드럽기 때문에 손실되는 것이 없습니다.
• 라이브 페이지의 첫 1초는 셰이더 컴파일 시간. 첫 프레임 전에 컴파일하고 그동안 작은 펄스를 표시하며 로딩 텍스트는 표시하지 않습니다.

라이브 페이지 규칙

teardown의 라이브 규칙(품질 계층, 셰이더 워밍업)이 모두 적용됩니다. 또한: 마스터 이미지로 열리고 셰이더가 준비되면 3D로 전환; 품질 계층은 프레임이 회복될 때만 다시 올라가고 내려갈 뿐; 페이지에 레이블 없음; 캔버스와 모든 버튼에 접근 가능한 이름; 최소 44px 클릭 대상; 사운드는 첫 번째 제스처 후에만 시작; 바디는 무한히 올라가지 않고 박자 후에 안정됨; 품질은 묻지 않고 측정된 프레임 레이트에 따라 단계적으로 낮아짐.

리뷰

비디오는 볼 수 없지만 프레임은 읽을 수 있습니다. 먼저 모든 쇼트의 시트, 시트에서 표시한 부분에 대해 전체 프레임, 그다음 전환 구간에 걸쳐 --stills every:0.2 --from A --to B. 최종 인코딩의 초당 1프레임 시트를 읽으세요: 인코더가 작성한 내용을 보여줍니다. ffmpeg -af ebur128=peak=true로 음악을 측정하세요. 사람이 여전히 영화를 보고 음악을 한 번 들어야 합니다. 보고할 때 그렇게 말하세요.

자체 문서 구조(예: Claude Artifact)를 추가하는 호스트의 경우 FRAGMENT=1로 빌드하고 PAGE_TITLE로 이름을 설정하세요. <name>.fragment.html도 작성합니다.