Transparencia alfa en video de Chrome
Chrome 31 ahora admite la transparencia alfa de videos en WebM.
En otras palabras, Chrome tiene en cuenta el canal alfa cuando reproduce videos en la “pantalla verde” codificados en WebM (VP8 y VP9) con un canal alfa. Esto significa que puedes reproducir videos con fondos transparentes: sobre páginas web, imágenes o incluso otros videos.
Puedes encontrar una demostración en simpl.info/videoalpha. Algo surrealista y un poco áspera (literalmente), pero en realidad es la idea.
Cómo crear videos alfa
El método que describimos usa las herramientas de código abierto Blender y ffmpeg:
- Filma a tu sujeto frente a un fondo de un solo color, como una cortina verde brillante.
- Procesa el video para crear un array de imágenes fijas en PNG con datos de transparencia.
- Codifica en un formato de video (en este caso, WebM).
También existen herramientas de propiedad para hacer el mismo trabajo, como Adobe After Effects, que puede que te parezca más simple.
1. Crea un video de pantalla verde
En primer lugar, debes grabar al sujeto de manera tal que se pueda “quitar” (hacer transparente) todo el contenido de fondo mediante un procesamiento posterior.
La forma más fácil de hacerlo es grabar frente a un fondo de un solo color, como una pantalla o una cortina. El verde o el azul son los colores más usados, principalmente debido a su diferencia con los tonos de piel.
Hay varias guías en línea para grabar videos de pantalla verde (también conocida como clave de croma) y muchos lugares donde comprar fondos de pantalla verde y azul. Como alternativa, puedes pintar un fondo con pintura de clave de croma.
El corto de efectos visuales Gatsby muestra todo lo que se puede lograr con la pantalla verde.
Estas son algunas sugerencias para grabar:
- Asegúrate de que el sujeto no tenga ropa ni objetos del mismo color que el fondo. De lo contrario, aparecerán como "agujeros" en el video final. Incluso los logotipos o las joyas pequeños pueden ser problemáticos.
- Usa una iluminación uniforme y coherente, y evita las sombras. El objetivo es lograr el menor rango de colores posible en el fondo que, posteriormente, deberá ser transparente.
- Usar varias luces difusas ayuda a evitar sombras y variaciones de color de fondo.
- Evita los fondos brillantes: las superficies mate difunden mejor la luz.
2. Crear video alfa sin procesar a partir de videos de pantalla verde
Los siguientes pasos describen una manera de crear un video alfa sin procesar a partir de videos de pantalla verde:
- Cuando hayas filmado un video de pantalla verde, puedes usar una herramienta de código abierto como Blender para convertir el video en un array de archivos PNG con datos alfa. Usa la clave de color de Blender para quitar la pantalla verde y hacerla transparente. Ten en cuenta que el formato PNG no es obligatorio: se aceptan todos los formatos que conserven los datos del canal alfa.
Convierte el array de archivos PNG en un video YUVA sin procesar con una herramienta de código abierto, como ffmpeg:
ffmpeg -i image%04d.png -pix_fmt yuva420p video.rawComo alternativa, puedes codificar los archivos directamente en WebM mediante un comando ffmpeg como el siguiente:
ffmpeg -i image%04d.png output.webm
Si quieres agregar audio, puedes usar ffmpeg para combinarlo con un comando como el siguiente:
ffmpeg -i image%04d.png -i audio.wav output.webm
3. Codificar video alfa a WebM
Los videos alfa sin procesar se pueden codificar en WebM de dos maneras.
Con ffmpeg, agregamos compatibilidad con ffmpeg para codificar videos alfa de WebM.
Usa ffmpeg con un video de entrada que incluya datos alfa, establece el formato de salida en WebM y la codificación se realizará automáticamente en el formato correcto según las especificaciones. (Nota: Actualmente, deberás asegurarte de obtener la versión más reciente de ffmpeg del git tree para que esto funcione).
Comando de muestra:
ffmpeg -i myAlphaVideo.webm output.webmCon webm-tools:
git clone https://chromium.googlesource.com/webm/libvpxwebm-tools es un conjunto de herramientas simples de código abierto relacionadas con WebM, mantenidas por los autores del proyecto WebM, que incluye una herramienta para crear videos WebM con transparencia alfa.
Ejecuta el objeto binario con
--helppara ver la lista de opciones compatibles con alpha_encoder.
4. Reproducción en Chrome
Para reproducir el archivo WebM codificado en Chrome, solo configura el archivo como la fuente de un elemento de video.
¿Cómo lo hizo?
Hablamos con el ingeniero de Google Vignesh Venkatasubramanian sobre su trabajo en el proyecto. Resumió los principales desafíos involucrados:
- La transmisión de bits de VP8 no tenía compatibilidad con el canal alfa. Por lo tanto, tuvimos que incorporar alfa sin interrumpir la transmisión de bits de VP8 ni afectar a los jugadores existentes.
- El procesador de Chrome no podía procesar videos con alfa.
- Chrome tiene varias rutas de acceso de representación para varios dispositivos de hardware y GPU. Se tuvo que cambiar cada ruta de renderización para admitir la renderización de videos alfa.
Podemos pensar en muchos casos de uso interesantes para la transparencia alfa de los videos: juegos, videos interactivos, narraciones colaborativas (agrega tu propio video a un video o imagen de fondo), videos con personajes o tramas alternativos, apps web que usan componentes de video superpuestos.
¡Disfruta del cine! Avísanos si creas algo increíble con transparencia alfa.