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 mempertimbangkan saluran alfa saat memutar 'layar hijau' video yang dienkode ke WebM (VP8 dan VP9) dengan saluran alfa. Artinya, Anda dapat memutar video dengan latar belakang transparan: melalui halaman web, gambar, atau bahkan video lainnya.

Ada demo di simpl.info/videoalpha. Agak surealisme, dan sedikit kasar di bagian tepi (secara harfiah), tetapi Anda sudah memahaminya!

Cara membuat video alfa

Metode yang kami gambarkan menggunakan alat {i>open source<i} Blender dan ffmpeg:

  1. Ambil gambar subjek di depan latar belakang satu warna seperti cahaya terang tirai hijau.
  2. Proses video untuk membangun array gambar diam PNG dengan transparansi layanan otomatis dan data skalabel.
  3. Lakukan enkode ke format video (dalam hal ini, WebM).

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

1. Buat video layar hijau

Pertama-tama, Anda perlu memfilmkan subjek Anda sedemikian rupa sehingga background bisa 'dihapus' (dibuat transparan) oleh pemrosesan selanjutnya.

Cara termudah untuk melakukannya adalah dengan memfilmkan 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 layar hijau (juga dikenal sebagai kunci kroma) dan banyak tempat untuk membeli warna hijau dan tampilan latar layar biru. Atau, Anda dapat melukis latar belakang dengan lukis kunci kroma.

Reel Great Gatsby VFX menunjukkan seberapa banyak yang dapat dicapai dengan layar hijau.

Beberapa tips untuk merekam:

  • Pastikan subjek tidak memiliki pakaian atau benda dengan warna yang sama sebagai latar belakang, jika tidak, gambar ini akan muncul sebagai 'lubang' di video akhir. Logo atau perhiasan berukuran kecil pun dapat menimbulkan masalah.
  • Gunakan pencahayaan yang konsisten, merata, dan hindari bayangan: tujuannya adalah untuk mendapatkan rentang warna terkecil di latar belakang yang selanjutnya akan perlu transparan.
  • Menggunakan beberapa cahaya yang tersebar membantu menghindari bayangan dan warna latar belakang variasi.
  • Hindari latar belakang yang berkilau: permukaan matte menyebarkan cahaya dengan lebih baik.

2. Buat video alfa mentah dari video layar hijau

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

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

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

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

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

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

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

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

3. Enkode 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 alfa WebM.

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

    Contoh perintah:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Menggunakan alat webm:

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

    webm-tools adalah rangkaian 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 setel file tersebut sebagai sumber elemen video.

Bagaimana mereka melakukannya?

Kami berbincang dengan engineer Google, Vignesh Venkatasubramanian, tentang hasil pekerjaannya di proyek. Dia merangkum tantangan utama yang terlibat di dalamnya:

  • Bitstream VP8 tidak memiliki dukungan untuk saluran alfa. Jadi kami harus menggabungkan alfa tanpa memutus bitstream VP8 dan tanpa memutus aliran data pemain.
  • 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 bisa memikirkan banyak kasus penggunaan 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 alfa transparansi.

Sumber daya bermanfaat