Transparansi alfa di video Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

Transparansi alfa di video Chrome

Chrome 31 kini mendukung transparansi alfa video di WebM.

Dengan kata lain, Chrome memperhitungkan saluran alfa saat memutar video 'layar hijau' yang dienkode ke WebM (VP8 dan VP9) dengan saluran alfa. Artinya, Anda dapat memutar video dengan latar belakang transparan: di atas halaman web, gambar, atau bahkan video lain.

Ada demo di simpl.info/videoalpha. Agak surealis, dan sedikit kasar (secara harfiah), tetapi Anda mengerti maksudnya.

Cara membuat video alfa

Metode yang kami jelaskan menggunakan alat open source Blender dan ffmpeg:

  1. Rekam subjek Anda di depan latar belakang satu warna seperti gorden hijau cerah.
  2. Proses video untuk membuat array gambar diam PNG dengan data transparansi.
  3. Encode ke format video (dalam hal ini, WebM).

Ada juga alat eksklusif untuk melakukan tugas yang sama, seperti Adobe After Effects, yang mungkin lebih mudah bagi Anda.

1. Membuat video green screen

Pertama-tama, Anda harus merekam subjek dengan cara yang memungkinkan semua yang ada di latar belakang dapat 'dihapus' (dibuat transparan) oleh pemrosesan berikutnya.

Cara termudah untuk melakukannya adalah merekam di depan latar belakang satu warna, seperti layar atau tirai. Hijau atau biru adalah warna yang paling sering digunakan, terutama karena perbedaannya dengan warna kulit.

Ada beberapa panduan online untuk merekam video green screen (juga dikenal sebagai kunci kroma) dan banyak tempat untuk membeli latar belakang layar hijau dan biru. Atau, Anda dapat melukis latar belakang dengan cat kunci kromatik.

Reel VFX The Great Gatsby menunjukkan seberapa banyak hal yang dapat dilakukan dengan green screen.

Beberapa tips untuk merekam:

  • Pastikan subjek Anda tidak mengenakan pakaian atau benda yang warnanya sama dengan latar belakang. Jika tidak, warna tersebut akan muncul sebagai 'lubang' dalam video akhir. Bahkan logo atau perhiasan kecil dapat menjadi masalah.
  • Gunakan pencahayaan yang konsisten dan merata, serta hindari bayangan: tujuannya adalah untuk memiliki rentang warna terkecil di latar belakang yang nantinya perlu dibuat transparan.
  • Menggunakan beberapa lampu yang tersebar membantu menghindari bayangan dan variasi warna latar belakang.
  • Hindari latar belakang yang mengkilap: permukaan matte akan menyebarkan cahaya dengan lebih baik.

2. Membuat video alfa mentah dari video green screen

Langkah-langkah berikut menjelaskan salah satu cara membuat video alfa mentah dari video layar hijau:

  1. Setelah merekam video green screen, Anda dapat menggunakan alat open source seperti Blender untuk mengonversi video menjadi array file PNG dengan data alfa. Gunakan color keying Blender untuk menghapus layar hijau dan membuatnya transparan. (Perhatikan bahwa PNG tidak wajib: format apa pun yang mempertahankan data saluran alfa tidak masalah.)

  2. Konversi array file PNG menjadi video YUVA mentah menggunakan alat open source seperti ffmpeg:

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

    Atau, encode file langsung ke WebM, menggunakan perintah ffmpeg seperti ini:

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

Jika ingin menambahkan audio, Anda dapat menggunakan ffmpeg untuk melakukan mux dengan perintah seperti ini:

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

3. Mengenkode video alfa ke WebM

Video alfa mentah dapat dienkode ke WebM dengan dua cara.

  1. Dengan ffmpeg: kami menambahkan dukungan ke ffmpeg untuk mengenkode video WebM alfa.

    Gunakan ffmpeg dengan video input termasuk data alfa, tetapkan format output ke WebM, dan encoding akan otomatis dilakukan dalam format yang benar sesuai spesifikasi. (Catatan: saat ini Anda harus memastikan untuk mendapatkan versi terbaru ffmpeg dari hierarki git agar hal ini berfungsi.)

    Contoh perintah:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Menggunakan webm-tools:

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

    webm-tools adalah serangkaian alat open source sederhana yang terkait dengan WebM, yang dikelola oleh penulis Project WebM, termasuk alat untuk membuat video WebM dengan transparansi alfa.

    Jalankan biner dengan --help untuk melihat daftar opsi yang didukung oleh alpha_encoder.

4. Pemutaran di Chrome

Untuk memutar file WebM yang dienkode di Chrome, cukup tetapkan file sebagai sumber elemen video.

Bagaimana cara mereka melakukannya?

Kami telah berbicara dengan engineer Google, Vignesh Venkatasubramanian, tentang pekerjaannya dalam project ini. Ia merangkum tantangan utama yang terlibat:

  • Bitstream VP8 tidak memiliki dukungan untuk saluran alfa. Jadi, kita harus menggabungkan alpha tanpa merusak bitstream VP8 dan tanpa merusak pemutar yang ada.
  • Perender Chrome tidak dapat merender video dengan alfa.
  • Chrome memiliki beberapa jalur rendering untuk beberapa perangkat hardware/GPU. Setiap jalur rendering harus diubah untuk mendukung rendering video alfa.

Kita dapat memikirkan banyak kasus penggunaan yang menarik untuk transparansi alfa video: game, video interaktif, bercerita kolaboratif (tambahkan video Anda sendiri ke video/gambar latar belakang), video dengan karakter atau plot alternatif, aplikasi web yang menggunakan komponen video overlay.

Selamat membuat film! Beri tahu kami jika Anda membuat sesuatu yang luar biasa dengan transparansi alfa.

Sumber daya bermanfaat