動画クロマキー透過

1. 動画を選びます。読み込むと1コマ目が表示され、四隅の色から背景の緑を自動で拾います。
2. 思ったところで抜けていなければ、左のプレビューの背景部分をクリックします。その画素の色をキーの色として取り込みます。撮影した緑は #00FF00 ではありません。実際の色を拾うのがいちばん確実です。
3. 「抜く範囲」を、被写体が欠け始める一歩手前まで上げます。右のプレビューは市松模様が透明部分です。
4. 緑の縁が残っていたら「輪郭の調整」をマイナスにします。-1 か -2 でたいてい消えます。次に「Despill」で、髪や肩に乗った緑の照り返しを抜きます。
5. 切り抜きたいときは、左のプレビューをドラッグして範囲を選びます。出力サイズも選べます。
6. 「この設定で1コマだけ試す」を押すと、本番とまったく同じ処理を1コマぶんだけ実行して確認できます。よければ「透過動画に変換する」を押します。

まずは数秒で試してください。ブラウザの中で1コアで処理するため、長い動画や高解像度の動画は時間がかかります。「切り出す時間」の初期値は10秒にしてあります。

設定は自動で保存されます

色・輪郭・Despill・出力の設定は、変えるたびにお使いの端末（ブラウザ）に自動で保存されます。次に開いたときは前回の続きから始められます。切り抜き範囲と切り出す時間は動画ごとに変わるため保存しません。

• 名前を付けて保存 … 撮影場所ごとに設定を分けておけます（例:「自宅のグリーンバック」「スタジオA」）。50件まで保存でき、選ぶだけで呼び出せます。
• ファイルに書き出す … 設定と保存した一覧をまとめてJSONファイルにします。別のパソコンに移すときや、同じ設定をチームで揃えたいときに使ってください。
• ファイルから読み込む … 書き出したファイルを読み込みます。範囲外の値や知らない項目は無視するので、壊れたファイルを読ませても設定が壊れることはありません。
• 初期設定に戻す … すべて初期値に戻します。名前を付けて保存したものは消えません。

保存先はこの端末のブラウザの中だけです。サーバーには何も送られません。ブラウザの履歴やサイトデータを消すと、保存した設定も消えます。大事な設定はファイルに書き出しておいてください。

実測の目安です。長いものを扱うときは、先に「フレームレート」を下げるか、切り抜きで範囲を狭めてください。

「メモリが足りませんでした」と出たときは、出力サイズを小さくするか、フレームレートを下げるか、切り出す時間を短くしてください。ブラウザの中で使えるメモリには上限があります。

「#00FF00 を透明にする」だけの処理では、ほぼ必ず緑の縁が残ります。理由は2つあります。

理由1: 境目の画素は緑と被写体が混ざっている

カメラは1画素の中に入った光を平均して記録します。被写体の輪郭にあたる画素は、被写体の色と背景の緑が混ざった中間色になっています。純粋な緑ではないので「緑を消す」だけでは残り、細い緑の線として見えます。髪の毛のように細いものほど、この中間色の画素の割合が増えます。

さらに、動画は多くの場合 4:2:0 という方式で記録されています。色の情報を縦横それぞれ半分に間引いて持つため、色の境目は実際には2px ほどにじんでいます。「1〜2px 締める」必要があるのはこのためです。

理由2: 被写体そのものが緑に照らされている

グリーンバックは光を反射します。その反射光が被写体に回り込み、髪の輪郭・肩・頬などがうっすら緑がかります。これは背景ではなく被写体の色なので、どれだけキーの範囲を広げても消えません。無理に広げると今度は被写体が欠けます。

この緑かぶりを取り除く処理を Despill（デスピル） と呼びます。透明にするのではなく、色を直す処理である点が重要です。

このツールが行っている5段階

効くのは③と④です。①②をいくら調整しても、境目の中間色と緑かぶりは原理的に消えません。

調整の目安

• 細い緑の線が全体に出る … 輪郭の調整を -1。それでも残れば -2。
• 髪の毛や指が欠ける … 輪郭の調整を 0 か +1 に戻し、抜く範囲を下げます。
• 輪郭がギザギザ … 「境目のなじませ」を上げるか、「輪郭のぼかし」を1〜2にします。
• 肌や白い服が緑っぽい … Despill を上げます。
• Despill を上げたら肌が紫っぽくなった … 上げすぎです。0.4〜0.6 あたりに戻してください。緑の服を着ている場合はとくに注意が必要です。

MP4では透過を保存できません。広く使われている H.264 の MP4 にはアルファチャンネルを入れる仕組みが実質的にないため、透過動画は別の形式で書き出す必要があります。

ウェブページに置くときの書き方

透過WebMを背景の上に重ねるときは、<video> をそのまま置けば透過します。自動再生させるなら muted が必要です。

VP9ではなくVP9より前のVP8を使っています

WebMの透過にはVP8とVP9のどちらも使えますが、ブラウザ内で動かしているFFmpegでは、VP9＋アルファは数十コマで処理が破綻することを実測で確認しました。そのため、確実に最後まで書き出せるVP8を使っています。容量はVP9よりやや大きくなりますが、再生できる環境はむしろ広くなります。

<video src="chromakey.webm" autoplay loop muted playsinline></video>

音声について

WebM と MOV は音声も一緒に書き出せます。素材として合成に使う場合は、音声を外したほうが扱いやすいこともあります。

WebM の音声は Vorbis で書き出しています。WebM でよく使われる Opus は、ブラウザ内で動かしている変換エンジンだとステレオ音声で処理が止まってしまうことを確認したためです。Vorbis は WebM が再生できる環境ならそのまま鳴ります。

あとから処理でどうにかするより、撮影の時点で条件を整えるほうが結果は良くなります。

• 背景と被写体を離す。1〜2m 離すだけで、緑の照り返しが大きく減ります。いちばん効果があります。
• 背景に均一に光を当てる。影やムラがあると、1つのキー色では抜ききれません。
• 被写体には別に光を当てる。背景光と分けることで輪郭がはっきりします。
• 緑の服・緑の小物は避ける。一緒に消えます。被写体に緑が多い場合は青背景を検討してください。
• できるだけ高いビットレートで撮る。圧縮が強いと境目の色が壊れ、どう処理しても縁が汚くなります。
• 4:2:2 以上で撮れるカメラなら、その設定で。色の情報が2倍細かくなり、輪郭の処理が格段に楽になります。

青背景でも使えます

「背景の色」をクリックで拾えば、青背景（ブルーバック）でも同じように処理できます。ただし Despill は緑向けの処理です。青背景の場合は Despill を0にして、代わりに輪郭の調整を少し強めにしてください。

動画クロマキー透過は、ブラウザの中で FFmpeg を動かして処理しています。動画がサーバーへ送信されることはありません。初回のみ変換エンジンの読み込みに30MBほどの通信が発生します。1コアで処理するため、解像度が高い動画や長い動画は時間がかかります。撮影条件によっては思うように抜けないことがありますので、あくまでも目安としてご利用ください。無料でご利用いただけます。