Video 3D Studio

각 샷을 코드로 빌드하고, 스틸 프레임을 확인한 후, 사용자 컴퓨터에서 MP4로 렌더링합니다. 사용자와 그들의 언어로 평이하게 대화하세요. 이 기능을 요청하는 많은 사람들은 코드를 작성해 본 적이 없습니다.

1. 프로젝트 준비

먼저 기존 프로젝트가 있는지 확인하세요: tools/render.mjs와 src/kit/ 폴더가 있는 디렉토리입니다. 있다면 새 씬을 추가하세요.

그렇지 않으면 node --version (18 이상)을 확인한 후, 사용자의 현재 폴더에 샷 이름으로 프로젝트를 생성하세요:

node <this-skill-folder>/scripts/new-project.mjs video-<subject>

사용자에게 이 작업이 2~3분 정도 걸리고 약 1GB의 디스크 공간이 필요하며, 첫 번째 렌더링 시 130MB 헤드리스 브라우저도 다운로드된다고 알려주세요. 이후 모든 명령은 프로젝트 폴더 내에서 실행됩니다.

2. 샷 확정

포맷, 길이, 주제, 분위기, 색상, 정확한 문구, 로고나 모델 파일을 파악하세요. 결과를 바꾸고 합리적인 기본값이 없는 항목에 대해서만 질문하세요. 기본값: 소셜 미디어는 9:16, 그 외는 16:9, 5~8초, 30fps.

빌드하기 전에 간단한 계획을 작성하세요. 여러 아이디어가 섞인 샷보다 하나의 명확한 아이디어가 있는 샷이 더 보기 좋습니다:

주제: 시청자가 봐야 할 한 가지
카메라: 렌즈와 하나의 움직임
조명: 어디에서 오며 무엇을 드러내는지
비트: 주요 동작이 발생하는 순간(초 단위)

사용자가 제공하는 파일은 프로젝트의 public/ 폴더에 넣으세요.

3. 가장 가까운 씬에서 시작

요청이 주로 관련된 것	시작할 파일	설정 항목
하나의 물체 또는 제품	`src/scenes/ProductOrbit.tsx`	`modelFile`, `color`, `backdrop`
단어 또는 짧은 제목	`src/scenes/KineticTitle.tsx`	`text`, `fontFile`, `color`, `backdrop`
로고	`src/scenes/LogoReveal.tsx`	`logoFile`, `tagline`, `color`, `glow`, `backdrop`
방, 장소 또는 분위기	`src/scenes/MorningRoom.tsx`	`wall`, `accent`
추상적, 액체 또는 셰이더 기반	`src/scenes/LiquidForm.tsx`	`look`

요청이 해당 설정만 변경하는 경우 --set으로 전달하고 코드는 그대로 두세요. 그렇지 않으면 씬을 새 파일로 복사하고 src/Root.tsx에 등록한 후 복사본을 수정하여 예제들이 참조로 계속 사용 가능하도록 유지하세요.

씬 코드를 작성하기 전에 references/toolkit.md를 읽어 키트가 제공하는 내용을 확인하세요. 렌즈, 조명, 재질 및 타이밍에 대한 결정은 references/craft.md를 참조하세요.

모델 파일이 없으면 키트의 요소로 객체를 빌드하세요: 원형은 useLathe, 상자형은 useRoundedBox, 평평한 실루엣은 useExtrudedSvg를 그룹화하여 사용하세요. 이음새, 링, 그립 홈, 인쇄된 텍스트 및 약간 둥근 모서리와 같은 작은 디테일이 단순한 모델을 그럴듯하게 만드므로, 모든 객체에 몇 가지 디테일과 키트의 표면 맵을 추가하세요. 매끄러운 형태에 단색을 사용하면 항상 임시 자리 표시자처럼 보입니다.

렌더링을 올바르게 유지하는 방법

Remotion은 프레임을 순서 없이 여러 브라우저 탭에서 동시에 렌더링하므로, 한 프레임이 이전 프레임에 의존할 수 없습니다:

변경되는 모든 것은 useShot()으로 계산하세요. useState, useFrame 애니메이션, Math.random() 및 Date는 깜빡임이나 점프를 유발하므로, 난수성에는 wobble과 scatter를 사용하세요.
public/에서만 usePublicFile 또는 그 위에 구축된 훅을 통해 로드하세요. 렌더링은 네트워크에 의존해서는 안 됩니다.
3D는 <Stage> 안에 유지하세요. Stage가 렌더 파이프라인을 소유하므로, 다른 곳에 두 번째 렌더 루프를 추가하거나 톤 매핑을 설정하지 마세요.
모든 프레임은 여러 번 그려지고 평균화되며, 이를 통해 부드러운 그림자, 실제 초점 흐림 및 깨끗한 가장자리가 생성됩니다. 프레임 내에서 흐려져야 하는 것은 useEachSample에 넣으세요.
작은 텍스트는 LogoReveal이 하는 것처럼 <Stage> 위에 일반 AbsoluteFill에 넣으세요. 작은 크기에서는 3D 텍스트보다 선명하게 유지됩니다.

4. 렌더링 전 스틸 확인

npm run check
node tools/stills.mjs <Shot> --set format=vertical --count 5

명령이 나열한 모든 이미지를 열어서 확인하세요. 비디오를 볼 수 없으므로 스틸이 샷을 확인하는 방법입니다. 움직임을 평가하려면 비트 주변의 프레임을 가깝게 요청하세요(예: --frames 20,24,28,32).

다음 사항을 확인하세요:

주제가 첫 프레임, 마지막 프레임 및 움직임의 중간에서 프레임 안에 있고 가장자리에서 벗어나 있는지.
9:16에서 중요한 내용이 상단 14% 또는 하단 20%에 있지 않은지 (휴대폰 앱이 버튼을 배치하는 영역).
하이라이트가 디테일을 유지하고 화면이 바래거나 뿌옇지 않은지.
텍스트가 올바르게 철자되었고 모든 글자가 읽을 수 있어야 할 때까지 나타났는지.
아무것도 떠 있거나 다른 물체를 뚫고 나오거나 눈에 띄는 계단 현상이 있는 그림자를 드리우지 않는지.

문제가 있을 때는 한 가지를 변경하고 다시 확인하여 무엇이 해결했는지 알 수 있도록 하세요. references/troubleshooting.md에 일반적인 증상과 해결책이 나열되어 있습니다.

그런 다음 동일한 --set 값을 사용하여 모든 프레임에서 깜빡임과 점프를 스캔하세요:

node tools/check-motion.mjs <Shot> --set format=vertical

스틸은 몇 순간만 샘플링하므로 몇 프레임 동안 지속되는 깜빡임이 그 사이에 숨을 수 있습니다. 평평한 반짝이는 표면이 일반적인 원인인데, 밝은 빛을 한 번에 반사할 수 있기 때문입니다. 명령이 CHECK를 보고하면 지명된 프레임을 확인하고 의도적인 컷과 같은 갑작스러운 변화가 아니라면 렌더링하기 전에 수정하세요.

5. 렌더링

node tools/render.mjs <Shot> --set format=vertical --out out/<name>.mp4

반해상도 테스트에는 --quality draft를 사용하세요. 전체 품질에서 5~~8초 샷은 데스크톱 그래픽 카드에서 36~~88초가 소요되었습니다. 그래픽 카드가 없으면 도구가 프레임당 4패스로 떨어지며, 훨씬 거칠고 훨씬 느리므로 사용자에게 알리고 긴 렌더링은 백그라운드에서 실행하세요.

사용자에게 MP4 경로, 포맷 및 길이, 소요 시간을 알려주세요. 스틸과 프레임 간 변화를 확인했으며 비디오 재생을 보지 않았다는 점을 명확히 하세요.

6. 피드백 처리

사용자가 요청한 것을 정확히 적용하고 다른 모든 것은 그대로 두세요. 예를 들어 "더 따뜻한 조명"이라는 메모가 프레이밍을 변경하지 않도록 하세요. 스틸을 다시 확인한 후 재렌더링하세요.

미리 공개해야 할 한계

진정한 모션 블러가 없으므로 매우 빠른 움직임은 계단처럼 보일 수 있습니다. 움직임을 적당히 유지하거나 --set fps=60을 시도해 보세요.
조명은 완전한 레이 트레이싱이 아닙니다. 그림자와 하늘 폐색은 부드럽고 정확하지만, 빛이 자체적으로 반사되지 않으므로 실내에는 추가 필 라이트가 필요합니다.
Remotion에는 자체 라이선스가 있습니다: 개인 및 3명 이하의 회사는 무료, 더 큰 회사는 remotion.dev에서 유료 라이선스가 필요합니다. 사용자가 회사를 위해 작업하는 것 같다면 이 점을 언급하세요.

3D 영상 스튜디오