Video sulla trasparenza alpha in Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Video Trasparenza alpha in Chrome

Chrome 31 ora supporta la trasparenza video alpha in WebM.

In altre parole, Chrome prende in considerazione il canale alfa per la riproduzione di "green screen" video codificati in formato WebM (VP8 e VP9) con un canale alfa. Ciò significa che puoi riprodurre video con sfondi trasparenti: su pagine web, immagini o persino altri video.

C'è una demo all'indirizzo simpl.info/videoalpha. Un po' surreale e un po' ruvidi (letteralmente), ma si fa un'idea.

Come realizzare video alpha

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

  1. Riprendi il soggetto su uno sfondo monocolore, ad esempio un sipario verde.
  2. Elabora il video per creare un array di immagini statiche PNG con trasparenza e i dati di Google Cloud.
  3. Codifica in un formato video (in questo caso, WebM).

Esistono strumenti proprietari per svolgere lo stesso lavoro, come ad esempio Adobe After Effects, che puoi trovare più semplice.

1. Crea un video con lo schermo verde

Innanzitutto, devi filmare il soggetto in modo che tutto il lo sfondo può essere "rimosso" (resa trasparente) mediante una successiva elaborazione.

Il modo più semplice per farlo è filmare di fronte a uno sfondo di un solo colore, come uno schermo o una tenda. Il verde o il blu sono i colori più utilizzati, principalmente a causa della loro differenza dalle tonalità della pelle.

Sono disponibili diverse guide online alle riprese di video con lo schermo verde (note anche come chroma key) e molti posti dove poter acquistare green e con sfondi blu dello schermo. In alternativa, puoi colorare uno sfondo con il chroma key.

Il video VFX Great Gatsby mostra i risultati che si possono ottenere con lo schermo verde.

Alcuni suggerimenti per le riprese:

  • Assicurati che il soggetto non abbia vestiti o oggetti dello stesso colore come sfondo, altrimenti verranno visualizzati come "buchi" nel video finale. Anche loghi o gioielli di piccole dimensioni possono essere problematici.
  • Usa un'illuminazione uniforme e uniforme ed evita le ombre: lo scopo è ottenere la più piccola gamma di colori possibile sullo sfondo, che in seguito devono essere rese trasparenti.
  • L'utilizzo di più luci diffuse aiuta a evitare ombre e colore di sfondo varianti.
  • Evita gli sfondi lucidi: le superfici opache diffondono meglio la luce.

2. Crea un video alpha non elaborato a partire da un video con lo schermo verde

I seguenti passaggi descrivono un modo per creare un video alpha non elaborato a partire dai video con lo schermo verde:

  1. Dopo aver girato un video con lo schermo verde, puoi convertirlo utilizzando uno strumento open source come fusione. in un array di file PNG con dati alfa. Usa i tasti dei colori di Frullatore per rimuovi lo schermo verde e rendilo trasparente. Tieni presente che PNG non è obbligatorio: qualsiasi formato che conserva i dati del canale alfa è ammesso.)

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

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

    In alternativa, codifica i file direttamente in WebM utilizzando un comando ffmpeg nel seguente modo:

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

Se vuoi aggiungere dell'audio, puoi utilizzare ffmpeg per effettuare il Mux con un comando come questo:

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

3. Codifica di video alpha in WebM

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

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

    Utilizza ffmpeg con un video di input che include dati alfa, imposta il formato di output su WebM e la codifica verrà eseguita automaticamente nel formato corretto in base la specifica. Nota: al momento dovrai assicurarti di ottenere la versione più recente di ffmpeg dall'albero Git per se funziona).

    Comando di esempio:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Uso degli strumenti webm:

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

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

    Esegui il programma 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, è sufficiente impostare il file come origine di un elemento video.

Come ci sono riusciti?

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

  • Il bitstream VP8 non supportava il canale alfa. Quindi abbiamo dovuto incorporare alpha senza interrompere il flusso di bit VP8 e senza interrompere il flusso di bit esistente giocatori.
  • Il renderer di Chrome non era in grado di eseguire il rendering dei video con alpha.
  • Chrome ha più percorsi di rendering per più dispositivi hardware/GPU. Ogni evento è stato necessario modificare il percorso di rendering per supportare il rendering dei video alpha.

Possiamo pensare a molti casi d'uso interessanti per la trasparenza alfa dei video: giochi, video interattivi, storie in collaborazione (aggiungi il tuo video a video/immagine in background), video con personaggi o trame alternativi, app web che utilizzano componenti video overlay.

In bocca al lupo! Facci sapere se crei qualcosa di incredibile con alpha e trasparenza.

Risorse utili