Alpha-Transparenz in Chrome-Video

Sam Dutton
François Beaufort
François Beaufort
GitHub

Alphatransparenz in Chrome-Videos

Chrome 31 unterstützt jetzt Alphatransparenz bei WebM-Videos.

Mit anderen Worten: Chrome berücksichtigt den Alphakanal bei der Wiedergabe von Greenscreen-Videos, die mit einem Alphakanal in WebM (VP8 und VP9) codiert wurden. So können Sie Videos mit transparentem Hintergrund abspielen – über Webseiten, Bilder oder sogar andere Videos.

Eine Demo finden Sie unter simpl.info/videoalpha. Etwas surreal und ein bisschen rau (im wahrsten Sinne des Wortes), aber Sie verstehen die Idee!

Alpha-Videos erstellen

Bei der von uns beschriebenen Methode werden die Open-Source-Tools Blender und ffmpeg verwendet:

  1. Filmen Sie Ihr Motiv vor einem einfarbigen Hintergrund, z. B. einem knallgrünen Vorhang.
  2. Verarbeite das Video, um eine Reihe von PNG-Standbildern mit Transparenzdaten zu erstellen.
  3. Codieren Sie die Datei in ein Videoformat (in diesem Fall WebM).

Es gibt auch proprietäre Tools, die denselben Zweck erfüllen, z. B. Adobe After Effects, das Sie möglicherweise einfacher finden.

1. Greenscreen-Videos erstellen

Zuerst müssen Sie Ihr Motiv so filmen, dass alles im Hintergrund durch die nachfolgende Verarbeitung „entfernt“ (transparent gemacht) werden kann.

Am einfachsten ist es, vor einem einfarbigen Hintergrund zu filmen, z. B. vor einem Vorhang oder einem Bildschirm. Grün oder Blau werden am häufigsten verwendet, vor allem aufgrund ihrer Unterschiede zu Hauttönen.

Es gibt mehrere Anleitungen online zum Aufnehmen von Greenscreen-Videos (auch als Chroma-Key bezeichnet) und viele Möglichkeiten, Green- und Bluescreen-Hintergründe zu kaufen. Alternativ kannst du einen Hintergrund mit Chroma-Key-Paint malen.

Der VFX-Reel zu „Der große Gatsby“ zeigt, was mit einem Greenscreen alles möglich ist.

Tipps zum Filmen:

  • Achten Sie darauf, dass das Motiv keine Kleidung oder Gegenstände hat, die dieselbe Farbe wie der Hintergrund haben, da diese sonst im fertigen Video als „Löcher“ erscheinen. Auch kleine Logos oder Schmuck können problematisch sein.
  • Verwenden Sie eine gleichmäßige Beleuchtung und vermeiden Sie Schatten: Ziel ist es, den kleinstmöglichen Farbbereich im Hintergrund zu haben, der später transparent gemacht werden muss.
  • Mit mehreren Diffusleuchten lassen sich Schatten und Farbabweichungen im Hintergrund vermeiden.
  • Vermeiden Sie glänzende Hintergründe: Mattierte Oberflächen zerstreuen das Licht besser.

2. Rohes Alpha-Video aus Greenscreen-Video erstellen

In den folgenden Schritten wird beschrieben, wie du ein Roh-Alpha-Video aus Greenscreen-Videos erstellen kannst:

  1. Nachdem du ein Greenscreen-Video aufgenommen hast, kannst du es mit einem Open-Source-Tool wie Blender in eine Reihe von PNG-Dateien mit Alpha-Daten konvertieren. Entferne den Greenscreen mit der Farbschlüsselung von Blender und mache ihn transparent. PNG ist nicht zwingend erforderlich. Jedes Format, das Alphakanaldaten beibehält, ist in Ordnung.

  2. Konvertieren Sie die PNG-Dateien mit einem Open-Source-Tool wie ffmpeg in ein RAW-YUVA-Video:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    Alternativ kannst du die Dateien auch direkt mit einem ffmpeg-Befehl in WebM codieren:

    ffmpeg -i image%04d.png output.webm

Wenn du Audio hinzufügen möchtest, kannst du mit ffmpeg einen Befehl wie diesen verwenden:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. Alpha-Video in WebM codieren

Rohe Alpha-Videos können auf zwei Arten in WebM-Dateien codiert werden.

  1. ffmpeg: Wir haben ffmpeg um die Unterstützung für das Codieren von WebM-Alpha-Videos erweitert.

    Verwende ffmpeg mit einem Eingabevideo mit Alpha-Daten, setze das Ausgabeformat auf WebM und die Codierung erfolgt automatisch im richtigen Format gemäß der Spezifikation. Hinweis: Du musst derzeit die neueste Version von ffmpeg aus dem Git-Tree herunterladen, damit dies funktioniert.

    Beispielbefehl:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Mit webm-tools:

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

    webm-tools ist eine Reihe einfacher Open-Source-Tools im Zusammenhang mit WebM, die von den Autoren des WebM-Projekts gepflegt werden. Dazu gehört auch ein Tool zum Erstellen von WebM-Videos mit Alphatransparenz.

    Führe die Binärdatei mit --help aus, um eine Liste der von alpha_encoder unterstützten Optionen aufzurufen.

4. Wiedergabe in Chrome

Wenn Sie die codierte WebM-Datei in Chrome abspielen möchten, legen Sie sie einfach als Quelle eines Videoelements fest.

Wie haben sie das geschafft?

Wir haben mit dem Google-Entwickler Vignesh Venkatasubramanian über seine Arbeit am Projekt gesprochen. Er fasste die wichtigsten Herausforderungen zusammen:

  • Der VP8-Bitstream unterstützte keinen Alphakanal. Daher mussten wir Alpha einbinden, ohne den VP8-Bitstream und bestehende Player zu beeinträchtigen.
  • Der Renderer von Chrome konnte keine Videos mit Alpha rendern.
  • Chrome hat mehrere Renderingpfade für mehrere Hardware-/GPU-Geräte. Jeder Renderingpfad musste geändert werden, um das Rendern von Alphavideos zu unterstützen.

Wir können uns viele interessante Anwendungsfälle für die Alphatransparenz von Videos vorstellen: Spiele, interaktive Videos, kollaboratives Storytelling (eigenes Video in ein Hintergrundvideo/-bild einfügen), Videos mit alternativen Charakteren oder Handlungen, Webanwendungen mit Overlay-Videokomponenten.

Viel Spaß beim Erstellen von Filmen! Lasst uns wissen, wenn ihr etwas Tolles mit Alphatransparenz erstellt habt.

Hilfreiche Ressourcen