Transparência Alfa no vídeo do Chrome

Sam dutton
Francisco Beaufort
François Beaufort
GitHub

Transparência Alfa no vídeo do Chrome

O Chrome 31 agora oferece suporte à transparência Alfa do vídeo em WebM.

Em outras palavras, o Chrome considera o canal Alfa ao reproduzir vídeos de tela verde codificados para WebM (VP8 e VP9) com um canal Alfa. Isso significa que é possível reproduzir vídeos com planos de fundo transparentes: sobre páginas da Web, imagens ou até mesmo outros vídeos.

Confira uma demonstração em simpl.info/videoalpha. Um pouco surreal e um pouco grosseiro (literalmente), mas a ideia é você!

Como fazer vídeos Alfa

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

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

Há também ferramentas reservadas para fazer o mesmo trabalho, como o Adobe After Effects, que você pode achar mais simples.

1. Criar um vídeo com tela verde

Primeiro, é necessário filmar o objeto de modo que tudo em segundo plano possa ser "removido" (tornado transparente) com o processamento subsequente.

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

Há vários guias on-line sobre como filmar vídeos em tela verde (também conhecidos como chroma key) e vários lugares para comprar panos de fundo verdes e azul. Se preferir, use a pintura chroma key em um plano de fundo.

O reel VFX do Grande Gatsby mostra quantas coisas podem ser feitas com a tela verde.

Confira algumas dicas para gravar:

  • Não use roupas ou objetos da mesma cor do pano de fundo para que o tema a seguir seja mostrado. Caso contrário, eles vão aparecer como "buracos" no último vídeo. Até mesmo logotipos ou joias pequenos podem ser problemáticos.
  • Use uma iluminação consistente e uniforme e evite sombras: o objetivo é ter o menor intervalo possível de cores em segundo plano que precisará, posteriormente, ser transparente.
  • O uso de várias luzes difusas ajuda a evitar sombras e variações de cores de fundo.
  • Evite fundos brilhantes: superfícies foscas difundem melhor a luz.

2. Criar vídeo Alfa bruto de vídeo em tela verde

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

  1. Depois de gravar um vídeo em 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 cores 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 é aceitável.

  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 para WebM usando um comando ffmpeg como este:

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

Se você quiser adicionar áudio, use o ffmpeg para mesclar esse áudio com um comando como este:

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

3. Codificar vídeo Alfa para WebM

Vídeos Alfa brutos podem ser codificados para 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, incluindo dados Alfa, defina o formato de saída como WebM, e a codificação será feita automaticamente no formato correto de acordo com a especificação. Observação: no momento, você precisa ter a versão mais recente do ffmpeg da árvore git para que isso funcione.

    Exemplo de comando:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Usando 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, mantido pelos autores do projeto, incluindo uma ferramenta para criação de vídeos WebM com transparência alfa.

    Execute o binário com --help para ver a lista de opções compatíveis com 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 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 era compatível com o canal Alfa. Portanto, tivemos que incorporar alfa sem corromper o bitstream do VP8 e sem prejudicar os jogadores atuais.
  • O renderizador do Chrome não conseguiu renderizar vídeos com alfa.
  • O Chrome tem vários caminhos de renderização para diversos dispositivos de hardware/GPU. Todos os caminhos de renderização tiveram que ser alterados para oferecer suporte à renderização de vídeos Alfa.

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

Divirta-se fazendo filmes! Conte para nós se você criou algo incrível com a transparência alfa.

Recursos úteis