Transparansi alfa di video Chrome

Budiman
Prancis 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 video 'green screen' 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 lain.

Tersedia demonya di simpl.info/videoalpha. Agak surealis, dan agak kasar di tepinya (secara harfiah), tetapi Anda pasti bisa!

Cara membuat video alfa

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

  1. Ambil gambar subjek di depan latar belakang satu warna seperti tirai hijau terang.
  2. Proses video untuk mem-build array gambar diam PNG dengan data transparansi.
  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 lebih mudah bagi Anda.

1. Buat video layar hijau

Pertama-tama, Anda harus merekam subjek sedemikian rupa sehingga semua yang ada di latar belakang dapat 'dihapus' (diubah menjadi transparan) dengan pemrosesan selanjutnya.

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 dari warna kulit.

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

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

Beberapa tips untuk merekam video:

  • Pastikan subjek Anda tidak memiliki pakaian atau objek yang warnanya sama dengan tampilan latar. Jika tidak, pakaian atau objek tersebut akan muncul sebagai 'lubang' di video akhir. Bahkan logo atau perhiasan kecil pun bisa bermasalah.
  • Gunakan pencahayaan yang konsisten, merata, dan hindari bayangan: tujuannya adalah memiliki rentang warna terkecil di latar belakang yang selanjutnya perlu dibuat transparan.
  • Menggunakan beberapa cahaya yang menyebar akan membantu menghindari bayangan dan variasi warna latar belakang.
  • 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 menghapus layar hijau dan membuatnya transparan. (Perhatikan bahwa PNG tidak wajib: Anda dapat menggunakan format apa pun yang mempertahankan data saluran alfa.)

  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, enkode file secara langsung ke WebM, gunakan 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. 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 termasuk data alfa, setel 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 cara 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 seperangkat alat open source sederhana yang terkait dengan WebM, yang dikelola oleh penulis Proyek 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 sebagai sumber elemen video.

Bagaimana mereka melakukannya?

Kami berbicara dengan engineer Google Vignesh Venkatasubramanian tentang pekerjaannya dalam project tersebut. Ia merangkum tantangan-tantangan utama yang terlibat:

  • Bitstream VP8 tidak mendukung saluran alfa. Jadi, kami harus menggabungkan alfa tanpa merusak bitstream VP8 dan tanpa memutus pemain yang ada.
  • Perender Chrome tidak mampu 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 yang menarik untuk transparansi alfa video: game, video interaktif, penceritaan kolaboratif (menambahkan 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