Vidéo sur la transparence alpha dans Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Vidéo sur la transparence alpha dans Chrome

Chrome 31 est désormais compatible avec la transparence alpha de la vidéo dans WebM.

En d'autres termes, Chrome tient compte de la version alpha lors de la lecture d'un fond vert. les vidéos encodées au format WebM (VP8 et VP9) avec un canal alpha. Cela signifie que vous pouvez lire des vidéos à arrière-plan transparent, qu'il s'agisse de pages Web, d'images ou même d'autres vidéos.

Il y a une démo à simpl.info/videoalpha. C'est un peu surréaliste et un peu improbable sur les bords (littéralement), mais vous avez compris l'idée !

Créer des vidéos alpha

La méthode que nous décrivons utilise les outils Open Source Blender et ffmpeg:

  1. Filmez votre sujet devant un arrière-plan de couleur unie, par exemple un rideau vert.
  2. Traiter la vidéo pour créer un tableau d'images fixes au format PNG avec transparence données.
  3. Codez le fichier dans un format vidéo (dans ce cas, WebM).

Il y a et des outils propriétaires permettant d'effectuer le même travail, comme Adobe After Effects, que vous pouvez trouver plus simple.

1. Créer une vidéo avec fond vert

Tout d'abord, filmez votre sujet en faisant en sorte que l'arrière-plan peut être "supprimé" (rendu transparente) par un traitement ultérieur.

La méthode la plus simple consiste à filmer devant un arrière-plan monochrome. comme un écran ou un rideau. Le vert ou le bleu sont les couleurs les plus souvent utilisées, principalement en raison de leur différence avec les carnations.

Il existe plusieurs guides en ligne pour filmer des vidéos au fond vert (également appelé d’écran) et beaucoup d’endroits où acheter du vert et fonds d'écran bleus. Vous pouvez également peindre un arrière-plan avec de la peinture incrustée.

Le clip officiel de Gatsby VFX montre tout ce que vous pouvez faire avec le fond vert.

Quelques conseils pour filmer:

  • Assurez-vous que le sujet ne porte pas de vêtements ni d'objets de la même couleur. comme arrière-plan, sinon ils apparaîtront sous forme de "trous" dans la vidéo finale. Même les petits logos ou les bijoux peuvent être problématiques.
  • Utilisez une luminosité homogène et homogène, et évitez les ombres: l'objectif est d'obtenir la plus petite gamme possible de couleurs pour l'arrière-plan qui doivent être rendues transparentes.
  • L'utilisation de plusieurs lumières diffuses permet d'éviter les ombres et la couleur d'arrière-plan variantes.
  • Évitez les arrière-plans brillants: les surfaces mates diffusent mieux la lumière.

2. Créer une vidéo alpha brute à partir d'une vidéo fond vert

Les étapes suivantes décrivent une façon de créer une vidéo alpha brute à partir de vidéos en fond vert:

  1. Une fois que vous avez filmé une vidéo avec fond vert, vous pouvez la convertir à l'aide d'un outil Open Source tel que Blender. dans un tableau de fichiers PNG avec des données alpha. Utilisez la coloration des couleurs de Blender pour supprimer le fond vert et le rendre transparent. Notez que le format PNG n'est pas obligatoire: tout format qui conserve les données du canal alpha est acceptable.)

  2. Convertir le tableau de fichiers PNG en vidéo YUVA brute à l'aide d'un outil Open Source par exemple ffmpeg:

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

    Vous pouvez également encoder les fichiers directement dans WebM, à l'aide d'une commande ffmpeg. comme ceci:

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

Si vous voulez ajouter du son, vous pouvez utiliser ffmpeg pour le multiplexer cela avec une commande telle que ceci:

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

3. Encoder une vidéo alpha en WebM

Les vidéos alpha brutes peuvent être encodées au format WebM de deux manières.

  1. Avec ffmpeg: nous avons ajouté la compatibilité avec ffmpeg pour encoder les vidéos alpha en WebM.

    Utilisez ffmpeg avec une vidéo d'entrée incluant des données alpha, définissez le format de sortie sur WebM et l'encodage s'effectuera automatiquement au format correct les spécifications. (Remarque: Actuellement, vous devez vous assurer d'obtenir la dernière version de ffmpeg à partir de l'arborescence Git pour cela fonctionne.)

    Exemple de commande:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Avec webm-tools:

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

    webm-tools est un ensemble d'outils Open Source simples liés à WebM, géré par les auteurs du projet WebM, y compris un outil permettant de créer des vidéos WebM avec transparence alpha.

    Exécutez le binaire avec --help pour afficher la liste des options compatibles avec alpha_encoder.

4. Lecture dans Chrome

Pour lire le fichier WebM encodé dans Chrome, il vous suffit de le définir comme source d'une .

Comment ont-ils fait ?

Nous avons discuté avec l'ingénieur Google Vignesh Venkatasubramanian de son travail sur projet. Il a résumé les principales difficultés que cela représentait:

  • Le flux VP8 n'était pas compatible avec le canal alpha. Nous avons donc dû intégrer alpha sans interruption du flux de bits VP8 ni d'existant joueurs.
  • Le moteur de rendu de Chrome n'était pas capable d'afficher les vidéos en version alpha.
  • Chrome propose plusieurs chemins de rendu pour plusieurs appareils/GPU. Toutes les le chemin de rendu devait être modifié pour prendre en charge le rendu des vidéos alpha.

Nous avons identifié de nombreux cas d'utilisation intéressants de la transparence alpha des vidéos: des jeux, des vidéos interactives, des récits collaboratifs (ajoutez votre propre vidéo à une une vidéo ou une image en arrière-plan), des vidéos avec d'autres personnages ou intrigues, applications Web qui utilisent des composants vidéo en superposition.

Bonne réalisation ! Dites-nous si vous développez quelque chose d'extraordinaire avec la version alpha la transparence.

Ressources utiles