Alfatransparantie in Chrome-video

Sam Dutton
François Beaufort
François Beaufort
GitHub

Alfatransparantie in Chrome-video

Chrome 31 ondersteunt nu video-alfa-transparantie 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 u video's met transparante achtergronden kunt afspelen: over webpagina's, afbeeldingen of zelfs andere video's.

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

Hoe maak je alfavideo's

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

  1. Film uw onderwerp tegen een achtergrond met één enkele kleur, bijvoorbeeld een felgroen gordijn.
  2. Verwerk de video om een ​​reeks PNG-afbeeldingen met transparantiegegevens te maken.
  3. Coderen naar een videoformaat (in dit geval WebM).

Er zijn ook bedrijfseigen hulpmiddelen die hetzelfde kunnen doen, zoals Adobe After Effects , maar die u wellicht eenvoudiger vindt.

1. Maak een greenscreenvideo

Allereerst moet u uw onderwerp zo filmen dat alles op de achtergrond door middel van verdere bewerking 'verwijderd' (transparant gemaakt) kan worden.

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

Er zijn verschillende online handleidingen beschikbaar voor het filmen van greenscreen-video's (ook wel chroma key genoemd) en veel plekken waar je greenscreen- en bluescreen-achtergronden kunt kopen. Je kunt er ook voor kiezen om een ​​achtergrond te verven met chroma key paint .

De VFX-reel van The Great Gatsby laat zien hoeveel je met een greenscreen kunt bereiken.

Enkele tips voor het filmen:

  • Zorg ervoor dat je onderwerp geen kleding of voorwerpen draagt ​​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.
  • Zorg voor een consistente, gelijkmatige belichting en voorkom schaduwen. Het doel is om een ​​zo klein mogelijk kleurenbereik op de achtergrond te hebben, dat vervolgens transparant gemaakt moet worden.
  • Door meerdere diffuse lampen te gebruiken, voorkomt u schaduwen en kleurverschillen in de achtergrond.
  • Vermijd glanzende achtergronden: matte oppervlakken verspreiden het licht beter.

2. Maak een ruwe alfavideo van een greenscreenvideo

De volgende stappen beschrijven een manier om een ​​onbewerkte alfavideo te maken van greenscreen-video's:

  1. Nadat je een greenscreenvideo hebt opgenomen, kun je een opensourcetool zoals Blender gebruiken om de video te converteren naar een reeks PNG-bestanden met alfakanaalgegevens. Gebruik Blender's kleurcodering om het greenscreen te verwijderen en transparant te maken. (Houd er rekening mee 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 opensourcetool zoals ffmpeg:

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

    U kunt de bestanden ook rechtstreeks naar WebM coderen met een ffmpeg-opdracht zoals deze:

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

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

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

3. Alfavideo coderen naar WebM

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

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

    Gebruik ffmpeg met een invoervideo met alfagegevens, stel het uitvoerformaat in op WebM en de codering wordt automatisch uitgevoerd in het juiste formaat volgens de specificaties. (Let op: je moet er momenteel wel 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 set eenvoudige open source-hulpmiddelen gerelateerd aan WebM, onderhouden door de auteurs van het WebM Project. Hieronder valt ook een hulpmiddel voor het maken van WebM-video's met alfatransparantie.

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

4. Afspelen in Chrome

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

Hoe hebben ze dat gedaan?

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

  • De VP8-bitstream bood geen ondersteuning voor alfakanalen. We moesten dus alfakanalen integreren zonder de VP8-bitstream en bestaande spelers te verstoren.
  • De renderer van Chrome kon geen video's met alfa weergeven.
  • Chrome heeft meerdere renderpaden voor meerdere hardware/GPU-apparaten. Elk renderpad moest worden aangepast om het renderen van alfavideo's te ondersteunen.

Er zijn talloze interessante toepassingsgevallen te bedenken voor video-alfatransparantie: games, interactieve video's, gezamenlijk verhalen vertellen (je eigen video toevoegen aan een achtergrondvideo/-afbeelding), video's met alternatieve personages of verhaallijnen, webapps die gebruikmaken van overlay-videocomponenten.

Veel plezier met filmen! Laat ons weten of je iets fantastisch hebt gemaakt met alfatransparantie.

Nuttige bronnen