Video sulla trasparenza alpha in Chrome

[Nome di persona]
Francesco Beaufort
François Beaufort
GitHub

Video sulla trasparenza Alpha in Chrome

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

In altre parole, Chrome prende in considerazione il canale alfa durante la riproduzione di video "schermo verde" codificati in 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.

È disponibile una demo all'indirizzo simpl.info/videoalpha. È un po' surreale e un po' irriverente (letteralmente) ma hai in mente un'idea.

Come realizzare video alpha

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

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

Esistono anche strumenti proprietari per svolgere lo stesso lavoro, come Adobe After Effects, che potresti trovare più semplice.

1. Creare un video con schermo verde

Prima di tutto, devi filmare il soggetto in modo che tutto ciò che si trova sullo sfondo possa essere "rimosso" (reso trasparente) mediante successiva elaborazione.

Il modo più semplice per farlo è girare le riprese con uno sfondo a un solo colore, ad esempio uno schermo o una tenda. Il verde o il blu sono i colori più utilizzati, principalmente a causa della loro differenza rispetto alla tonalità della pelle.

Esistono diverse guide online per le riprese dei video su schermo verde (dette anche chroma key) e molti luoghi in cui acquistare sfondi verdi e blu. In alternativa, puoi colorare uno sfondo con la colorazione chroma key.

Il video VFX di Great Gatsby mostra quanto si può fare con lo schermo verde.

Alcuni suggerimenti per le riprese:

  • Assicurati che il soggetto non abbia vestiti o oggetti dello stesso colore dello sfondo, altrimenti verranno visualizzati come "buchi" nel video finale. Anche loghi o gioielli piccoli possono rappresentare un problema.
  • Utilizza un'illuminazione coerente e uniforme ed evita ombre: l'obiettivo è avere la minima gamma possibile di colori sullo sfondo che in seguito dovrà essere resa trasparente.
  • L'utilizzo di più luci diffuse consente di evitare ombre e variazioni di colore di sfondo.
  • Evita sfondi lucidi: le superfici opache diffondono la luce meglio.

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

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

  1. Dopo aver girato un video con schermo verde, puoi utilizzare uno strumento open source come Blender per convertirlo in un array di file PNG con dati alpha. Usa i tasti colore di Blender per rimuovere lo schermo verde e renderlo trasparente. Tieni presente che il formato PNG non è obbligatorio: è consentito 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 audio, puoi utilizzare ffmpeg per trasferirlo con un comando come questo:

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

3. Codificare un 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 di video alpha WebM.

    Utilizza ffmpeg con un video di input che include 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 ottenere l'ultima versione di ffmpeg dall'albero git affinché funzioni.

    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 creare video WebM con trasparenza alpha.

    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 hanno fatto?

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

  • Il bitstream VP8 non supportava il canale alfa. Quindi abbiamo dovuto incorporare l'alpha senza interrompere il flusso di bit VP8 e senza danneggiare i player esistenti.
  • Il renderer di Chrome non era in grado di eseguire il rendering dei video con la versione alpha.
  • Chrome ha più percorsi di rendering per più dispositivi hardware/GPU. Ogni percorso di rendering doveva essere modificato per supportare il rendering dei video alpha.

Possiamo pensare a numerosi casi d'uso interessanti per la trasparenza alfa dei video: giochi, video interattivi, storytelling collaborativo (aggiunta di un tuo video a un video/immagine di sfondo), video con trame o personaggi alternativi, app web che utilizzano componenti video in overlay.

Buon divertimento con la realizzazione di un film! Facci sapere se realizzi qualcosa di incredibile con la trasparenza alfa.

Risorse utili