Alfatransparantie in Chrome-video

Sam Dutton
François Beaufort
François Beaufort
GitHub

Alfatransparantie in Chrome-video

Chrome 31 ondersteunt nu video-alfatransparantie in WebM.

Met andere woorden, Chrome houdt rekening met het alfakanaal bij het afspelen van ' green screen' -video's die zijn gecodeerd naar WebM ( VP8 en VP9 ) met een alfakanaal. Dit betekent dat je video's met een transparante achtergrond kunt afspelen: over webpagina's, afbeeldingen of zelfs andere video's.

Er is een demo op simpl.info/videoalpha . Enigszins surrealistisch en een beetje ruw aan de randen (letterlijk), maar je begrijpt het idee!

Hoe alpha-video's te maken

De methode die wij beschrijven maakt gebruik van de open source tools Blender en ffmpeg:

  1. Film uw onderwerp voor een achtergrond in één kleur, zoals een heldergroen gordijn.
  2. Verwerk de video om een ​​reeks PNG-afbeeldingen met transparantiegegevens samen te stellen.
  3. Codeer naar een videoformaat (in dit geval WebM).

Er zijn ook eigen tools om hetzelfde werk te doen, zoals Adobe After Effects , dat u misschien eenvoudiger vindt.

1. Maak een green screen-video

Allereerst moet je je onderwerp zo filmen dat alles op de achtergrond door nabewerking kan worden 'verwijderd' (transparant gemaakt).

De eenvoudigste manier om dit te doen is door te filmen voor een achtergrond in één kleur, zoals een scherm of gordijn. Groen of blauw zijn de meest gebruikte kleuren, vooral vanwege hun verschil met huidtinten.

Er zijn verschillende handleidingen online voor het filmen van groenschermvideo (ook bekend als chroma key) en er zijn veel plaatsen waar u groene en blauwe schermachtergronden kunt kopen. Als alternatief kunt u een achtergrond schilderen met Chromakey-verf .

De Great Gatsby VFX-reel laat zien hoeveel er kan worden bereikt met een groen scherm.

Enkele tips voor het filmen:

  • Zorg ervoor dat je onderwerp geen kleding of voorwerpen heeft die dezelfde kleur hebben als de achtergrond, anders verschijnen deze als 'gaten' in de uiteindelijke video. Zelfs kleine logo's of sieraden kunnen problematisch zijn.
  • Gebruik consistente, gelijkmatige verlichting en vermijd schaduwen: het doel is om een ​​zo klein mogelijk kleurenbereik op de achtergrond te hebben dat vervolgens transparant moet worden gemaakt.
  • Het gebruik van meerdere diffuus licht helpt schaduwen en achtergrondkleurvariaties te voorkomen.
  • Vermijd glanzende achtergronden: matte oppervlakken verspreiden het licht beter.

2. Maak onbewerkte alfavideo van groenschermvideo

De volgende stappen beschrijven één manier om een ​​onbewerkte alfavideo te maken van groenschermvideo's:

  1. Nadat u een groen schermvideo hebt opgenomen, kunt u een open source-tool zoals Blender gebruiken om de video naar een reeks PNG-bestanden met alfagegevens te converteren. Gebruik de kleurtoetsen van Blender om het groene scherm te verwijderen en transparant te maken. (Merk op dat PNG niet verplicht is: elk formaat dat alfakanaalgegevens behoudt, is prima.)

  2. Converteer de reeks PNG-bestanden naar een onbewerkte YUVA-video met behulp van een open source-tool zoals ffmpeg:

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

    U kunt de bestanden ook rechtstreeks naar WebM coderen, met behulp van een ffmpeg-opdracht als deze:

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

Als je audio wilt toevoegen, kun je ffmpeg gebruiken om dat te muxen met een commando als dit:

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

3. Codeer alfavideo naar WebM

Ruwe alfavideo's kunnen op twee manieren naar WebM worden gecodeerd.

  1. Met ffmpeg: we hebben ondersteuning toegevoegd aan ffmpeg om WebM alpha-video's te coderen.

    Gebruik ffmpeg met een invoervideo inclusief alfagegevens, stel het uitvoerformaat in op WebM en de codering wordt automatisch uitgevoerd in het juiste formaat volgens de specificaties. (Opmerking: je moet er momenteel voor zorgen dat je de nieuwste versie van ffmpeg uit de git tree haalt om dit te laten werken.)

    Voorbeeldopdracht:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Webm-tools gebruiken:

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

    webm-tools is een reeks eenvoudige open source-tools gerelateerd aan WebM, onderhouden door de auteurs van het WebM Project, inclusief een tool voor het maken van WebM-video's met alfa-transparantie.

    Voer het binaire bestand uit met --help om een ​​lijst met opties te zien die worden ondersteund door alpha_encoder.

4. Afspelen in Chrome

Om het gecodeerde WebM-bestand in Chrome af te spelen, stelt u eenvoudigweg het bestand in als bron van een video-element.

Hoe deden ze het?

We spraken met Google-ingenieur Vignesh Venkatasubramanian over zijn werk aan het project. Hij vatte de belangrijkste uitdagingen samen:

  • De VP8-bitstream had geen ondersteuning voor alfakanaal. We moesten dus alpha integreren zonder de VP8-bitstream te verbreken en zonder bestaande spelers te verbreken.
  • De renderer van Chrome kon geen video's met alfa weergeven.
  • Chrome heeft meerdere weergavepaden voor meerdere hardware-/GPU-apparaten. Elk weergavepad moest worden gewijzigd om de weergave van alfavideo's te ondersteunen.

We kunnen veel interessante gebruiksscenario's voor video-alfa-transparantie bedenken: games, interactieve video's, gezamenlijke verhalen vertellen (voeg je eigen video toe aan een achtergrondvideo/afbeelding), video's met alternatieve karakters of plots, webapps die overlay-videocomponenten gebruiken.

Veel filmplezier! Laat het ons weten als je iets geweldigs bouwt met alfa-transparantie.

Nuttige bronnen