Chrome videosunda alfa şeffaflığı

Sam Dutton
François Beaufort
François Beaufort
GitHub

Chrome videosunda alfa şeffaflığı

Chrome 31 artık WebM'de video alfa şeffaflığını destekliyor.

Diğer bir deyişle, Chrome, alfa kanalı içeren WebM (VP8 ve VP9) olarak kodlanmış "yeşil ekran" videolarını oynatırken alfa kanalını dikkate alır. Bu sayede, web sayfaları, resimler ve hatta diğer videoların üzerinde şeffaf arka planlı videolar oynatabilirsiniz.

simpl.info/videoalpha adresinde bir demo mevcuttur. Biraz gerçeküstü ve biraz da pürüzlü (kelimenin tam anlamıyla) ama ana fikri anlıyorsunuz.

Alfa videoları oluşturma

Açık kaynak Blender ve ffmpeg araçlarının kullanıldığı yöntemi aşağıda bulabilirsiniz:

  1. Öznenizi parlak yeşil bir perde gibi tek renkli bir arka planın önünde çekin.
  2. Şeffaflık verileri içeren bir PNG hareketsiz resim dizisi oluşturmak için videoyu işleyin.
  3. Video biçiminde (bu örnekte WebM) kodlayın.

Aynı işi yapan tescilli araçlar da vardır (ör. Adobe After Effects). Bu araçlar daha basit olabilir.

1. Yeşil ekran videosu oluşturma

Öncelikle, öznenizi arka plandaki her şeyin sonraki işlemlerle "kaldırılabileceği" (şeffaf hale getirilebileceği) şekilde çekmeniz gerekir.

Bunu yapmanın en kolay yolu, ekran veya perde gibi tek renkli bir arka planın önünde çekim yapmaktır. Yeşil veya mavi, çoğunlukla ten tonlarından farklı oldukları için en sık kullanılan renklerdir.

Yeşil ekran videosu (chroma key olarak da bilinir) çekmeyle ilgili internette birçok kılavuz ve yeşil ile mavi ekran arka planları satın alabileceğiniz çok sayıda yer vardır. Alternatif olarak, renk anahtarı boyası ile arka plan boyayabilirsiniz.

The Great Gatsby VFX reel, yeşil ekranla nelerin başarılabileceğini gösteriyor.

Çekimle ilgili bazı ipuçları:

  • Öznenizin kıyafetlerinin veya nesnelerinin arka planla aynı renkte olmadığından emin olun. Aksi takdirde, bunlar nihai videoda "delikler" olarak görünür. Küçük logolar veya takılar bile sorun yaratabilir.
  • Tutarlı ve eşit ışık kullanın ve gölgelerden kaçının: Amaç, arka planda mümkün olan en az renk aralığına sahip olmaktır. Bu renklerin daha sonra şeffaf hale getirilmesi gerekir.
  • Birden fazla dağınık ışık kullanmak, gölgelerin ve arka plan rengindeki farklılıkların önlenmesine yardımcı olur.
  • Parlak arka planlardan kaçının: Mat yüzeyler ışığı daha iyi dağıtır.

2. Yeşil ekran videolarından ham alfa video oluşturma

Aşağıdaki adımlarda, yeşil ekran videolarından ham alfa video oluşturmanın bir yolu açıklanmaktadır:

  1. Yeşil ekran videosu çektikten sonra, videoyu alfa veri içeren bir PNG dosyası dizisine dönüştürmek için Blender gibi açık kaynak bir araç kullanabilirsiniz. Yeşil ekranı kaldırmak ve şeffaf hale getirmek için Blender'ın renk anahtarını kullanın. (PNG'nin zorunlu olmadığını unutmayın: Alfa kanalı verilerini koruyan her biçim kullanılabilir.)

  2. ffmpeg gibi açık kaynak bir araç kullanarak PNG dosyası dizisini ham YUVA videosuna dönüştürün:

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

    Alternatif olarak, dosyaları aşağıdaki gibi bir ffmpeg komutu kullanarak doğrudan WebM olarak kodlayabilirsiniz:

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

Ses eklemek istiyorsanız ffmpeg'i kullanarak aşağıdaki gibi bir komutla ses ekleyebilirsiniz:

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

3. Alfa videoyu WebM olarak kodlama

Ham alfa videoları WebM olarak iki şekilde kodlanabilir.

  1. ffmpeg ile: WebM alfa videolarını kodlamak için ffmpeg'e destek ekledik.

    Alfa verileri içeren bir giriş videosuyla ffmpeg'i kullanın, çıkış biçimini WebM olarak ayarlayın. Böylece kodlama, spesifikasyona göre doğru biçimde otomatik olarak yapılır. (Not: Bunun işe yaraması için şu anda git ağacından ffmpeg'in en son sürümünü indirmeniz gerekir.)

    Örnek komut:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm-tools aracını kullanarak:

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

    webm-tools, WebM Projesi yazarları tarafından yönetilen ve alfa şeffaflığı içeren WebM videoları oluşturmaya yönelik bir araç da dahil olmak üzere WebM ile ilgili basit açık kaynaklı araçlardan oluşan bir pakettir.

    alpha_encoder tarafından desteklenen seçeneklerin listesini görmek için ikili dosyayı --help ile çalıştırın.

4. Chrome'da oynatma

Kodlanmış WebM dosyasını Chrome'da oynatmak için dosyayı bir video öğesinin kaynağı olarak ayarlamanız yeterlidir.

Peki bunu nasıl başardılar?

Google mühendisi Vignesh Venkatasubramanian ile projedeki çalışmaları hakkında konuştuk. Bu süreçte karşılaşılan önemli zorlukları şöyle özetledi:

  • VP8 bit akışında alfa kanalı desteği yoktu. Bu nedenle, VP8 bit akışını ve mevcut oynatıcıları bozmadan alfayı dahil etmemiz gerekiyordu.
  • Chrome'un oluşturma aracı, alfa içeren videoları oluşturamıyordu.
  • Chrome, birden fazla donanım/GPU cihaz için birden fazla oluşturma yoluna sahiptir. Alfa videolarının oluşturulmasını desteklemek için her oluşturma yolunun değiştirilmesi gerekiyordu.

Video alfa şeffaflığı için birçok ilginç kullanım alanı düşünebiliriz: oyunlar, etkileşimli videolar, ortak hikaye anlatımı (arka plan videosuna/resmine kendi videonuzu ekleyin), alternatif karakterler veya olay örgüleri içeren videolar, yer paylaşımlı video bileşenleri kullanan web uygulamaları.

İyi filmler dileriz. Alfa şeffaflığıyla harika bir şey oluşturursanız bize bildirin.

Yararlı kaynaklar