Remotion 渲染

Remotion 渲染 是做什麼的？

驅動渲染與迭代循環：將組合轉換為 MP4，接收自然語言反饋，進行滿足該反饋的最小幅度編輯，然後重新渲染。高成本的失敗模式是反向循環——為了一個複製調整而重寫整個場景檔案，或是為了每次檢查而重新進行全品質渲染——這會破壞已核准的工作以及讓 Remotion 值得被使用的迭代速度。

操作流程

步驟 1：收集輸入

• 組合 ID（src/Root.tsx 中 <Composition> 上的 id，不是檔案名稱）和進入點（呼叫 registerRoot 的檔案，通常是 src/index.ts）。
• 目標：平台/長寬比（橫向 16:9、直向 9:16、正方形）、解析度（預設 1080p；僅在要求時使用 4K），以及是否需要透明度。
• 機器核心數（用於並行度），以及這是一次渲染、一次迭代工作階段，還是一個批次。

步驟 2：基礎渲染

npx remotion render src/index.ts <CompositionId> out/video.mp4

預設輸出是使用組合自身寬度/高度/幀率的 H.264 MP4；Remotion 會視需要建立 out/ 目錄。

步驟 3：解析度、幀率和編解碼器預設

解析度和幀率位於 <Composition> 上（width/height/fps）——請在原始碼處更改它們。僅使用旗標進行縮放和容器：

# 1080p 橫向 - 組合設定為 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - 放大 1080p 畫布，不觸碰佈局
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 直向 - 渲染一個設定為 1080x1920 的組合
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

編解碼器規則：

• 社群/網路傳遞保持使用 H.264 MP4（預設）——相容性最佳。
• 透明度：--codec=vp8 或 vp9（WebM），或 --codec=prores 搭配 alpha 以用於編輯流程。H.264 無法承載 alpha 頻道。
• 真正的 60fps 意味著在組合上設定 fps={60} 並按比例縮放幀數——僅透過旗標更改 fps 會使所有以幀數計時的動畫不同步。

步驟 4：調整並行度

渲染是 CPU 密集型任務（每一幀都是一個無頭 Chrome 的螢幕截圖）。預設約為核心數的一半；明確調整是本機最簡單的加速方式：

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

從物理核心數開始（--concurrency=50% 接受百分比）；如果機器出現交換或熱節流則調降——超過甜蜜點後，更多 Chrome 分頁會使其變慢，而不是變快。

步驟 5：執行迭代優化循環

保持 Studio 開啟（npx remotion studio，http://localhost:3000），以便使用者即時預覽；保留完整渲染用於最終確認。

1. 使用者在 Studio 中預覽並以自然語言提供反饋。
2. 將其轉化為精準編輯——僅更改相關的值：
   • "太快了" → 擴大 interpolate 輸入範圍或提高 spring damping。
   • "Logo 應該更突出" → 降低 spring damping / 增加過衝。
   • "更改 CTA 文案" → 編輯 prop / defaultProps，不碰其他東西。
   • "不同的強調色" → 在顏色物件中更改一個十六進位碼。
   • "最後一個功能停留更久" → 增加該 <Sequence> 的 durationInFrames 並重新推導組合的總 durationInFrames。
3. 重新渲染，或讓 Studio 熱重載進行視覺檢查。

外科手術式編輯 vs. 重寫：當更改的內容是值、prop、顏色或一個場景的時序時，進行就地編輯；僅在場景結構改變時（新增/移除/重新排序場景——並將結構性創作導向 remotion-compose）才進行重寫。預設為外科手術式：它能保留所有已核准的內容。

步驟 6：批次變體

組合是資料驅動的，因此 N 個變體等於 JSON 檔案中的 N 組 prop：

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props 接受內聯 JSON 或檔案路徑；對於超過少數幾個變體的情況，編寫一個小型的 Node 腳本來讀取 JSON 並為每個條目執行 Shell 命令，或者使用 @remotion/renderer 的 renderMedia() 進行型別安全的循環。只需編輯 JSON 即可實現在地化或 A/B 測試文案和顏色。

步驟 7：當本機成為瓶頸時使用 Lambda

當單次渲染在本機需要數分鐘，或批次很大時，可以求助於 Lambda——它會將幀分散到無伺服器工作者上。否則，本機更簡單且免費。

npx remotion lambda functions deploy            # 每個 AWS 帳戶/區域一次
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

需要根據 Remotion 的 Lambda 設定文件設定 AWS 憑證和 IAM 權限。

步驟 8：排解三個常見故障

1. 幀數不匹配 - 動畫提前結束或剪輯末尾有空白。原因：<Sequence> 持續時間更改，但組合總長度未更新。修正：使總長度等於其序列的總和；每次編輯時序後重新計算。這是排名第一的渲染意外。
2. 缺少 staticFile() 參考 - 渲染失敗或素材為空白。原因：透過路徑或 public/ 外部匯入素材。修正：將其放入 public/assets/ 並參考 staticFile("assets/<name>")。
3. 字型閃爍/回退 - 文字以錯誤的字型渲染或發生位移。原因：@remotion/google-fonts 的 loadFont() 缺失或呼叫太晚。修正：在模組頂層呼叫 loadFont() 並應用返回的 fontFamily；渲染器會等待字型載入。

交付物

一個位於 out/ 目錄中、符合要求預設的渲染檔案，對於迭代工作階段，還包括循環提議：列出可調整的維度（節奏、文案、顏色、時序），並根據反饋重新渲染。對於批次，則提供變體 JSON 和每個變體的輸出。

禁止事項

• 禁止為了一個值層級的更改而重寫場景檔案——外科手術式編輯能保留已核准的工作。
• 禁止僅透過旗標更改 fps——請在組合上設定 fps 並重新縮放幀數。
• 禁止更改 Sequence 持續時間而不重新推導組合的總 durationInFrames。
• 禁止每次迭代都進行完整渲染——Studio 熱重載是預覽循環；在最終確認時才進行渲染。
• 禁止在機器發生交換或熱節流時將並行度推高超過物理核心數。
• 禁止在本機渲染僅需數秒時使用 Lambda——這只會增加無謂的 AWS 設定和成本。
• 禁止在此處創作新場景或重組組合——那是 remotion-compose 的職責。

品質標準

• 輸出影片以要求的解析度/長寬比/幀率播放，沒有空白結尾也沒有提前結束（組合總時長等於序列總和）。
• 素材和字型在第一幀就正確渲染——沒有回退字型閃爍，沒有空白素材。
• 一次迭代僅更改了反饋所需的程式碼行；所有先前核准的內容保持不變。
• 批次輸出僅在其 prop 集上有所不同。

升級處理

場景創作、動畫設計和元件結構請移交給 remotion-compose；專案腳手架請移交給 remotion-setup；配樂和音訊時序請移交給 sound-and-music-sync。