Chrome 動画のアルファ透明度

Chrome 動画のアルファ透明度

Chrome 31 では、WebM で動画のアルファ透明度がサポートされるようになりました。

つまり、Chrome で「グリーン スクリーン」を再生する際にアルファ チャンネルが考慮されます。証明書を使用して WebM(VP8 および VP9)にエンコードされた動画 アルファ版チャンネル。つまり、ウェブページや画像だけでなく、他の動画の上でも、背景が透明な動画を再生できます。

次の場所でデモを実施: simpl.info/videoalphaややシュールで、周囲も少し粗いけど(文字どおり)理解できるはず!

アルファ動画の作成方法

ここで説明する方法では、オープンソース ツールの Blender と FFmpeg を使用します。

  1. 明るい色の背景など、単色の背景の前で被写体を撮影します 緑のカーテンです
  2. 動画を処理して、透過性のある PNG 静止画像の配列を作成します 分析できます
  3. 動画形式(この場合は WebM)にエンコードします。

他にも Adobe After Effects のような独自のツールで同じ処理を行うことができます。 簡単になります。

1. グリーン スクリーンの動画を作成する

まず被写体を撮影し 背景は「削除」できる透明化されます。

一番簡単な方法は、単色の背景で撮影することです。 遮るものがありません。緑色または青色は最も頻繁に使用される色です。これは主に、肌の色との違いにあります。

グリーン スクリーン動画( クロマキーなど)やさまざまな場所で、 ブルー スクリーンの背景によく似ています。または、クロマキー ペイントで背景をペイントすることもできます。

グレート ギャツビーの VFX 動画では、グリーン スクリーンでどれだけのことを達成できるかを説明しています。

撮影に関するヒント:

  • 被写体に同じ色の服や物がないことを確認する そうしないと、これらは「穴」として表示されます。お見せしましょう。小さいロゴやジュエリーでも問題が生じる場合があります。
  • 明るさが均一で一貫性があり、影は避けます。目的は、 背景の色の範囲が最小になります。 透明性を確保する必要があります
  • 複数の拡散ライトを使用すると、影や背景色が防止されます あります。
  • 光沢のある背景は避けます。マットな表面の方が光を拡散しやすくなります。

2. グリーン スクリーン動画から未加工のアルファ動画を作成します

グリーン スクリーンの動画から未加工のアルファ動画を作成する方法の 1 つを、次の手順で説明します。

  1. グリーン スクリーンの動画を撮影したら、Blender などのオープンソース ツールを使用して、動画を変換できます。 PNG ファイルの配列に変換できます。Blender のカラーキーを使用して グリーンスクリーンを削除し 透明にします(PNG は 必須: アルファ チャンネル データが保持される形式であれば問題ありません)。
  2. オープンソース ツールを使用して、PNG ファイルの配列を未加工の YUVA 動画に変換します。 FFmpeg などを使用できます。

    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 にエンコードできます。

  1. ffmpeg では、WebM アルファ版の動画をエンコードするためのサポートを ffmpeg に追加しました。

    アルファデータを含む入力動画で FFmpeg を使用し、出力形式を次のように設定します。 WebM、およびエンコーディングは、 仕様。(注: 現在、以下のリリース用の git ツリーから最新バージョンの FFmpeg を入手する必要があります。 使用できます)。

    サンプル コマンド:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm-tools の使用:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools は、WebM に関連するシンプルなオープンソース ツールのセットで、WebM プロジェクトの作成者によって管理されています。アルファ版の透明性を備えた WebM 動画を作成するためのツールも含まれます。

    --help を使用してバイナリを実行すると、alpha_encoder でサポートされているオプションのリストが表示されます。

4. Chrome で再生

エンコードされた WebM ファイルを Chrome で再生するには、そのファイルを 指定します。

その方法

Google のエンジニアである Vignesh Venkatasubramanian に、 できます。同氏は、関連する主な課題について次のようにまとめています。

  • VP8 ビットストリームはアルファ チャンネルをサポートしていませんでした。そのために VP8 ビットストリームを中断することなく、 できます。
  • Chrome のレンダラでは、アルファ版の動画をレンダリングできませんでした。
  • Chrome には、複数のハードウェア/GPU デバイス用に複数のレンダリング パスがあります。毎 アルファ動画のレンダリングをサポートするため、レンダリング パスを変更する必要がありました。

動画のアルファ透明度については、次のようなさまざまなユースケースが考えられます。 ゲーム、インタラクティブな動画、コラボレーションによるストーリーテリング(独自の動画を 背景動画/画像)、代替キャラクターやプロットを含む動画、ウェブアプリ オーバーレイ動画コンポーネントを使用します

動画制作をお楽しみください。アルファ版を使用して優れた機能を構築したら、お知らせください 説明します。

便利なリソース