Przezroczystość alfa w filmie Chrome

[imię]
François Beaufort
François Beaufort
GitHub

Przezroczystość alfa w filmie 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 filmów z „zielonego ekranu” zakodowanego w formacie WebM (VP8 i VP9) za pomocą kanału alfa. Oznacza to, że filmy możesz odtwarzać z przezroczystym tłem: nad stronami internetowymi, obrazami, a nawet innymi filmami.

Wersja demonstracyjna jest dostępna na stronie simpl.info/videoalpha. Raczej surrealistyczne i trochę chwytliwe (dosłownie), ale rozumiesz, 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, np. jasnozielonej zasłony.
  2. Przetwórz film, aby utworzyć serię nieruchomych obrazów w formacie PNG z danymi przezroczystości.
  3. Zakoduj do formatu wideo (w tym przypadku WebM).

Istnieją również zastrzeżone narzędzia do tego samego zadania, np. Adobe After Effects, które mogą być prostsze.

1. Nagraj film z zielonym ekranem

Przede wszystkim musisz nakręcić film tak, aby wszystko, co znajduje się w tle, mogło zostać „usunięte” (przezroczyste) w trakcie dalszego przetwarzania filmu.

Najprostszym sposobem jest filmowanie na jednokolorowym tle, np. na ekranie lub zasłonie. Najczęściej używany jest kolor zielony lub niebieski, głównie ze względu na różnice w odcieniach skóry.

W internecie jest kilka przewodników online dotyczących nagrywania filmów zielonych (tzw. zielone tło) i wielu miejsc, w których można kupić zielone i niebieskie tła. Tło możesz też pomalować kolorem chroma key.

Koledy wirtualne Great Gatsby pokazują, jak wiele można osiągnąć dzięki zielonym ekranie.

Kilka wskazówek dotyczących filmowania:

  • Upewnij się, że filmowana osoba nie ma ubrań ani obiektów w tym samym kolorze co tło. W przeciwnym razie w ostatnim filmie będą widoczne jako „dziury”. Nawet małe logo czy biżuteria mogą sprawiać problemy.
  • Stosuj spójne i równomierne oświetlenie oraz unikaj cieni. Celem jest uzyskanie jak najmniejszego zakresu kolorów tła, które następnie muszą być przezroczyste.
  • Stosowanie wielu rozproszonych źródeł światła pomaga uniknąć cieni i zmienności kolorów tła.
  • Unikaj błyszczących tła: matowe powierzchnie lepiej rozproszą światło.

2. Utwórz nieprzetworzony film alfa na podstawie filmu zielonego

Poniżej opisujemy jeden ze sposobów tworzenia nieprzetworzonego filmu alfa na podstawie filmów z zielonym ekranem:

  1. Po nakręceniu filmu z zielonym ekranem możesz użyć narzędzia open source, np. Blender, do przekonwertowania go na serię plików PNG z danymi w wersji alfa. Użyj opcji kolorowania Blendera, aby usunąć zielony ekran i zwiększyć jego przezroczystość. (Pamiętaj, że plik PNG nie jest wymagany: każdy format, który pozwala zachować dane kanałów alfa, jest odpowiedni).

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

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

    Możesz też zakodować pliki bezpośrednio w WebM za pomocą polecenia ffmpeg:

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

Jeśli chcesz dodać dźwięk, możesz użyć narzędzia ffmpeg, aby zduplikować go za pomocą polecenia podobnego do tego:

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

3. Zakoduj film alfa w formacie WebM

Nieprzetworzone filmy alfa można kodować do formatu WebM na dwa sposoby.

  1. Format FFmpeg: dodaliśmy obsługę formatu FFmpeg w celu kodowania filmów WebM w wersji alfa.

    Użyj pliku FFmpeg z filmem wejściowym zawierającym dane w wersji alfa, ustaw format wyjściowy na WebM, a kodowanie będzie automatycznie wykonywane w prawidłowym formacie zgodnym ze specyfikacją. (Uwaga: aby to umożliwić, musisz pobrać najnowszą wersję pliku ffmpeg z drzewa Git).

    Przykładowe polecenie:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Przy użyciu webm-tools:

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

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

    Uruchom plik binarny za pomocą polecenia --help, aby zobaczyć listę opcji obsługiwanych przez kod alpha_encoder.

4. Odtwarzanie w Chrome

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

Jak to zrobili?

O pracy nad tym projektem rozmawialiśmy z inżynierem Google Vigneshem Venkatasubramanianem. Podsumował najważniejsze wyzwania:

  • Strumień bitowy VP8 nie obsługiwał kanału alfa. Musieliśmy więc zastosować wersję alfa bez przerywania strumienia bitowego VP8 i nie zakłócając istniejących odtwarzaczy.
  • Mechanizm renderowania Chrome nie był w stanie renderować filmów w wersji alfa.
  • Chrome ma wiele ścieżek renderowania dla wielu urządzeń sprzętowych i GPU. Każdą ścieżkę renderowania trzeba było zmienić, aby obsługiwała renderowanie filmów w wersji alfa.

Istnieje wiele ciekawych przypadków użycia przejrzystości filmów w fazie alfa: gry, filmy interaktywne, wspólne opowiadanie historii (dodawanie własnego filmu do filmu/obrazu w tle), filmy z alternatywnymi postaciami lub fabułami, aplikacje internetowe korzystające z nakładek wideo.

Udanego tworzenia filmów! Daj nam znać, jeśli stworzyć coś niesamowitego dzięki przejrzystości alfa.

Przydatne materiały