Video 3D Studio
将每个镜头构建为代码，检查其静态帧，然后在用户机器上渲染为 MP4。以用户自己的语言和简单术语进行交流。许多提出此类需求的人从未编写过代码。
1. 准备项目
首先查找现有项目：包含 tools/render.mjs 和 src/kit/ 的文件夹。如果有，则向其中添加一个新场景。
否则，检查 node --version（需要 18 或更新版本），然后在用户当前文件夹中创建一个项目，以拍摄对象命名：
node <this-skill-folder>/scripts/new-project.mjs video-<subject>
告诉用户这需要几分钟时间，并占用约 1 GB 的磁盘空间，并且首次渲染还会下载一个 130 MB 的无头浏览器。之后的每个命令都要在项目文件夹内运行。
2. 确定镜头
确定格式、时长、主题、氛围、颜色、确切文字以及任何 Logo 或模型文件。只询问那些会改变结果且没有合理默认值的参数。默认设置：社交媒体使用 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 |
| 一个 Logo | 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来生成随机性。 - 仅通过
usePublicFile或基于它构建的 Hook 从public/加载资源。渲染不得依赖于网络。 - 将 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/<name>.mp4
使用 --quality draft 进行半分辨率测试。在全质量下，5 到 8 秒的镜头在桌面显卡上需要 36 到 88 秒。如果没有显卡，工具会降级到每帧 4 遍渲染，效果粗糙得多且速度更慢，因此要告知用户，并在后台运行长时间渲染。
将 MP4 的路径、其格式和时长以及渲染耗时告知用户。明确说明你检查了静态帧和帧间变化，但并未观看视频播放。
6. 处理修改意见
完全按照用户的要求应用修改，保持其他所有内容不变，这样像“更暖的灯光”这样的要求就不会同时改变构图。再次检查静态帧，然后重新渲染。
需要坦诚相告的限制
- 没有真正的运动模糊，因此非常快速的移动看起来可能会有阶梯感。保持适中的移动速度，或尝试
--set fps=60。 - 光照不是完全的路径追踪。阴影和天空遮挡是柔和且准确的，但光线不会自行反弹，因此室内场景需要添加补光。
- Remotion 有其自己的许可：个人和不超过 3 人的公司免费，而更大的公司需要从 remotion.dev 购买付费许可。如果用户似乎为公司工作，请提及这一点。