Vidéo sur la transparence alpha dans Chrome
Chrome 31 est désormais compatible avec la transparence alpha des vidéos dans WebM.
En d'autres termes, Chrome prend en compte la version alpha lors de la lecture de vidéos de type écran vert encodées au format WebM (VP8 et VP9) avec une version alpha. Vous pouvez ainsi lire des vidéos à arrière-plan transparent: sur des pages Web, des images ou même d'autres vidéos.
Une démonstration est disponible à l'adresse simpl.info/videoalpha. Plutôt surréaliste et légèrement approximative, 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:
- Filmez votre sujet devant un arrière-plan uni, par exemple un rideau vert vif.
- Traitez la vidéo pour créer un tableau d'images fixes PNG avec des données de transparence.
- Encodez dans un format vidéo (dans ce cas, WebM).
Il existe également des outils propriétaires permettant d'effectuer le même travail, tels que Adobe After Effects, que vous pouvez trouver plus simple.
1. Réaliser une vidéo avec un fond vert
Tout d'abord, vous devez filmer votre sujet de sorte que tout ce qui se trouve en arrière-plan puisse être "supprimé" (rendu transparent) par un traitement ultérieur.
Pour ce faire, le moyen le plus simple consiste à filmer devant un arrière-plan uni, 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 sur fond vert (également appelé "chroma key") et de nombreux magasins pour acheter des arrière-plans vert et bleu. Vous pouvez également peindre un arrière-plan à l'aide de peinture chromatique.
The Great Gatsby VFX reel montre tout ce qu'il est possible de faire avec un fond vert.
Quelques conseils pour le tournage:
- Assurez-vous que le sujet ne porte pas de vêtements ou d'objets de la même couleur que l'arrière-plan, sinon ils apparaîtront sous forme de "trous" dans la vidéo finale. Même les logos ou les bijoux de petite taille peuvent poser problème.
- Utilisez un éclairage cohérent et uniforme, et évitez les ombres: l'objectif est d'avoir la plus petite plage possible de couleurs pour l'arrière-plan, qui devront ensuite être rendues transparentes.
- L'utilisation de plusieurs lumières diffusées permet d'éviter les ombres et les variations de couleur d'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 fond vert
Les étapes suivantes décrivent une façon de créer une vidéo alpha brute à partir de vidéos fond vert:
- Une fois que vous avez filmé une vidéo en fond vert, vous pouvez utiliser un outil Open Source tel que Blender pour la convertir en un tableau de fichiers PNG avec des données alpha. Utilisez le coloris de Blender pour supprimer l'écran 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 accepté.
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.rawVous pouvez également encoder les fichiers directement dans WebM à l'aide d'une commande ffmpeg comme celle-ci:
ffmpeg -i image%04d.png output.webm
Si vous souhaitez ajouter du contenu audio, vous pouvez utiliser ffmpeg dans un multiplexeur à l'aide d'une commande semblable à celle-ci:
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 dans WebM de deux manières.
Avec ffmpeg: nous avons ajouté la compatibilité avec 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é au 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.webmAvec les outils webm:
git clone https://chromium.googlesource.com/webm/libvpxwebm-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 une transparence alpha.
Exécutez le binaire avec
--helppour 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'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 impliqués:
- Le flux de bits VP8 n'était pas compatible avec la version alpha. Nous avons donc dû intégrer la version alpha sans rompre le flux de bits VP8 et sans interrompre les joueurs existants.
- Le moteur de rendu de Chrome ne permettait pas d'afficher les vidéos en version alpha.
- Chrome propose plusieurs chemins de rendu pour plusieurs appareils/GPU. Chaque chemin de rendu a dû être modifié pour permettre l'affichage des vidéos alpha.
Nous pouvons citer de nombreux cas d'utilisation intéressants de la transparence alpha pour les vidéos : jeux, vidéos interactives, narration collaborative (ajoutez votre propre vidéo à une vidéo/image de fond), vidéos avec des personnages ou intrigues alternatives, applications Web qui utilisent des composants vidéo en superposition.
Bonne réalisation ! Dites-nous si vous créez quelque chose d'exceptionnel avec la transparence alpha.