Transparencia alfa en el video de Chrome
Chrome 31 ahora admite transparencia alfa de video en WebM.
En otras palabras, Chrome tiene en cuenta el canal alfa cuando reproduce videos de "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.
Hay una demostración en simpl.info/videoalpha. Es un poco surrealista y un poco tosco (literalmente), pero ya entiendes la idea.
Cómo crear videos alfa
El método que describimos usa las herramientas de código abierto Blender y ffmpeg:
- Graba al sujeto frente a un fondo de un solo color, como una cortina verde brillante.
- Procesa el video para crear un array de imágenes estáticas PNG con datos de transparencia.
- Codifica en un formato de video (en este caso, WebM).
También hay herramientas propietarias que hacen el mismo trabajo, como Adobe After Effects, que podrías considerar más simple.
1. Cómo crear un video con pantalla verde
En primer lugar, debes filmar el sujeto de manera que todo el fondo se pueda “quitar” (hacer transparente) con el procesamiento posterior.
La forma más fácil de hacerlo es filmar frente a un fondo de un solo color, como una pantalla o una cortina. El verde o el azul son los colores que se usan con más frecuencia, principalmente por su diferencia con los tonos de piel.
Hay varias guías en línea para grabar videos con pantalla verde (también conocida como croma key) y muchos lugares donde comprar fondos de pantalla verde y azul. Como alternativa, puedes pintar un fondo con pintura de clave de croma.
En el recuento de efectos especiales de El gran Gatsby, se muestra lo mucho 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 tener el rango de colores más pequeño posible en el fondo, que luego deberá hacerse transparente.
- El uso de varias luces difusas ayuda a evitar las sombras y las variaciones de color de fondo.
- Evita los fondos brillantes: las superficies mate difuminan mejor la luz.
2. Crea un video alfa sin procesar a partir de un video con pantalla verde
En los siguientes pasos, se describe una forma de crear un video alfa sin procesar a partir de videos con pantalla verde:
- Una vez que hayas grabado un video con pantalla verde, puedes usar una herramienta de código abierto, como Blender, para convertirlo 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 PNG no es obligatorio: cualquier formato que conserve los datos del canal alfa es adecuado).
Convierte el array de archivos PNG a 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, codifica los archivos directamente a WebM con 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 este:
ffmpeg -i image%04d.png -i audio.wav output.webm
3. Cómo codificar un 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 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, debes asegurarte de obtener la versión más reciente de ffmpeg del árbol de git para que esto funcione).
Comando de muestra:
ffmpeg -i myAlphaVideo.webm output.webmUsa webm-tools:
git clone https://chromium.googlesource.com/webm/libvpxwebm-tools es un conjunto de herramientas de código abierto simples relacionadas con WebM, que mantienen los autores del proyecto WebM, incluida una herramienta para crear videos WebM con transparencia alfa.
Ejecuta el objeto binario con
--helppara ver la lista de opciones que admite alpha_encoder.
4. Reproducción en Chrome
Para reproducir el archivo WebM codificado en Chrome, simplemente configúralo como la fuente de un elemento de video.
¿Cómo lo hicieron?
Hablamos con el ingeniero de Google Vignesh Venkatasubramanian sobre su trabajo en el proyecto. Resumió los desafíos clave involucrados:
- El flujo de bits de VP8 no era compatible con el canal alfa. Por lo tanto, tuvimos que incorporar la transparencia sin interrumpir el flujo de bits de VP8 ni los reproductores existentes.
- El renderizador de Chrome no era capaz de renderizar videos con alfa.
- Chrome tiene varias rutas de renderización para varios dispositivos de hardware o 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 video: juegos, videos interactivos, narración de historias 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.
¡Que disfrutes haciendo películas! Avísanos si creas algo asombroso con la transparencia alfa.