Battle-of-Austerlitz-Film

一支 5 分零 1 秒的历史短片，讲 1805 年拿破仑打赢的奥斯特里茨战役。画面、音乐、旁白全是代码做的：每一帧由 WebGL 程序（在浏览器里画三维画面的技术）画出来，音乐和音效是合成的，英文旁白用离线的语音模型生成。作者在 X 上说，这支片是让 Claude Opus 5.5 写出来的。仓库里有成片、全部源码和制作说明。

适合谁

• 想做几分钟的长片，想看别人怎么按旁白分场景、排时间轴的人。
• 做历史、地理、地图类解说，想看「在地图上演一件事」怎么用代码做的人。
• 会一点代码、想完整拆一个长片工程的人。

里面有什么，能学到什么

• 场景从战前一夜的营火、行军地图、地形上的陷阱，到晨雾、日出、冰冻的池塘和尾声，一段接一段。
• 旁白按节拍写在 web/script.js，每个镜头都对着这些节拍定时间；web/film.js 管场景、镜头、机位和军队怎么走。
• 地形用的是战场真实的卫星高程数据，高低起伏放大了 3 倍好看清；太阳从当天真实的方位升起；远处的炮声按声速晚一点才听到，还分左右声道。
• 音效是从画面里推出来的（web/events.js）：画面里开一炮，声音轨就记一炮。
• 油画质感靠一个滤镜叠在画面上，再加画布纹理、颗粒和宽银幕黑边。

怎么开始

1. 先看成片：仓库的 video 文件夹里有 austerlitz.mp4 和英文字幕文件，点进去就能下载。
2. 想在浏览器里边放边拖进度条：把仓库链接发给 Claude Code，说「帮我把这个项目在本地跑起来」。说明里的做法是在项目文件夹运行 npx http-server . -p 8080，再打开本机 8080 端口的 web 页面。
3. 对着成片读 web/script.js 和 web/film.js，看一句旁白怎么对上一个镜头。
4. 从头重建要装 Node.js、Python、Kokoro 语音模型和 Playwright 自带的浏览器，没有显卡加速时一帧要算 1.7 秒左右。只想学方法，这步可以跳过。

要注意

• 仓库没写开源许可证，代码版权默认归作者，适合看和学思路，别把代码直接搬进自己要发的作品。
• 旁白和字幕都是英文。