Video 3D Studio
將每個鏡頭以程式碼建構、檢查其靜態影格，然後在使用者的機器上渲染為 MP4。以使用者的語言和直白的方式溝通。許多提出這類需求的人從未寫過程式。
1. 準備專案
先尋找現有專案：一個包含 tools/render.mjs 和 src/kit/ 的資料夾。如果找到，就在其中加入新場景。
否則檢查 node --version（需為 18 或更新版本），然後在使用者的當前資料夾中建立一個專案，以鏡頭主題命名：
node <此技能資料夾>/scripts/new-project.mjs video-<主題>
告知使用者這需要幾分鐘時間和大約 1 GB 的磁碟空間，而且第一次渲染還會下載一個 130 MB 的無頭瀏覽器。之後的所有指令都從專案資料夾內執行。
2. 確定鏡頭規格
確定格式、長度、主題、氛圍、色彩、確切文字，以及任何標誌或模型檔案。僅詢問那些會改變結果且沒有合理預設值的項目。預設值：社群媒體使用 9:16，其他情況使用 16:9，長度 5 到 8 秒，30 fps。
在開始建構前先為自己撰寫一個簡短計畫，因為一個清晰主題的鏡頭比多個主題的更好：
- 主體： 觀眾應注視的唯一事物
- 攝影機： 鏡頭和單一移動
- 燈光： 光源位置及其揭示的內容
- 節奏： 主要事件發生的時刻（以秒為單位）
使用者提供的檔案放在專案的 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或基於它建構的 Hook。渲染不得依賴網路。 - 將 3D 內容保持在
<Stage>內。它擁有渲染管線，因此不要添加第二個渲染迴圈或在別處設置色調映射。 - 每個影格會被多次繪製並平均，這就是軟陰影、真實焦距模糊和清晰邊緣的來源。任何應在影格內模糊的內容都應放在
useEachSample中。 - 將小文字放在
<Stage>上方的普通AbsoluteFill中，就像LogoReveal所做的那樣。這比小尺寸的 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/<名稱>.mp4
使用 --quality draft 進行半解析度測試。在全品質下，5 到 8 秒的鏡頭在桌上型顯示卡上需要 36 到 88 秒。如果沒有顯示卡，工具會降為每個影格 4 次繪製，這效果粗糙得多且速度仍然慢得多，因此請告知使用者，並在背景執行長時間的渲染。
提供使用者 MP4 的路徑、格式、長度以及渲染所花費的時間。明確表示你已檢查靜態影格和影格間的變化，但並未觀看影片播放。
6. 處理修改意見
完全按照使用者的要求應用修改，並保持其他一切不變，這樣像「光線更暖」這樣的意見就不會同時改變構圖。再次檢查靜態影格，然後重新渲染。
需事先說明的限制
- 沒有真正的動態模糊，因此非常快速的移動可能看起來有階梯感。請保持速度適中，或嘗試使用
--set fps=60。 - 光照並非完整的光線追蹤。陰影和天空遮擋是柔和且準確的，但光線不會自行反彈，因此室內場景需要添加補充光。
- Remotion 有其自己的授權：個人和最多 3 人的公司免費，而較大的公司需要從 remotion.dev 購買付費授權。如果使用者似乎為公司工作，請提及這一點。