Chrome videosunda alfa şeffaflığı

Furkan
François Beaufort

Chrome videosunda alfa şeffaflığı

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

Diğer bir deyişle, Chrome, bir alfa kanalıyla WebM (VP8 ve VP9) olarak kodlanmış "yeşil ekran" videoları oynatırken alfa kanalını dikkate alır. Bu, şeffaf arka plana sahip videoları web sayfaları, resimler ve hatta başka videolar üzerinden oynatabileceğiniz anlamına gelir.

simpl.info/videoalpha adresinde bir demo vardır. Biraz gerçeküstü ve kenarlar açısından biraz sert ama (kelimenin tam anlamıyla) ama siz bunu anladınız!

Alfa videosu nasıl hazırlanır?

Açıkladığımız yöntem, açık kaynaklı Blender ve ffmpeg araçlarını kullanır:

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

Aynı işi yapmak için, daha basit bulabileceğiniz Adobe After Effects gibi özel araçlar da vardır.

1. Yeşil ekran videosu oluştur

Öncelikle öznenizi, arka plandaki her şeyin daha sonra işleme sürecinden 'kaldırılabileceği' (şeffaf hale getirilebileceği) bir şekilde çekmeniz gerekir.

Bunu yapmanın en kolay yolu, ekran veya perde gibi tek renkli arka planın önünde çekim yapmaktır. Yeşil veya mavi, çoğunlukla ten renklerinden farkları nedeniyle en sık kullanılan renklerdir.

Yeşil ekran videosu (renk tuşu olarak da bilinir) çekme hakkında birkaç internetten kılavuz ve yeşil ve mavi ekran arka planları satın alabileceğiniz birçok yer vardır. Alternatif olarak arka planı renk anahtarı boyama ile boyayabilirsiniz.

Muhteşem Gatsby VFX videosu yeşil ekranla ne kadar çok şey yapılabileceğini gösteriyor.

Çekim yaparken bazı ipuçları:

  • Öznenizin üzerinde arka planla aynı renkte kıyafetler veya nesneler olmadığından emin olun. Aksi takdirde bunlar, son videoda "delikler" olarak görünür. Küçük logolar veya takılar bile sorun yaratabilir.
  • Tutarlı, eşit ışıklandırma kullanın ve gölgelerden kaçının: Amaç, daha sonra şeffaf hale getirilmesi gereken arka planda mümkün olan en küçük renk aralığına sahip olmaktır.
  • Birden fazla dağılmış ışık kullanmak gölgelerden ve arka plan renk varyasyonlarından kaçınmanıza yardımcı olur.
  • Parlak arka planlardan kaçının: Mat yüzeyler ışığı daha iyi dağıtır.

2. Yeşil ekran videosundan ham alfa videosu oluşturma

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

  1. Yeşil ekran videosu çektikten sonra, videoyu alfa verilerine sahip bir PNG dosyası dizisine dönüştürmek için Blender gibi açık kaynaklı bir araç kullanabilirsiniz. Yeşil ekranı kaldırıp şeffaf hale getirmek için Blender'ın renk tuşlarını kullanın. (PNG zorunlu değildir: Alfa kanalı verilerini koruyan tüm biçimler uygundur.)
  2. PNG dosya dizisini, ffmpeg gibi açık kaynaklı bir araç kullanarak ham bir YUVA videosuna dönüştürün:

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

    Alternatif olarak, aşağıdaki gibi bir ffmpeg komutu kullanarak dosyaları doğrudan WebM'ye kodlayın:

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

Ses eklemek isterseniz şu gibi bir komutla ffmpeg'i kullanarak bunu dahil edebilirsiniz:

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

3. Alfa videoyu WebM'ye kodlama

Ham alfa videolar WebM'ye iki şekilde kodlanabilir.

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

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

    Örnek komut:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm araçlarını kullanarak:

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

    webm-tools, WebM Project'in yazarları tarafından yönetilen ve alfa şeffaflığıyla WebM videoları oluşturmaya yönelik bir araç da dahil olmak üzere WebM ile ilgili basit ve açık kaynaklı bir araç setidir.

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

4. Chrome'da oynat

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. Karşılaşılan temel zorlukları özetledi:

  • VP8 bit akışının alfa kanalını desteklemiyordu. Bu nedenle, VP8 bit akışını ve mevcut oynatıcıları bozmadan alfayı dahil etmemiz gerekiyordu.
  • Chrome'un oluşturucusu, videoları alfa sürümünde oluşturamıyordu.
  • Chrome'da birden fazla donanım/GPU cihazı için birden fazla oluşturma yolu vardır. Her oluşturma yolunun, alfa videoların oluşturulmasını destekleyecek şekilde değiştirilmesi gerekiyordu.

Video alfa şeffaflığına dair pek çok ilginç kullanım alanı olduğunu düşünebiliriz: oyunlar, etkileşimli videolar, ortak çalışmaya dayalı hikaye anlatma (arka plan videosuna/resmine kendi videonuzu ekleme), alternatif karakterlere veya konulara sahip videolar, yer paylaşımlı video bileşenleri kullanan web uygulamaları.

Film çekimlerinde iyi eğlenceler! Alfa şeffaflığıyla harika bir şey derlerseniz bize bildirin.

Yararlı kaynaklar