شفافیت آلفا در ویدیوی کروم

سام داتون
فرانسوا بوفور
François Beaufort
GitHub

شفافیت آلفا در ویدیوی کروم

کروم 31 اکنون از شفافیت آلفای ویدیویی در WebM پشتیبانی می کند.

به عبارت دیگر، Chrome هنگام پخش ویدیوهای « صفحه سبز » کدگذاری شده روی WebM ( VP8 و VP9 ) با کانال آلفا، کانال آلفا را در نظر می گیرد. این بدان معنی است که می توانید ویدیوهایی با پس زمینه شفاف پخش کنید: روی صفحات وب، تصاویر یا حتی ویدیوهای دیگر.

یک نسخه نمایشی در simpl.info/videoalpha وجود دارد. تا حدودی سورئال، و کمی خشن در اطراف لبه ها (به معنای واقعی کلمه) اما شما ایده را دریافت می کنید!

نحوه ساخت ویدیوهای آلفا

روشی که ما توضیح می دهیم از ابزارهای متن باز Blender و ffmpeg استفاده می کند:

  1. از سوژه خود در مقابل یک پس زمینه تک رنگ مانند پرده سبز روشن فیلم بگیرید.
  2. فیلم را پردازش کنید تا آرایه ای از تصاویر ثابت PNG با داده های شفاف ایجاد کنید.
  3. به فرمت ویدیویی (در این مورد WebM) کدگذاری کنید.

همچنین ابزارهای اختصاصی برای انجام همان کار وجود دارد، مانند Adobe After Effects ، که ممکن است ساده تر به نظر شما برسد.

1. یک ویدیو با صفحه سبز بسازید

اول از همه، باید از سوژه خود به گونه ای فیلم بگیرید که با پردازش بعدی، همه چیز در پس زمینه را بتوان «حذف» کرد (شفاف کرد).

ساده ترین راه برای انجام این کار، فیلمبرداری در مقابل یک پس زمینه تک رنگ، مانند صفحه نمایش یا پرده است. سبز یا آبی رنگ هایی هستند که بیشتر مورد استفاده قرار می گیرند، بیشتر به دلیل تفاوت آنها با رنگ پوست.

چندین راهنما به صورت آنلاین برای فیلمبرداری ویدیوی صفحه سبز (که به عنوان کلید رنگی نیز شناخته می شود) و مکان های زیادی برای خرید پس زمینه های صفحه سبز و آبی وجود دارد. از طرف دیگر، می‌توانید پس‌زمینه‌ای را با رنگ کلیدی کروما رنگ کنید.

حلقه بزرگ گتسبی VFX نشان می دهد که چقدر می توان با صفحه سبز به انجام رسید.

چند نکته برای فیلمبرداری:

  • اطمینان حاصل کنید که سوژه شما لباس یا اشیایی همرنگ پس زمینه ندارد، در غیر این صورت این موارد به صورت "سوراخ" در ویدیوی نهایی نشان داده می شوند. حتی لوگوها یا جواهرات کوچک نیز می توانند مشکل ساز باشند.
  • از نور ثابت و یکنواخت استفاده کنید و از سایه ها اجتناب کنید: هدف این است که کمترین طیف رنگی ممکن را در پس زمینه داشته باشید که متعاقباً باید شفاف شود.
  • استفاده از نورهای پراکنده متعدد به جلوگیری از سایه ها و تغییرات رنگ پس زمینه کمک می کند.
  • از پس زمینه های براق اجتناب کنید: سطوح مات نور را بهتر پخش می کنند.

2. ویدیوی آلفای خام را از ویدیوی صفحه سبز ایجاد کنید

مراحل زیر یک راه برای ایجاد یک ویدیوی آلفای خام از ویدیوهای صفحه سبز را شرح می دهد:

  1. هنگامی که یک ویدیو با صفحه سبز گرفته اید، می توانید از یک ابزار منبع باز مانند Blender برای تبدیل ویدیو به آرایه ای از فایل های PNG با داده های آلفا استفاده کنید. از کلیدهای رنگی Blender برای حذف صفحه سبز و شفاف کردن آن استفاده کنید. (توجه داشته باشید که PNG اجباری نیست: هر قالبی که داده های کانال آلفا را حفظ کند خوب است.)

  2. با استفاده از یک ابزار منبع باز مانند ffmpeg، آرایه فایل های PNG را به یک ویدیوی خام YUVA تبدیل کنید:

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

    متناوباً با استفاده از دستور ffmpeg مانند این فایل ها را مستقیماً در WebM رمزگذاری کنید:

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

اگر می خواهید صدا اضافه کنید، می توانید از ffmpeg برای mux کردن آن با دستوری مانند این استفاده کنید:

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

3. ویدیوی آلفا را در WebM رمزگذاری کنید

ویدیوهای آلفای خام را می توان به دو روش در WebM کدگذاری کرد.

  1. با ffmpeg: ما برای رمزگذاری ویدیوهای آلفا WebM به ffmpeg پشتیبانی اضافه کردیم.

    از ffmpeg با یک ویدیوی ورودی شامل داده‌های آلفا استفاده کنید، فرمت خروجی را روی WebM تنظیم کنید و کدگذاری به‌طور خودکار در قالب درست طبق مشخصات انجام می‌شود. (توجه: در حال حاضر باید مطمئن شوید که آخرین نسخه ffmpeg را از درخت git دریافت کنید تا این کار کار کند.)

    نمونه دستور:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. استفاده از webm-tools:

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

    webm-tools مجموعه ای از ابزارهای منبع باز ساده مرتبط با WebM است که توسط نویسندگان پروژه WebM نگهداری می شود، از جمله ابزاری برای ایجاد ویدیوهای WebM با شفافیت آلفا.

    باینری را با --help اجرا کنید تا لیست گزینه های پشتیبانی شده توسط alpha_encoder را ببینید.

4. پخش در کروم

برای پخش فایل WebM کدگذاری شده در کروم، کافی است فایل را به عنوان منبع یک عنصر ویدیویی تنظیم کنید.

آنها چطور این کار را کردند؟

ما با مهندس گوگل ویگنش ونکاتاسوبرامانیان در مورد کار او در این پروژه صحبت کردیم. او چالش های کلیدی را به طور خلاصه بیان کرد:

  • بیت استریم VP8 هیچ پشتیبانی از کانال آلفا نداشت. بنابراین مجبور شدیم آلفا را بدون شکستن بیت‌استریم VP8 و بدون شکستن پخش‌کننده‌های موجود، ترکیب کنیم.
  • رندر کروم قادر به ارائه ویدیو با آلفا نبود.
  • Chrome چندین مسیر رندر برای چندین دستگاه سخت‌افزار/GPU دارد. هر مسیر رندر باید برای پشتیبانی از رندر ویدیوهای آلفا تغییر می کرد.

می‌توانیم موارد استفاده جالب زیادی را برای شفافیت آلفای ویدیویی در نظر بگیریم: بازی‌ها، ویدیوهای تعاملی، داستان‌گویی مشترک (ویدیوی خود را به یک ویدیو/تصویر پس‌زمینه اضافه کنید)، ویدیوهایی با شخصیت‌ها یا طرح‌های جایگزین، برنامه‌های وب که از اجزای ویدیویی همپوشانی استفاده می‌کنند.

فیلم سازی مبارک! اگر چیزی شگفت انگیز با شفافیت آلفا می سازید، به ما اطلاع دهید.

منابع مفید