Chrome videosunda alfa şeffaflığı

Sam Dutton
François Beaufort
François Beaufort
GitHub

Chrome videosundaki alfa şeffaflığı

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

Diğer bir deyişle, Chrome "yeşil ekran" oynatırken alfa kanalını dikkate alır WebM'ye (VP8 ve VP9) kodlanmış videolar bir alfa kanalı. Yani web sayfalarında, resimlerde ve hatta diğer videolarda şeffaf arka plana sahip videoları oynatabilirsiniz.

Şu adreste bir demo var: simpl.info/videoalpha gibidir. Biraz gerçeküstü ve kenarları biraz kabarık (kelimenin tam anlamıyla) ama fikri anladınız!

Alfa videoları nasıl hazırlanır?

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

  1. Öznenizi parlak arka plan gibi tek renkli bir arka planın önünde çekin. perdelere bakın.
  2. Saydam bir PNG sabit görüntüsü dizisi oluşturmak için videoyu işleyin. dışı verilerdir.
  3. Bir video biçiminde (bu örnekte WebM) kodlayın.

Her biri 100'den az gösterim alan aynı işi yapmak için kullanabileceğiniz Adobe After Effects gibi daha basit hale getirir.

1. Yeşil ekran videosu oluşturma

Her şeyden önce öznenizi, filmdeki her şeyin arka plan "kaldırılabilir" (şeffaf olması gerekir).

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

Yeşil ekran video çekimi için çeşitli çevrimiçi rehberler mevcut vardır. renk anahtarı) ve çok sayıda yer satın alabileceğiniz, iyi bir fikir olabilir. Alternatif olarak renk anahtarı boyası ile arka planı boyayabilirsiniz.

Mükemmel Gatsby VFX videosu, yeşil ekran sayesinde ne kadar çok şey yapılabileceğini gösteriyor.

Çekimle ilgili bazı ipuçları:

  • Öznenizde aynı renkte giysiler veya nesneler olmadığından emin olun. olarak gösterilir. Aksi takdirde, bunlar "delikler" olarak bahsedeceğiz. Küçük logolar veya mücevherler bile sorun yaratabilir.
  • Tutarlı, eşit bir ışıklandırma kullanın ve gölgelerden kaçının. Burada amaç, ışıktan en iyi şekilde yararlanmak arka planda, daha sonra arka planda kaybolacak olan en küçük renk şeffaf hale getirilmelidir.
  • Birden fazla dağınık ışık kullanmak gölgelerden ve arka plan renginden kaçınmanıza yardımcı olur için de geçerlidir.
  • Parlak arka planlardan kaçının: Mat yüzeyler ışığı daha iyi dağıtır.

2. Yeşil ekran videosundan ham alfa video oluşturun

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 çektiğinizde videoyu dönüştürmek için Blender gibi açık kaynaklı bir araç kullanabilirsiniz alfa verilerini içeren bir PNG dosyası dizisine dönüştürmenizi sağlar. Blender'ın renk tuşlarını kullanarak yeşil ekranı kaldırın ve şeffaf hale getirin. (PNG'nin Zorunlu: alfa kanalı verilerini koruyan tüm biçimler kullanılabilir.)

  2. Açık kaynak bir araç kullanarak PNG dosya dizisini ham YUVA videosuna dönüştürün Örneğin:

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

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

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

Ses eklemek isterseniz aşağıdaki gibi bir komutla sesi artırmak için ffmpeg'i kullanabilirsiniz: bu:

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 desteği ekledik.

    ffmpeg'i alfa verilerini içeren bir giriş videosunda kullan, çıkış biçimini şu şekilde ayarla: göre otomatik olarak doğru biçimde yapılır. özellikler. (Not: Şu anda git ağacından ffmpeg'in en son sürümünü aldığınızdan emin olmanız gerekir bakın.)

    Örnek komut:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. webm-tools'ı kullanma:

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

    webm-tools, alfa şeffaflığıyla WebM videoları oluşturmaya yönelik bir araç da dahil olmak üzere, WebM Projesi yazarları tarafından yönetilen, WebM ile ilgili bir dizi basit açık kaynak araçtır.

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

4. Chrome'da oynatma

Kodlanmış WebM dosyasını Chrome'da oynatmak için, dosyayı Chrome'da video öğesi.

Peki bunu nasıl başardılar?

Google mühendisi Vignesh Venkatasubramanian ile belirler. Bu süreçteki temel zorlukları özetledi:

  • VP8 bit akışı, alfa kanalını desteklemiyordu. Bu yüzden, bunun yerine alfa için, VP8 bit akışını bozmadan ve mevcut akışı bozmadan oyunculardan biri.
  • Chrome'un oluşturucusu, alfa sürümündeki videoları oluşturamıyordu.
  • Chrome'un birden fazla donanım/GPU cihazı için birden fazla oluşturma yolu vardır. Hepsini oluşturma yolunun, alfa videoların oluşturulmasını desteklemek için değiştirilmesi gerekti.

Videonun alfa şeffaflığına dair birçok ilginç kullanım alanı bulunur: oyunlar, etkileşimli videolar, ortak çalışmayla hikaye anlatma (kendi videonuzu arka plan videosu/resmi), alternatif karakterler veya olay örgüleri içeren videolar, web uygulamaları video bileşeni içeren bir.

Film çekimlerinde başarılar! Alfa sürümüyle muhteşem bir şeyler geliştirirseniz bize bildirin şeffaflık.

Yararlı kaynaklar