Video sulla trasparenza alpha in Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Trasparenza alfa nei video di Chrome

Chrome 31 ora supporta la trasparenza alpha dei video in WebM.

In altre parole, Chrome prende in considerazione il canale alfa quando riproduce video con "schermo verde" codificati in WebM (VP8 e VP9) con un canale alfa. Ciò significa che puoi riprodurre video con sfondi trasparenti: sopra pagine web, immagini o persino altri video.

Puoi trovare una demo all'indirizzo simpl.info/videoalpha. Un po' surreale e un po' grezzo (letteralmente), ma hai capito l'idea.

Come realizzare video in versione alpha

Il metodo descritto utilizza gli strumenti open source Blender e ffmpeg:

  1. Filma il soggetto davanti a uno sfondo di un solo colore, ad esempio una tenda verde brillante.
  2. Elabora il video per creare un array di immagini fisse PNG con dati di trasparenza.
  3. Codifica in un formato video (in questo caso WebM).

Esistono anche strumenti proprietari che svolgono la stessa funzione, come Adobe After Effects, che potresti trovare più semplice.

1. Realizzare un video con il green screen

Innanzitutto, devi filmare il soggetto in modo che tutto ciò che si trova sullo sfondo possa essere "rimosso" (resi trasparenti) tramite l'elaborazione successiva.

Il modo più semplice per farlo è girare il video di fronte a uno sfondo di un unico colore, come una tenda o una schermata. Il verde o il blu sono i colori più utilizzati, soprattutto per la loro differenza rispetto ai toni della pelle.

Esistono diverse guide online per girare video in green screen (noto anche come chroma key) e molti negozi in cui acquistare sfondi in verde e in blu. In alternativa, puoi dipingere uno sfondo con la vernice di Chroma Key.

Il reel VFX di The Great Gatsby mostra quanto si può ottenere con lo schermo verde.

Ecco alcuni suggerimenti per le riprese:

  • Assicurati che il soggetto non indossi vestiti o oggetti dello stesso colore dell'ambientazione, altrimenti appariranno come "buchi" nel video finale. Anche loghi o gioielli di piccole dimensioni possono causare problemi.
  • Utilizza un'illuminazione uniforme e coerente ed evita le ombre: l'obiettivo è avere la gamma di colori più ridotta possibile nello sfondo che successivamente dovrà essere reso trasparente.
  • L'utilizzo di più luci diffuse aiuta a evitare ombre e variazioni di colore dello sfondo.
  • Evita sfondi lucidi: le superfici opache diffondono meglio la luce.

2. Creare un video alpha non elaborato da un video con green screen

I passaggi riportati di seguito descrivono un modo per creare un video alpha non elaborato da video con sfondo verde:

  1. Dopo aver girato un video in green screen, puoi utilizzare uno strumento open source come Blender per convertirlo in un array di file PNG con dati alpha. Utilizza la funzionalità di correzione del colore di Blender per rimuovere lo schermo verde e renderlo trasparente. Tieni presente che il formato PNG non è obbligatorio: va bene qualsiasi formato che conservi i dati del canale alfa.

  2. Converti l'array di file PNG in un video YUVA non elaborato utilizzando uno strumento open source come ffmpeg:

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

    In alternativa, codifica i file direttamente in WebM utilizzando un comando ffmpeg come questo:

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

Se vuoi aggiungere l'audio, puoi utilizzare ffmpeg per eseguire il muxing con un comando come questo:

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

3. Codifica il video alpha in WebM

I video alpha non elaborati possono essere codificati in WebM in due modi.

  1. Con ffmpeg: abbiamo aggiunto il supporto a ffmpeg per la codifica di video WebM alpha.

    Utilizza ffmpeg con un video di input che include i dati alpha, imposta il formato di output su WebM e la codifica verrà eseguita automaticamente nel formato corretto in base alle specifiche. (Nota: al momento devi assicurarti di scaricare l'ultima versione di ffmpeg dall'albero di git per far funzionare questa operazione.)

    Comando di esempio:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Utilizzo di webm-tools:

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

    webm-tools è un insieme di semplici strumenti open source correlati a WebM, gestiti dagli autori del progetto WebM, tra cui uno strumento per la creazione di video WebM con trasparenza alfa.

    Esegui il file binario con --help per visualizzare l'elenco delle opzioni supportate da alpha_encoder.

4. Riproduzione in Chrome

Per riprodurre il file WebM codificato in Chrome, impostalo come origine di un elemento video.

Come hanno fatto?

Abbiamo parlato con l'ingegnere di Google Vignesh Venkatasubramanian del suo lavoro sul progetto. Ha riassunto le principali sfide:

  • Il flusso di bit VP8 non supportava il canale alpha. Di conseguenza, abbiamo dovuto incorporare il canale alpha senza interrompere il flusso di bit VP8 e senza interrompere i lettori esistenti.
  • Il motore di rendering di Chrome non era in grado di eseguire il rendering di video con trasparenza.
  • Chrome ha più percorsi di rendering per più dispositivi hardware/GPU. È stato necessario modificare ogni percorso di rendering per supportare il rendering dei video alpha.

Possiamo pensare a molti casi d'uso interessanti per la trasparenza alpha dei video: giochi, video interattivi, narrazione collaborativa (aggiungi il tuo video a un video/un'immagine di sfondo), video con personaggi o trame alternativi, app web che utilizzano componenti video in overlay.

Buona creazione di filmati! Facci sapere se crei qualcosa di straordinario con la trasparenza alpha.

Risorse utili