Tooscut — ブラウザで動くGPU加速映像エディタ

Tooscutはブラウザタブ1つで動くNLE（Non-Linear Editor）だ。DaVinci ResolveやPremiere Proをインストールせず、URLにアクセスするだけで映像編集を始められる。

ただ「ブラウザ映像エディタ」と聞くと普通はおもちゃレベルを想像する。Tooscutが違うのは、レンダリングエンジン全体がRust/WASM + WebGPUで動くという点だ。JavaScriptはUI担当のみ。実際のフレーム合成はGPUで処理される。

3層アーキテクチャ

React UI（TanStack Start）→ TypeScriptレンダーエンジン → Rust/WASMコンポジター。コードベースはTypeScript 80%、Rust 20%の比率。そのRust 20%が性能の核心を全て担う。

GPU加速が実際に何をするか

明るさ・コントラスト・彩度・ブラー・色相回転 — これらのエフェクトが全て1つのWGSLフラグメントシェーダー内で動く。スライダーを動かすとGPUユニフォーム値だけが変わり、シェーダーが即座に再実行される。CPUは触らない。

ブラーを例にすると、13×13ガウシアンカーネルがシェーダー内にハードコードされている。sigma値に応じてステップサイズをスケーリングする方式で、ブラー強度を変えてもテクスチャパスの追加は不要だ。

リアルタイムプレビューパイプライン

ここが一番巧妙な部分だ。

1. メインスレッドでrequestAnimationFrameループを回す
2. 現在時刻に表示されるクリップだけをフィルタリング（ソート済み配列 + 二分探索）
3. HTMLVideoElementからcreateImageBitmap()でビデオフレームを抽出
4. ImageBitmapをWeb Workerにtransfer（コピーではない）
5. Worker内のWASMコンポジターがWebGPUでOffscreenCanvasに直接合成

4番がポイントだ。ImageBitmap transferはゼロコピー — メインスレッドのメモリの所有権をWorkerに移すだけで複製コストがない。テクスチャアップロードもcopy_external_image_to_textureでGPUに直接転送する。

メモリ管理

WASM linear memoryはV8ヒープにカウントされない。GPUバッファはVRAMに、BitmapはネイティブアロケーションJavaScript。ビデオファイルは全体をメモリに載せずオンデマンドでデコードする。この構造のおかげで4K映像もブラウザタブのメモリ制限に引っかからない。

エクスポート

FrameRendererPoolで複数のWeb Workerを並列実行する。各Workerに独立したWASMコンポジターがあり、フレームを分割してレンダリングする。MediaBunnyライブラリがMP4マルチプレクシングを担当。