Komadori：100 万ボイドの 1080p・10 秒のクリップを 11-14 秒で
Komadori（コマ撮り、stop-motion）は、100 万ボイドの 1080p・10 秒のクリップを、ノート PC の GPU で 11-14 秒で作ります。ターミナルからは canvas が動くところを見られず、エージェントも同じです。Komadori はページを Chrome で 1 フレームずつ動かし、描かれたものを返します。クリップ、コンタクトシート（サンプルしたフレームを 1 枚にまとめた画像）、レポートです。
spryte の 100 万ボイドのデモを、Komadori の --capture canvas で作ったクリップです。このファイルは 720p です。
| マシン | フレームごとのスクリーンショット | --capture canvas | 速くなる倍率 |
|---|---|---|---|
| Radeon 780M（内蔵） | 35.0 秒 | 13.5 秒 | 2.6 倍 |
| RTX 5060 のノート PC | 37.6 秒 | 11.2 秒 | 3.4 倍 |
1920x1080 で 600 フレーム、Windows 11 の Chrome で測りました。以前の実行では 3.0 倍と 3.6 倍だったので、成り立つのは「約 3 倍」です。測定結果には、数字が合わなかった実行も載せています。
npx komadori dist --query "capture=1" --frames 600 --size 1920x1080 --mp4 clip.mp4 --capture canvasdist はビルド済みのページか URL です。Komadori には Node 20、Chrome または Chromium が必要で、--mp4 には ffmpeg も必要です。ページには window.__frame() という関数を 1 つ定義します。この関数は、シーンをちょうど 1 フレーム進めて描画します。使い方のページで説明しています。
速い理由
ページのスクリーンショットをフレームごとに撮る方法は、どれも 2 台とも毎秒 18 フレームほどでした。だから、スクリーンショットの呼び出しを速くしても変わりません。--capture canvas はページの中で WebCodecs を使って canvas を H.264 にし、ffmpeg に渡します。速度はシミュレーションそのものに近くなります。100 万ボイドを CPU で動かすと、キャプチャなしで毎秒 58-80 フレームです。10 秒のクリップが約 10 秒でできるのはこのためです。
ほかにできること
- 全フレームの検査。 ページがエラーを投げた、リクエストが失敗した、シェーダーがコンパイルできない、サンプルしたフレームがすべて単色のとき、実行は失敗します。シェーダーのエラーには、ソースの行番号、コンパイラーのメッセージ、その行の内容が付きます。
- ゴールデンフレーム。
approveは、2 回のレンダリングが一致したときだけフレームを保存します。以降の実行は、一致しないと失敗し、保存したフレーム、新しいフレーム、差分を並べた画像を書き出します。GPU をまたぐ比較の上限は、Radeon 780M、RTX 5060 のノート PC、Vulkan SwiftShader での測定から決めました。spryte の CI が使っています。 - MCP サーバー。
komadori mcpには 3 つのツールがあります。render、look（1 フレームを実寸またはズームで）、diffです。
示せていないこと
- エージェントに役立つことは示せていません。4 つの小さなタスクでは、Sonnet はレンダリングなしでも同じ結果でした（実行と費用）。
- Chrome で動きます。Windows でテストしていて、ゴールデンフレームの検査は Linux のランナーでも動いています。
- クリップに入るのは canvas だけなので、上に HTML で描いたタイトルは写りません。
- 検査するのは何が描かれたかであって、見た目が良いかどうかではありません。縞模様や読みにくい文字は検出できません。コンタクトシートを開いて見てください。
Komadori は spryte のシーンのために作りましたが、canvas に描くページならどれでも使えます。ソースは GitHub、パッケージは npm にあります。
npx komadori dist --frames 600 --size 1920x1080 --out render --mp4 render/clip.mp4