Przezroczystość alfa w filmie Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Przejrzystość alfa w filmach w Chrome

Chrome 31 obsługuje teraz przezroczystość filmów w wersji alfa w WebM.

Innymi słowy, Chrome uwzględnia kanał alfa podczas odtwarzania „zielonego ekranu”. filmy zakodowane w formacie WebM (VP8 i VP9) z użyciem tagów kanału alfa. Oznacza to, że możesz odtwarzać filmy z przezroczystym tłem – na stronach internetowych, na obrazach, a nawet na innych filmach.

Dostępna jest wersja demonstracyjna pod adresem simpl.info/videoalpha. Trochę surrealistyczne i trochę nieostre (dosłownie), ale wiesz, o co chodzi.

Jak tworzyć filmy alfa

Opisana przez nas metoda korzysta z narzędzi open source Blender i ffmpeg:

  1. Sfilmuj obiekt na tle jednokolorowego tła, na przykład jasnego zieloną zasłoną.
  2. Przetwórz film, aby utworzyć tablicę nieruchomych obrazów w formacie PNG o przejrzystości i skalowalnych danych.
  3. Zakoduj w formacie wideo (w tym przypadku WebM).

Istnieją Możesz też korzystać z zastrzeżonych narzędzi do tego samego zadania, np. Adobe After Effects. prostsza.

1. Utwórz film na zielonym ekranie

Przede wszystkim musisz sfilmować obiekt w taki sposób, aby wszystko, co jest Tło można usunąć (które są przejrzyste) w ramach późniejszego przetwarzania.

Najprostszym sposobem jest filmowanie na tle jednokolorowego tła, takich jak ekran lub zasłona. Najczęściej używane są kolory zielone i niebieskie, głównie ze względu na różnicę w stosunku do odcieni skóry.

Dostępnych jest kilka przewodników online dotyczących nagrywania filmów na zielonym ekranie (nazywanych też chroma Key) i wiele miejsc, w których można kupić tła na niebieskim ekranie. Tło możesz też pomalować za pomocą farby Key Chrome.

Film z kanału Great Gatsby VFX pokazuje, jak wiele można osiągnąć dzięki zielonemu ekranowi.

Kilka wskazówek dotyczących filmowania:

  • Upewnij się, że na zdjęciu nie ma ubrań ani przedmiotów tego samego koloru. jako tło. W przeciwnym razie będą wyświetlane jako „dziury”. w ostatnim filmie. Nawet małe logo czy biżuteria mogą być problematyczne.
  • Stosuj jednolite, równomierne oświetlenie i unikaj cieni. Celem możliwie najmniejszy zakres kolorów tła, niezbędna jest przejrzystość.
  • Stosowanie wielu rozproszonych świateł pomaga uniknąć cieni i koloru tła odmian.
  • Unikaj błyszczącego tła: matowe powierzchnie lepiej przenikają światło.

2. Utwórz nieprzetworzony film alfa z filmu na zielonym ekranie

Poniższe kroki opisują jeden ze sposobów tworzenia filmu w wersji alfa z filmów na zielonym ekranie:

  1. Gdy nagrasz film, możesz użyć narzędzia open source, np. Blender, aby go przekonwertować. do tablicy plików PNG z danymi w wersji alfa. Kluczowanie kolorów w narzędziu Blender usuń zielony ekran i ustaw jego przezroczystość. (Pamiętaj, że format PNG nie obowiązkowe: każdy format, który zachowuje dane kanału alfa, jest dozwolony).

  2. Przekonwertuj tablicę plików PNG na nieprzetworzony film YUVA za pomocą narzędzia open source np. ffmpeg:

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

    Możesz też zakodować pliki bezpośrednio do WebM, używając polecenia ffmpeg podobny do tego:

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

Jeśli chcesz dodać dźwięk, możesz to zrobić za pomocą polecenia ffmpeg, np. to:

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

3. Zakoduj film alfa do WebM

Nieprzetworzone filmy alfa można zakodować w WebM na dwa sposoby.

  1. W przypadku formatu FFmpeg: dodaliśmy obsługę plików FFmpeg do kodowania filmów WebM w wersji alfa.

    Użyj formatu FFmpeg z filmem wejściowym zawierającym dane alfa, ustaw format wyjściowy na WebM, a kodowanie zostanie automatycznie przeprowadzone w prawidłowym formacie, zgodnie z ze specyfikacją. (Uwaga: obecnie musisz pobrać najnowszą wersję FFmpeg z drzewa Git tak, aby działać).

    Przykładowe polecenie:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Korzystanie z Webm-tools:

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

    webm-tools to zestaw prostych narzędzi open source związanych z WebM, obsługiwanych przez autorów projektu WebM, w tym narzędzia do tworzenia filmów WebM z przejrzystością w wersji alfa.

    Uruchom plik binarny z kodem --help, aby zobaczyć listę opcji obsługiwanych przez koder alpha_encoder.

4. Odtwarzanie w Chrome

Aby odtworzyć w Chrome zakodowany plik WebM, ustaw go jako źródło wideo.

Jak im się to udało?

Spotkaliśmy się z inżynierem Google, Vigneshem Venkatasubramaniana, w projektach AI. Podsumował kluczowe wyzwania:

  • Strumień bitów VP8 nie miał obsługi kanału alfa. Musieliśmy więc uwzględnić alfa bez uszkodzenia strumienia bitowego VP8 i bez uszkodzenia istniejącego graczy.
  • Mechanizm renderowania Chrome nie był w stanie renderować filmów w wersji alfa.
  • Chrome ma wiele ścieżek renderowania dla różnych urządzeń/urządzeń GPU. Co trzeba było zmienić ścieżkę renderowania, by obsługiwać renderowanie filmów alfa.

Istnieje wiele ciekawych przypadków użycia przejrzystości filmów w wersji alfa: gry, interaktywne filmy wideo, opowiadanie historii opartej na współpracy (dodaj własny film wideo film lub obraz tła), filmy z alternatywnymi postaciami lub fabułą, aplikacje internetowe które korzystają z nakładek wideo z komponentami.

Powodzenia w tworzeniu filmów! Daj nam znać, jeśli stworzysz coś niesamowitego dzięki wersji alfa. i przejrzystością.

Przydatne materiały