Vidéo sur la transparence alpha dans Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Transparence alpha dans les vidéos Chrome

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

En d'autres termes, Chrome tient compte du canal alpha lors de la lecture de vidéos avec écran vert encodées au format WebM (VP8 et VP9) avec un canal alpha. Vous pouvez ainsi lire des vidéos avec des arrière-plans transparents: sur des pages Web, des images ou même d'autres vidéos.

Une démonstration est disponible sur simpl.info/videoalpha. Un peu surréaliste et un peu brut (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 unique, comme un rideau vert vif.
  2. Traitez la vidéo pour créer un tableau d'images fixes PNG avec des données de transparence.
  3. Encodage dans un format vidéo (WebM, dans ce cas).

Il existe également des outils propriétaires qui effectuent la même tâche, comme Adobe After Effects, que vous trouverez peut-être plus simple.

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

Tout d'abord, vous devez filmer votre sujet de manière à ce que tout ce qui se trouve en arrière-plan puisse être "supprimé" (rendu transparent) par un traitement ultérieur.

Le moyen le plus simple est de filmer devant un arrière-plan de couleur unique, comme un écran ou un rideau. Le vert ou le bleu sont les couleurs les plus utilisées, principalement en raison de leur différence avec les tons de peau.

Vous trouverez plusieurs guides en ligne pour filmer des vidéos avec fond vert (également appelé "chroma key") et de nombreux endroits où acheter des fonds verts et bleus. Vous pouvez également peindre un arrière-plan avec la peinture en clé chromatique.

La bande-annonce des effets visuels de Gatsby le magnifique montre tout ce que vous pouvez accomplir avec un fond vert.

Voici quelques conseils pour le tournage:

  • Assurez-vous que votre sujet ne porte pas de vêtements ni d'objets de la même couleur que l'arrière-plan, sinon ils apparaîtront comme des "trous" dans la vidéo finale. Même de petits logos ou bijoux peuvent poser problème.
  • Utilisez un éclairage cohérent et uniforme, et évitez les ombres. L'objectif est d'avoir la plus petite gamme de couleurs possible en arrière-plan, qui devra ensuite être rendue transparente.
  • L'utilisation de plusieurs lumières diffuses permet d'éviter les ombres et les variations de couleur de l'arrière-plan.
  • É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 avec fond vert

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

  1. Une fois que vous avez tourné une vidéo avec un écran vert, vous pouvez utiliser un outil Open Source tel que Blender pour la convertir en tableau de fichiers PNG avec des données alpha. Utilisez la fonctionnalité de masquage par couleur de Blender pour supprimer le fond vert et le rendre transparent. (Notez que le format PNG n'est pas obligatoire: tout format qui préserve les données du canal alpha convient.)

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

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

    Vous pouvez également encoder les fichiers directement au format WebM à l'aide d'une commande ffmpeg comme celle-ci:

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

Si vous souhaitez ajouter de l'audio, vous pouvez utiliser ffmpeg pour le multiplexer à l'aide d'une commande comme celle-ci:

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

3. Encodage de la vidéo alpha au format WebM

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

  1. Avec ffmpeg: nous avons ajouté la prise en charge de ffmpeg pour encoder les vidéos WebM alpha.

    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 sera automatiquement effectué dans le format approprié, conformément aux spécifications. (Remarque: pour que cela fonctionne, vous devez actuellement vous assurer d'obtenir la dernière version de ffmpeg à partir de l'arborescence git.)

    Exemple de commande:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. À l'aide de 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és par les auteurs du projet WebM. Il comprend 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, définissez simplement le fichier comme source d'un élément vidéo.

Comment ont-ils fait ?

Nous avons discuté avec l'ingénieur Google Vignesh Venkatasubramanian de son travail sur le projet. Il a résumé les principaux défis à relever:

  • Le flux de bits VP8 n'était pas compatible avec le canal alpha. Nous avons donc dû intégrer l'alpha sans endommager le flux de bits VP8 et sans endommager les lecteurs existants.
  • Le moteur de rendu de Chrome n'était pas capable d'afficher des vidéos avec alpha.
  • Chrome propose plusieurs chemins de rendu pour plusieurs appareils matériels/GPU. Chaque chemin de rendu a dû être modifié pour prendre en charge le rendu des vidéos alpha.

La transparence alpha vidéo peut être utilisée dans de nombreux cas d'utilisation intéressants : jeux, vidéos interactives, narration collaborative (ajoutez votre propre vidéo à une vidéo/image de fond), vidéos avec des personnages ou des intrigues alternatifs, applications Web qui utilisent des composants vidéo en superposition.

Bon tournage ! N'hésitez pas à nous contacter si vous créez quelque chose d'extraordinaire avec la transparence alpha.

Ressources utiles