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ść alfa w formatach WebM.

Innymi słowy, Chrome uwzględnia kanał alfa podczas odtwarzania filmów z zielonym ekranem zakodowanych w formacie WebM (VP8 i VP9) z kanałem alfa. Oznacza to, że możesz odtwarzać filmy z przezroczystym tłem: na stronach internetowych, obrazach, a nawet innych filmach.

Demo znajdziesz na stronie simpl.info/videoalpha. Trochę surrealistyczne i trochę niewykończone (dosłownie), ale rozumiesz, o co chodzi.

Jak tworzyć filmy alfa

Opisujemy metodę, która wykorzystuje narzędzia open source Blender i ffmpeg:

  1. Nagraj obiekt na jednolitym tle, np. na tle jasnej zielonej zasłony.
  2. Przetworzyć film, aby utworzyć tablicę obrazów PNG z danymi o przezroczystości.
  3. Kodowanie do formatu wideo (w tym przypadku WebM).

Istnieją też narzędzia firmowe, które służą do tego samego, np. Adobe After Effects, które mogą być prostsze w użyciu.

1. Tworzenie filmu z zielonym ekranem

Przede wszystkim musisz sfilmować obiekt w taki sposób, aby wszystko, co znajduje się w tle, można było „usunąć” (uczynić przezroczystym) podczas późniejszego przetwarzania.

Najłatwiej jest nagrywać przed jednokolorowym tłem, takim jak ekran lub zasłona. Najczęściej używane są kolory zielony i niebieski, głównie ze względu na ich odrętość od odcieni skóry.

W internecie znajdziesz wiele przewodników dotyczących filmowania za pomocą zielonego ekranu (zwanego też chroma key), a także wiele miejsc, w których możesz kupić zielone i niebieskie ekrany. Możesz też pomalować tło za pomocą malowania chromina.

The Great Gatsby VFX reel pokazuje, ile można osiągnąć dzięki zielonej ścianie.

Wskazówki dotyczące filmowania:

  • Upewnij się, że ubrania lub obiekty nie mają takiego samego koloru co tło, ponieważ w przeciwnym razie będą wyglądać jak „dziury” w gotowym filmie. Nawet małe logo lub biżuteria mogą stanowić problem.
  • Używaj spójnego, równomiernego oświetlenia i unikaj cieni. Celem jest uzyskanie jak najmniejszego zakresu kolorów na tle, które później trzeba będzie uczynić przezroczystym.
  • Użycie kilku rozproszonych źródeł światła pomaga uniknąć cieni i zmian koloru tła.
  • Unikaj błyszczących tła: matowe powierzchnie lepiej rozpraszają światło.

2. Tworzenie surowego filmu alfa z filmu z zielonym ekranem

Poniżej znajdziesz opis jednego ze sposobów tworzenia surowego filmu z alfa kanałem z filmów z zielonym ekranem:

  1. Po nagraniu filmu z zielonym ekranem możesz użyć narzędzia open source, takiego jak Blender, aby przekonwertować film na tablicę plików PNG z danymi alfa. Użyj funkcji kolorowania w Blenderze, aby usunąć zielony ekran i uczynić go przezroczystym. (Pamiętaj, że format PNG nie jest wymagany: dowolny format, który zachowuje dane kanału alfa, jest odpowiedni).

  2. Za pomocą narzędzia open source, takiego jak ffmpeg, przekonwertuj tablicę plików PNG na nieprzetworzony film YUVA:

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

    Możesz też zakodować pliki bezpośrednio w formacie WebM, używając polecenia ffmpeg w ten sposób:

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

Jeśli chcesz dodać dźwięk, możesz użyć ffmpeg, aby zmuxować go za pomocą polecenia takiego jak to:

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

3. Kodowanie przezroczystego wideo do formatu WebM

Filmy w formacie surowego alfa można zakodować do formatu WebM na 2 sposoby.

  1. W przypadku ffmpeg: dodaliśmy obsługę ffmpeg do kodowania filmów WebM z alfa.

    Użyj ffmpeg z wejściowym filmem zawierającym dane alfa, ustaw format wyjściowy na WebM, a kodowanie zostanie automatycznie wykonane we właściwym formacie zgodnie ze specyfikacją. (Uwaga: aby to zadziałało, musisz mieć najnowszą wersję ffmpeg z drzewa git).

    Przykładowe polecenie:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Za pomocą webm-tools:

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

    webm-tools to zestaw prostych narzędzi typu open source związanych z formatem WebM, które są utrzymywane przez autorów projektu WebM. Zawiera on m.in. narzędzie do tworzenia filmów WebM z przezroczystością alfa.

    Uruchom plik binarny z opcją --help, aby wyświetlić listę opcji obsługiwanych przez alpha_encoder.

4. Odtwarzanie w Chrome

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

Jak to zrobili?

Rozmawialiśmy z Vigneshem Venkatasubramanianem, inżynierem z Google, o jego pracy nad tym projektem. Podsumował on najważniejsze problemy:

  • Strumień bitów VP8 nie obsługiwał kanału alfa. Musieliśmy więc wdrożyć alpha bez zakłócania strumienia bitów VP8 i bez zakłócania dotychczasowych odtwarzaczy.
  • Renderowanie filmów z kanałem alfa nie było możliwe w renderze Chrome.
  • Chrome ma wiele ścieżek renderowania dla różnych urządzeń z procesorem graficznym. Aby umożliwić renderowanie filmów z alfa kanałem, trzeba było zmienić wszystkie ścieżki renderowania.

Możemy wymyślić wiele ciekawych zastosowań przezroczystości alfa w filmach: gry, interaktywne filmy, wspólne opowiadanie historii (dodawanie własnych filmów do obrazu tła), filmy z alternatywnymi postaciami lub fabułami, aplikacje internetowe korzystające z przekładających się elementów wideo.

Miłego tworzenia filmów! Daj nam znać, jeśli stworzysz coś niesamowitego za pomocą funkcji alfaprzezroczystości.

Przydatne materiały