Transparência Alfa no vídeo do Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Transparência alfa em vídeos do Chrome

O Chrome 31 agora oferece suporte à transparência alfa de vídeo no WebM.

Em outras palavras, o Chrome considera o canal alfa ao reproduzir vídeos de tela verde codificados em WebM (VP8 e VP9) com um canal alfa. Isso significa que você pode reproduzir vídeos com fundos transparentes: sobre páginas da Web, imagens ou até mesmo outros vídeos.

Há uma demonstração em simpl.info/videoalpha. Um pouco surreal e um pouco áspero nas bordas (literalmente), mas você entendeu a ideia.

Como fazer vídeos Alfa

O método que descrevemos usa as ferramentas de código aberto Blender e ffmpeg:

  1. Filmar o tema em frente a um plano de fundo de cor única, como uma cortina verde brilhante.
  2. Processe o vídeo para criar uma matriz de imagens PNG estáticas com dados de transparência.
  3. Codifique em um formato de vídeo (neste caso, WebM).

Também existem ferramentas proprietárias para fazer o mesmo trabalho, como o Adobe After Effects, que pode ser mais simples.

1. Fazer um vídeo em tela verde

Primeiro, você precisa filmar o assunto de forma que tudo no segundo plano possa ser "removido" (tornado transparente) pelo processamento subsequente.

A maneira mais fácil de fazer isso é filmar em frente a um plano de fundo de cor única, como uma tela ou cortina. Verde ou azul são as cores mais usadas, principalmente por causa da diferença em relação aos tons de pele.

Há vários guias on-line para filmar vídeos com tela verde (também conhecida como chave cromática) e muitos lugares para comprar telas verdes e azuis. Como alternativa, você pode pintar um plano de fundo com pintura de cor de croma key.

O vídeo de efeitos visuais de O Grande Gatsby mostra o que é possível fazer com a tela verde.

Algumas dicas para filmar:

  • Verifique se o tema não tem roupas ou objetos da mesma cor que o plano de fundo. Caso contrário, eles vão aparecer como "buracos" no vídeo final. Até mesmo logotipos pequenos ou joias podem ser problemáticos.
  • Use iluminação consistente e uniforme e evite sombras: o objetivo é ter a menor variedade possível de cores no plano de fundo que depois precisa ser transparente.
  • Usar várias luzes difusas ajuda a evitar sombras e variações de cor de segundo plano.
  • Evite fundos brilhantes: superfícies foscas difundem a luz melhor.

2. Criar um vídeo alfa bruto usando um vídeo de tela verde

As etapas a seguir descrevem uma maneira de criar um vídeo Alfa bruto a partir de vídeos com tela verde:

  1. Depois de gravar um vídeo com tela verde, use uma ferramenta de código aberto, como o Blender, para converter o vídeo em uma matriz de arquivos PNG com dados alfa. Use a chave de cor do Blender para remover a tela verde e torná-la transparente. O PNG não é obrigatório: qualquer formato que preserve os dados do canal Alfa é adequado.

  2. Converta a matriz de arquivos PNG em um vídeo YUVA bruto usando uma ferramenta de código aberto, como o ffmpeg:

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

    Como alternativa, codifique os arquivos diretamente em WebM usando um comando ffmpeg como este:

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

Se você quiser adicionar áudio, use o ffmpeg para fazer a multiplexação com um comando como este:

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

3. Codificar o vídeo Alfa em WebM

Os vídeos Alfa brutos podem ser codificados em WebM de duas maneiras.

  1. Com o ffmpeg: adicionamos suporte ao ffmpeg para codificar vídeos WebM Alfa.

    Use o ffmpeg com um vídeo de entrada que inclua dados alfa, defina o formato de saída como WebM e a codificação será feita automaticamente no formato correto, conforme a especificação. Observação: atualmente, você precisa ter a versão mais recente do ffmpeg da árvore do git para que isso funcione.

    Exemplo de comando:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Usando o webm-tools:

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

    O webm-tools é um conjunto de ferramentas simples de código aberto relacionadas ao WebM, mantidas pelos autores do projeto WebM, incluindo uma ferramenta para criar vídeos WebM com transparência alfa.

    Execute o binário com --help para conferir a lista de opções compatíveis com o alpha_encoder.

4. Reprodução no Chrome

Para reproduzir o arquivo WebM codificado no Chrome, basta definir o arquivo como a origem de um elemento de vídeo.

Como eles fizeram isso?

Conversamos com o engenheiro do Google Vignesh Venkatasubramanian sobre o trabalho dele no projeto. Ele resumiu os principais desafios envolvidos:

  • O bitstream VP8 não tinha suporte para o canal Alfa. Então, tivemos que incorporar o Alfa sem interromper o fluxo de bits VP8 e sem interromper os players existentes.
  • O renderizador do Chrome não era capaz de renderizar vídeos com Alfa.
  • O Chrome tem vários caminhos de renderização para vários dispositivos de hardware/GPU. Todos os caminhos de renderização precisaram ser alterados para oferecer suporte à renderização de vídeos alfa.

Podemos pensar em muitos casos de uso interessantes para a transparência alfa de vídeo: jogos, vídeos interativos, narrativas colaborativas (adicione seu próprio vídeo a um vídeo/imagem de plano de fundo), vídeos com personagens ou tramas alternativos, apps da Web que usam componentes de vídeo de sobreposição.

Boa produção! Conte para nós se você criar algo incrível com a transparência alfa.

Recursos úteis