Chrome 動画のアルファの透明性
Chrome 31 では、WebM で動画のアルファ透明度がサポートされるようになりました。
つまり、Chrome では、アルファ版チャンネルを使用して WebM（VP8 と VP9）にエンコードされた「グリーン スクリーン」動画を再生する場合、アルファ版チャンネルが考慮されます。つまり、ウェブページ、画像、その他の動画に重ねて、透明な背景の動画を再生できるということです。
simpl.info/videoalpha のデモをご覧ください。どこかシュールで、端が少し粗く（文字どおり）しかし、イメージは想像できる。
アルファ版の動画を作成する方法
ここで説明するメソッドでは、オープンソースのツールである Blender と ffmpeg を使用します。
- 単色の背景（明るい緑のカーテンなど）の前で被写体を撮影します。
- 動画を処理して、透明度データを含む PNG 静止画像の配列を作成します。
- 動画形式（この場合は WebM）にエンコードします。
同じ作業を実行するための専用ツール（Adobe After Effects など）もあり、こちらはよりシンプルです。
1. グリーン スクリーンの動画を作成する
まず、背景のすべてをその後の処理で「削除」（透明化）できるように、被写体を撮影する必要があります。
単色の背景（画面やカーテンなど）の前で撮影するのが最も簡単な方法です。緑色または青色は、主に肌の色の違いにより、最も頻繁に使用されます。
グリーン スクリーン動画（クロマキーとも呼ばれます）の撮影については、オンラインの複数の ガイドや、グリーン スクリーンやブルー スクリーンの背景を購入できる場所がたくさんあります。または、クロマキー ペイントを使用して背景をペイントすることもできます。
グレート ギャツビーの VFX リールは、グリーン スクリーンでどれだけ達成できるかを示しています。
撮影に関するヒント:
- 被写体に背景と同じ色の服や物がないことを確認してください。そうしないと、最終的な動画で「穴」として表示されます。小さなロゴやジュエリーであっても問題になることがあります。
- 一貫性のある均一な照明を使用し、シャドウを避けます。目的は、背景の色の範囲を可能な限り最小限にし、後で透明にすることです。
- 複数の拡散ライトを使用すると、シャドウと背景色のばらつきを避けることができます。
- 光沢のある背景は避けます。マット加工の表面にすると光がよく入ります。
2. グリーン スクリーン動画から未加工のアルファ動画を作成する
グリーン スクリーン動画から未加工のアルファ動画を作成する 1 つの手順は次のとおりです。
- グリーン スクリーン動画を撮影したら、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 にエンコードする
未加工のアルファ版動画は、2 つの方法で WebM にエンコードできます。
ffmpeg: ffmpeg に、WebM アルファ版の動画をエンコードするためのサポートが追加されました。
アルファデータを含む入力動画で 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 デバイスのレンダリング パスが複数あります。アルファ版動画のレンダリングをサポートするには、すべてのレンダリング パスを変更する必要がありました。
動画のアルファの透明度には、ゲーム、インタラクティブ動画、共同ストーリーテリング（背景動画や画像に独自の動画を追加する）、別のキャラクターやプロットを使用した動画、オーバーレイ動画コンポーネントを使用するウェブアプリなど、さまざまな興味深いユースケースが考えられます。
映画制作を楽しんでください！アルファ透過性を使用して優れたものを開発した場合は、ぜひお知らせください。