这是一个用 TypeScript、three.js、Vite/Bun 构建的“代码生成式音乐视频”项目，为歌曲《I'm Upping My P(doom)》制作逐词同步的卡拉 OK 字幕、动态图形、3D 场景和后期效果。项目的核心特点是：每一帧都是歌曲时间的确定性函数，因此浏览器实时预览与离线导出的 1080p60/4K60 视频在视觉上保持一致。仓库还包含音频分析、歌词对齐、节拍检测等 Python 工具链说明，但渲染所需的关键 JSON 数据已经提交，普通使用者无需重新跑分析流程。
适用领域
生成式视频 / 创意编程 / 音乐可视化 / 歌词同步 / WebGL/three.js / 离线视频渲染 / 动态图形设计 / AI 辅助创作 / 音频分析 / 前端图形工程
配置难度
中高。仅运行预览属于中等难度，熟悉 Bun/Vite 后可以较快启动；但理解渲染引擎、时间轴、three.js 场景、后期处理、离线导出和音频分析流程需要较强的前端图形、视频编码和音频处理经验。若要改造成自己的音乐视频项目，难度较高。
商业价值
该项目的直接商业价值不在于作为即插即用产品，而在于技术参考和创意展示。它可为音乐可视化、品牌动态视频、舞台视觉、歌词 MV、AI 创意内容生产工具提供架构参考，尤其适合研究“浏览器实时预览 + 高质量离线渲染”的生产流程。对于创意技术团队、互动视觉工作室、音乐内容制作方和前端图形工程师，其学习和借鉴价值较高；但由于歌曲和歌词版权受限，不能简单将原作品直接商业化。
01
技术亮点
- 确定性渲染架构：每一帧由歌曲时间决定，浏览器预览和离线导出可保持一致
- 完整的逐词歌词同步和卡拉 OK 字幕排版系统
- 支持 1080p60 和原生 4K60 输出，而不是简单放大
- 高级运动模糊采样机制：可根据画面运动自动选择 12、36、108、324 等子帧采样数量
- 包含丰富的后期效果，如 bloom、halation、grain、HUD、GPU line batch 等
- 场景模块化清晰，每个 plate/scene 单独组织，便于学习和修改
- 同时提供实时预览和离线高质量渲染两种工作流
- 文档较完整，包含 treatment、engine、渲染命令、音频分析流程和性能说明
- MIT 代码许可证，方便开发者学习和复用工程结构
- 项目展示了 AI 辅助创作在复杂视听作品中的完整实践案例
02
目标用户
- 对创意编程、代码生成动画、音乐可视化感兴趣的前端开发者
- 想学习 three.js、WebGL 后期处理、GPU 线条渲染和时间轴驱动动画的开发者
- 制作 MV、歌词视频、视觉演出素材的设计师和技术美术
- 研究如何将浏览器实时预览与离线高质量视频导出结合的工程师
- 希望参考 AI 辅助创作工作流的独立创作者
- 对音频分析、歌词强制对齐、节拍检测流程感兴趣的开发者
03
配置要求
- 运行时主要依赖 Bun、Vite、TypeScript、three.js、Google Chrome、ffmpeg
- 普通预览和视频渲染不需要重新运行 Python 音频分析流程，因为 data/lyrics.json 和 data/audio.json 已包含在仓库中
- 若要重新生成歌词和音频分析数据，需要安装 uv，并准备 Demucs、Whisper/CTC、音频分离等相关模型和中间文件
- 重新生成分析数据需要额外下载约 4GB 模型权重到 analysis/.cache/
- 离线渲染对 GPU 和内存要求较高，尤其是 4K60 和高采样运动模糊模式
- 4K 渲染可能需要大量磁盘空间，README 中提到默认 CRF 16 下成片约 13GB
- headless Chrome 和 ffmpeg 在 4K 并行渲染时内存占用明显，单条流水线可能需要数 GB 内存
- 项目中的字体有独立许可证，歌曲、歌词和音频不属于 MIT 许可证覆盖范围
04
适用场景
- 在本地浏览器中预览完整的代码生成音乐视频
- 导出 1080p60 或 4K60 的高质量 MP4 视频
- 学习如何用 TypeScript + three.js 构建确定性时间轴动画系统
- 参考其场景组织方式，为自己的音乐视频或可视化作品开发 plate/scene 结构
- 研究逐词歌词同步、节拍对齐、音频 loudness/onset 数据如何驱动画面
- 学习 headless Chrome、WebSocket、ffmpeg 组合进行离线视频渲染的实现方式
- 生成 stills、contact sheet、性能测试、分镜/plate 等渲染辅助输出
- 二次创作或替换部分场景，制作新的动态图形视频作品
05
部署与配置
- 安装 Bun：https://bun.sh
- 安装 Google Chrome，离线渲染依赖 playwright-core 驱动 headless Chrome
- 安装 ffmpeg，并确保包含 libx264 编码支持
- 克隆仓库：git clone https://github.com/mexicat/pdoom-video.git
- 进入渲染应用目录：cd pdoom-video/app
- 安装依赖：bun install
- 启动浏览器预览：bunx vite
- 打开 http://localhost:5173 进行实时预览；可使用 ?t=23 从指定秒数开始
- 导出 1080p 视频：bun scripts/render.ts video --samples auto --shutter 0.2 --out ../out/pdoom.mp4
- 导出 4K 视频：bun scripts/render.ts video --scale 2 --samples auto --shutter 0.2 --x264 aq-mode=3:rc-lookahead=30 --out ../out/pdoom-4k.mp4
06
风险与注意事项
- 项目更像一件特定音乐视频作品，而不是通用框架；直接复用于其他歌曲需要较多改造
- 音频、歌词和歌曲版权不在 MIT 许可证范围内，商用或再发布存在版权风险
- 4K 渲染成本较高，对 GPU、内存、磁盘和时间都有明显要求
- 重新生成音频分析数据的流程复杂，依赖未提交的 stems 和中间文件，不适合新手直接复现
- 依赖 headless Chrome、ffmpeg、Bun 等多组件，跨平台环境问题可能较多
- README 中提到该作品由 Claude 深度参与创作，若用于商业项目需注意生成内容、素材和版权归属审查
- 项目主题与 P(doom)、AI 风险文化相关，内容风格可能不适合所有商业场景
- 仓库没有明显的通用配置界面，替换歌曲、歌词和场景需要理解代码和时间轴结构
2026-09-28
第11名
新收录 · github_search
