# Komadori：100 万ボイドの 1080p・10 秒のクリップを 11-14 秒で

**Komadori**（コマ撮り、stop-motion）は、100 万ボイドの 1080p・10 秒のクリップを、ノート PC の GPU で 11-14 秒で作ります。ターミナルからは canvas が動くところを見られず、エージェントも同じです。Komadori はページを Chrome で 1 フレームずつ動かし、描かれたものを返します。クリップ、コンタクトシート（サンプルしたフレームを 1 枚にまとめた画像）、レポートです。

spryte が描いた 100 万ボイドの群れを、Komadori でクリップにしたものです。

*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 倍」です。[測定結果](https://github.com/debuffjp/komadori/blob/master/bench/capture/README.md)には、数字が合わなかった実行も載せています。

```bash
npx komadori dist --query "capture=1" --frames 600 --size 1920x1080 --mp4 clip.mp4 --capture canvas
```

`dist` はビルド済みのページか URL です。Komadori には Node 20、Chrome または Chromium が必要で、`--mp4` には ffmpeg も必要です。ページには `window.__frame()` という関数を 1 つ定義します。この関数は、シーンをちょうど 1 フレーム進めて描画します。[使い方のページ](/ja/komadori/)で説明しています。

## 速い理由 {#why-it-s-fast}

ページのスクリーンショットをフレームごとに撮る方法は、どれも 2 台とも毎秒 18 フレームほどでした。だから、スクリーンショットの呼び出しを速くしても変わりません。`--capture canvas` はページの中で WebCodecs を使って canvas を H.264 にし、ffmpeg に渡します。速度はシミュレーションそのものに近くなります。100 万ボイドを CPU で動かすと、キャプチャなしで毎秒 58-80 フレームです。10 秒のクリップが約 10 秒でできるのはこのためです。

## ほかにできること {#what-else-it-does}

- **全フレームの検査。** ページがエラーを投げた、リクエストが失敗した、シェーダーがコンパイルできない、サンプルしたフレームがすべて単色のとき、実行は失敗します。シェーダーのエラーには、ソースの行番号、コンパイラーのメッセージ、その行の内容が付きます。
- **ゴールデンフレーム。** `approve` は、2 回のレンダリングが一致したときだけフレームを保存します。以降の実行は、一致しないと失敗し、保存したフレーム、新しいフレーム、差分を並べた画像を書き出します。GPU をまたぐ比較の上限は、Radeon 780M、RTX 5060 のノート PC、Vulkan SwiftShader での測定から決めました。spryte の CI が使っています。
- **MCP サーバー。** `komadori mcp` には 3 つのツールがあります。`render`、`look`（1 フレームを実寸またはズームで）、`diff` です。

## 示せていないこと {#what-this-doesn-t-show}

- エージェントに役立つことは示せていません。4 つの小さなタスクでは、Sonnet はレンダリングなしでも同じ結果でした（[実行と費用](https://github.com/debuffjp/komadori/blob/master/bench/eval/README.md)）。
- Chrome で動きます。Windows でテストしていて、ゴールデンフレームの検査は Linux のランナーでも動いています。
- クリップに入るのは canvas だけなので、上に HTML で描いたタイトルは写りません。
- 検査するのは何が描かれたかであって、見た目が良いかどうかではありません。縞模様や読みにくい文字は検出できません。コンタクトシートを開いて見てください。

Komadori は [spryte](/ja/spryte/) のシーンのために作りましたが、canvas に描くページならどれでも使えます。ソースは [GitHub](https://github.com/debuffjp/komadori)、パッケージは [npm](https://www.npmjs.com/package/komadori) にあります。

```bash
npx komadori dist --frames 600 --size 1920x1080 --out render --mp4 render/clip.mp4
```