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}并等比缩放帧计数——仅通过标志更改帧率会导致所有按帧计时的动画不同步。
第 4 步:调整并发度
渲染是 CPU 密集型任务(每帧都是一张无头 Chromium 截图)。默认并发度约为核心数的一半;显式调整是最简单的本地加速方法:
npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8
从物理核心数开始(--concurrency=50% 接受百分比值);如果机器出现内存交换或热节流则减少——超过最佳点后,更多的 Chromium 标签页只会拖慢速度,而非加快。
第 5 步:运行迭代优化循环
保持 Studio 打开(npx remotion studio,http://localhost:3000)以便用户即时预览;保留完整渲染用于最终确认。
- 用户在 Studio 中预览并给出自然语言反馈。
- 将其转化为一次外科手术式编辑——仅修改相关值:
- “太快了”→ 扩大
interpolate的输入范围或提高弹簧damping。 - “Logo 应该更突出”→ 降低弹簧
damping/ 添加过冲。 - “更改 CTA 文案”→ 编辑 prop /
defaultProps,不触碰其他任何内容。 - “不同的强调色”→ 在颜色对象中更改一个十六进制值。
- “最后一个特性停留更久”→ 增加该
<Sequence>的durationInFrames并重新推导合成总的durationInFrames。
- “太快了”→ 扩大
- 重新渲染,或让 Studio 热重载来检查视觉效果。
外科手术式编辑 vs 重写:当更改只涉及值、属性、颜色或单个场景的时间时,进行原地编辑;仅在场景结构改变时(添加/删除/重新排列场景——并将结构性的创作路由到 remotion-compose)才重写。默认采用外科手术式编辑:它保留所有已批准的内容。
第 6 步:批量变体
合成是数据驱动的,因此 N 个变体 = JSON 文件中的 N 个属性集:
[
{ "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 步:排查三个常见故障
- 帧计数不匹配——动画提前结束或片段末尾出现死帧。原因:某个
<Sequence>的时长发生了更改,但合成的总时长未更新。修复:确保总时长等于其序列时长之和;每次编辑时间后重新计算。这是第一大渲染意外。 - 缺少
staticFile()引用——渲染失败或某个素材为空白。原因:素材通过路径引入或位于public/外部。修复:将其放入public/assets/并通过staticFile("assets/<name>")引用。 - 字体闪烁/回退——文本使用错误的字体渲染或发生位移。原因:
@remotion/google-fonts的loadFont()缺失或调用过晚。修复:在模块顶层调用loadFont()并应用返回的fontFamily;这样渲染将等待字体加载完成。
交付物
一个位于 out/ 目录下、符合请求预设的渲染文件,此外——对于迭代会话——提供循环选项:列出可调整的维度(节奏、文案、颜色、时间)并根据反馈重新渲染。对于批量渲染,提供变体 JSON 和每个变体的输出文件。
禁止操作
- 禁止为了一个值级别的更改而重写场景文件——外科手术式编辑保留已批准的工作。
- 禁止仅通过标志更改帧率——必须在合成上设置
fps并重新缩放帧计数。 - 禁止更改 Sequence 时长而不重新推导合成的总
durationInFrames。 - 禁止每次迭代都进行完整渲染——Studio 热重载是预览循环;在最终确认时才渲染。
- 禁止在进行内存交换或热节流的机器上将并发度推高至超过物理核心数。
- 禁止在本地渲染只需几秒钟时使用 Lambda——这会无谓地增加 AWS 设置和成本。
- 禁止在此处创作新场景或重组合成——那属于 remotion-compose 的范畴。
质量标准
- 输出视频以请求的分辨率/宽高比/帧率播放,无死帧尾,无提前截断(合成总时长等于序列时长之和)。
- 资源和字体在第一帧就能正确渲染——无双退字体闪烁,无空白资源。
- 一次迭代只更改了反馈所要求的行;所有已批准的内容保持不变。
- 批量输出的差异仅在于其属性集。
升级
场景创作、动画设计和组件结构转到 remotion-compose;项目脚手架转到 remotion-setup;评分和音频时间转到 sound-and-music-sync。