Chrome 動画のアルファ透明度
Chrome 31 で、WebM の動画のアルファ透明性がサポートされるようになりました。
つまり、Chrome は、WebM（VP8 と VP9）にエンコードされた「グリーン スクリーン」動画を再生する際に、アルファ チャンネルを考慮します。つまり、ウェブページ、画像、他の動画の上に、背景が透明な動画を再生できます。
デモは simpl.info/videoalpha でご覧いただけます。少しシュールな感じがしますが、（文字通り）角が少しとがっているのはご理解いただけると思います。
アルファ版動画を作成する方法
ここで説明する方法では、オープンソース ツールの Blender と ffmpeg を使用します。
- 明るい緑色のカーテンなど、単色の背景の前で被写体を撮影します。
- 動画を処理して、透明データを含む PNG 静止画像の配列を作成します。
- 動画形式（この場合は WebM）にエンコードします。
Adobe After Effects など、同じ作業を行う独自のツールもあります。
1. グリーン スクリーン動画を作成する
まず、後続の処理で背景のすべてを「削除」（透明化）できるように被写体を撮影する必要があります。
最も簡単な方法は、スクリーンやカーテンなど、単色の背景の前で撮影することです。緑色や青色が最もよく使用されます。これは、主に肌の色と異なるためです。
グリーン スクリーン動画（クロマキーとも呼ばれます）の撮影に関する複数のガイドがオンラインで公開されており、グリーン スクリーンやブルー スクリーンの背景幕を購入できる多くの場所があります。また、クロマキー ペイントで背景をペイントすることもできます。
The Great Gatsby VFX リールでは、グリーン スクリーンで何ができるかがわかります。
撮影に関するヒント:
- 被写体に背景と同じ色の服や物体がないことをご確認ください。背景と同じ色の服や物体があると、最終的な動画に「穴」として表示されます。小さなロゴやジュエリーでも問題になることがあります。
- 均一で安定した照明を使用し、影は避けてください。背景の色の範囲をできるだけ狭くして、後で透明にする必要があります。
- 複数の拡散光を使用すると、影や背景色の変化を回避できます。
- 光沢のある背景は避けてください。マット サーフェスは光を拡散させます。
2. グリーン スクリーン動画から未加工のアルファ動画を作成する
次の手順では、グリーン スクリーン動画から未加工のアルファ動画を作成する方法を説明します。
- グリーン スクリーン動画を撮影したら、Blender などのオープンソース ツールを使用して、動画をアルファデータを含む PNG ファイルの配列に変換できます。Blender のカラーキーを使用して、グリーン スクリーンを削除して透明にします。（PNG は必須ではありません。アルファ チャンネル データを保持する形式であれば問題ありません）。
ffmpeg などのオープンソース ツールを使用して、PNG ファイルの配列を未加工の YUVA 動画に変換します。
ffmpeg -i image%04d.png -pix_fmt yuva420p video.rawまたは、次のような ffmpeg コマンドを使用して、ファイルを直接 WebM にエンコードすることもできます。
ffmpeg -i image%04d.png output.webm
音声を追加する場合は、ffmpeg を使用して次のようなコマンドで音声を結合できます。
ffmpeg -i image%04d.png -i audio.wav output.webm
3. アルファ動画を WebM にエンコードする
未加工のアルファ動画を WebM にエンコードする方法は 2 つあります。
ffmpeg: WebM アルファ版動画のエンコードを ffmpeg でサポートしました。
アルファデータを含む入力動画で ffmpeg を使用し、出力形式を WebM に設定すると、仕様に従って正しい形式でエンコードが自動的に実行されます。注: 現時点では、この機能が動作するように git ツリーから ffmpeg の最新バージョンを入手する必要があります。
サンプル コマンド:
ffmpeg -i myAlphaVideo.webm output.webmwebm-tools を使用する:
git clone https://chromium.googlesource.com/webm/libvpxwebm-tools は、WebM プロジェクトの作成者によって管理されている、WebM に関連するシンプルなオープンソース ツールのセットです。アルファ透明度のある WebM 動画を作成するツールなどがあります。
--helpでバイナリを実行すると、alpha_encoder でサポートされているオプションのリストが表示されます。
4. Chrome での再生
エンコードされた WebM ファイルを Chrome で再生するには、そのファイルを動画要素のソースとして設定します。
どのようにして達成したのですか？
Google エンジニアの Vignesh Venkatasubramanian に、このプロジェクトでの取り組みについて話を聞きました。彼は、主な課題を次のように要約しました。
- VP8 ビットストリームはアルファ チャネルをサポートしていませんでした。そのため、VP8 ビットストリームを破壊することなく、既存のプレーヤーを破壊することなく、アルファを組み込む必要がありました。
- Chrome のレンダラは、アルファ値のある動画をレンダリングできませんでした。
- Chrome には、複数のハードウェア/GPU デバイス用の複数のレンダリング パスがあります。アルファ動画のレンダリングをサポートするために、すべてのレンダリング パスを変更する必要がありました。
動画のアルファ透明度には、ゲーム、インタラクティブ動画、コラボレーション ストーリーテリング（背景動画や画像に独自の動画を付け加える）、代替のキャラクターやプロットを含む動画、オーバーレイ動画コンポーネントを使用するウェブアプリなど、多くの興味深いユースケースが考えられます。
楽しい動画制作を！アルファ透明度を使って素晴らしい作品を作成された場合は、ぜひお知らせください。