クライアント側での背景削除：対応ブラウザとパフォーマンス

ブラウザが備えるべきもの

クライアント側の背景削除ツールはWebページの中で動くため、必要な機能はすべてインストールではなくブラウザが提供しなければなりません。重要なのは4つで、どれか1つでも欠けた端末ではツールが動きません。

WebAssemblyはブラウザ自身のサンドボックス内でモデルを動かすため、クライアント側ツールでは映像が端末から出ません。一方bgremover.aiは、背景削除の仕組みで解説しているとおり、映像を当社GPUサーバーにアップロードします。推論の大半は行列演算なのでGPUが必要です。WebGLはグラフィックスAPIを通じて、WebGPUはコンピュートAPIを通じてGPUを利用します。

どちらもなければ、推論はCPUで行われます。完成したフレームをファイルにエンコードする手段も必要です。対応範囲の広いMediaRecorderか、より細かく制御できるWebCodecsです。4つ目の要件であるデコード済みフレーム用のメモリは、最も過小評価されています。

3つの実行経路

WebGLは設計ではなく回避策です。このAPIは三角形を描くために作られたもので、テクスチャを介してデータを動かすには時間がかかります。それでも実用上の標準であり続けています。WASMは処理をワーカーに移さない限りメインスレッドを奪い合い、BEN2はFP16 WebGPUが必要なので最近のデスクトップGPUに限られます。

これを決めるのは好みではなく利用可能性です。WebGPUだけを実装したツールは、動く環境では速く、それ以外ではまったく使えません。

初回の実行が遅い理由

1. 1 モデルを一度ダウンロード

   フレームを処理する前に行われます。

2. 2 初期化とウォームアップ

   そのあと最初のフレームが処理されます。

3. 3 2回目以降はどちらも省略

   キャッシュから読み込まれるので、残るのは初期化だけです。

そのため、クライアント側ツールはページの読み込み時ではなく、ユーザーの操作をきっかけにモデルを読み込むべきです。ページを開いた瞬間に数メガバイトのWebAssemblyが届くと、読みに来ただけの人にはページが壊れているように感じられます。

デコード済みフレームの計算

デコード済みの動画フレームは非圧縮のピクセルなので、メモリ使用量はほぼ解像度で決まります。

これらの数値は計算によるもので、実測値ではありません。また、圧縮後のファイルサイズは目安になりません。全フレームを一度にデコードする必要はありませんが、処理の流れの中では作業用のフレームを保持します。デコード中のフレーム、セグメンテーション中のフレーム、そのマスク、合成結果、そしてエンコーダーのバッファです。

4Kで33 MBのフレームが数枚となると、タブのメモリ予算が問題になってきます。特にスマホではそうです。高解像度の長いクリップが失敗したり、タブが再読み込みされたりする場合は、長さではなく解像度を下げてください。縦横をそれぞれ半分にすれば、メモリは4分の1になります。

処理時間を決めるもの

ここで示すのは数値ではなく関係です。あるノートPCで測った時間は、スマホについては何も教えてくれません。

• フレーム数長さ×フレームレート。60 fpsは30 fpsの2倍です。
• 解像度デコード、合成、エンコードを左右します。推論は一定です。
• 実行経路同じマシンでもWebGPU、WebGL、WASM-SIMDで違います。
• 端末の種類デスクトップ、ノートPC、スマホのGPUは別物です。
• モデルの選択マッティングはMediaPipeよりフレームあたりのコストが高くなります。
• 発熱状態熱くなったスマホでGPU処理を続けると、性能が抑制されます。

ブラウザ対応表

すべての環境に対応していると謳う前に、ここにブラウザごとの検証結果を載せるべきです。検証なしで言えるのは設計上のことです。クライアント側ツールに必要なのはWebAssemblyとGPUの経路であり、WebGPUではありません。bgremover.aiは、アップロードの準備と書き出しにWebCodecsを使うため、WebCodecsが必要です。

モバイルの実情

クライアント側ツールの場合、MediaPipeセルフィーセグメンテーションの軽さこそが、モバイルブラウザでの利用を可能にしています。メモリ要求が控えめな数メガバイトのモデルならスマホのタブに収まりますが、デスクトップGPU向けのモデルは収まりません。bgremover.aiはモデルをGPUサーバーで動かすことでこの問題を回避していますが、クリップのデコードとエンコードは引き続きスマホが行います。

ブラウザごとにテストするまで、すべてのモバイル環境に対応しているとは謳いません。モバイルはより難しい環境です。タブあたりのメモリが少なく、積極的に解放され、発熱による性能低下もあります。低解像度の短いクリップが確実な方法で、画像の背景削除で処理する静止画なら1フレーム分で済みます。

よくある質問