ความโปร่งใสของอัลฟ่าในวิดีโอ Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

ความโปร่งใสของอัลฟ่าในวิดีโอ Chrome

ตอนนี้ Chrome 31 รองรับความโปร่งใสอัลฟาของวิดีโอใน WebM แล้ว

กล่าวคือ Chrome จะพิจารณาช่องอัลฟ่าเมื่อเล่นวิดีโอ "กรีนสกรีน" ที่เข้ารหัสเป็น WebM (VP8 และ VP9) ที่มีช่องอัลฟ่า ซึ่งหมายความว่าคุณสามารถเล่นวิดีโอที่มีพื้นหลังโปร่งใสได้ เช่น วางซ้อนบนหน้าเว็บ รูปภาพ หรือแม้แต่วิดีโออื่นๆ

ดูการสาธิตได้ที่ simpl.info/videoalpha ค่อนข้างเหนือจริงและดูไม่เรียบร้อย (ตามตัวอักษร) แต่คุณก็เข้าใจไอเดียแล้ว

วิธีสร้างวิดีโออัลฟ่า

วิธีการที่เราอธิบายใช้เครื่องมือโอเพนซอร์สอย่าง Blender และ ffmpeg

  1. ถ่ายวิดีโอวัตถุหน้าพื้นหลังสีเดียว เช่น ม่านสีสด
  2. ประมวลผลวิดีโอเพื่อสร้างอาร์เรย์ภาพนิ่ง PNG ที่มีข้อมูลความโปร่งใส
  3. เข้ารหัสเป็นรูปแบบวิดีโอ (ในกรณีนี้คือ WebM)

นอกจากนี้ยังมีเครื่องมือที่เป็นกรรมสิทธิ์สำหรับงานเดียวกัน เช่น Adobe After Effects ซึ่งคุณอาจพบว่าใช้งานง่ายกว่า

1. สร้างวิดีโอกรีนสกรีน

ก่อนอื่น คุณต้องถ่ายวัตถุในลักษณะที่ระบบจะ "นำออก" (ทำให้โปร่งใส) ทุกอย่างในพื้นหลังได้ด้วยการประมวลผลในภายหลัง

วิธีที่ง่ายที่สุดคือถ่ายทำหน้าพื้นหลังสีเดียว เช่น หน้าจอหรือผ้าม่าน สีเขียวหรือน้ำเงินเป็นสีที่ใช้บ่อยที่สุด เนื่องจากสีเหล่านี้แตกต่างจากสีผิว

มีคำแนะนำมากมายทางออนไลน์เกี่ยวกับการถ่ายทำวิดีโอกรีนสกรีน (หรือที่เรียกว่าโครมาคีย์) และแหล่งซื้อฉากหลังสีเขียวและน้ำเงินมากมาย หรือจะวาดพื้นหลังด้วยสีสำหรับคีย์โครมาก็ได้

ตัวอย่าง VFX ของ The Great Gatsby แสดงให้เห็นว่ากรีนสกรีนมีประโยชน์เพียงใด

เคล็ดลับในการถ่ายทำมีดังนี้

  • ตรวจสอบว่าวัตถุหรือเสื้อผ้าของวัตถุในวิดีโอไม่มีสีเดียวกับฉากหลัง ไม่เช่นนั้นวัตถุหรือเสื้อผ้าจะปรากฏเป็น "รู" ในวิดีโอขั้นสุดท้าย แม้แต่โลโก้หรือเครื่องประดับเล็กๆ ก็อาจทำให้เกิดปัญหาได้
  • ใช้แสงที่สม่ำเสมอและหลีกเลี่ยงเงา: เป้าหมายคือให้มีช่วงสีที่น้อยที่สุดเท่าที่จะเป็นไปได้ในพื้นหลังซึ่งจะต้องทำให้โปร่งใสในภายหลัง
  • การใช้แสงที่กระจายแสงหลายแหล่งจะช่วยหลีกเลี่ยงเงาและสีพื้นหลังที่เปลี่ยนแปลง
  • หลีกเลี่ยงพื้นหลังที่เป็นมันวาว เนื่องจากพื้นผิวด้านจะกระจายแสงได้ดีกว่า

2. สร้างวิดีโออัลฟ่าดิบจากวิดีโอกรีนสกรีน

ขั้นตอนต่อไปนี้อธิบายวิธีสร้างวิดีโออัลฟ่าดิบจากวิดีโอกรีนสกรีน

  1. เมื่อถ่ายวิดีโอกรีนสกรีนแล้ว คุณสามารถใช้เครื่องมือโอเพนซอร์สอย่าง Blender เพื่อแปลงวิดีโอเป็นอาร์เรย์ไฟล์ PNG ที่มีข้อมูลอัลฟา ใช้การแยกสีของ Blender เพื่อนำกรีนสกรีนออกและทำให้โปร่งใส (โปรดทราบว่าไม่จำเป็นต้องใช้ PNG เท่านั้น รูปแบบใดก็ได้ที่เก็บข้อมูลช่องทางอัลฟ่าไว้)

  2. แปลงอาร์เรย์ไฟล์ PNG เป็นวิดีโอ YUVA ดิบโดยใช้เครื่องมือโอเพนซอร์ส เช่น ffmpeg

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

    หรือจะเข้ารหัสไฟล์เป็น WebM โดยตรงก็ได้โดยใช้คำสั่ง ffmpeg ดังนี้

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

หากต้องการเพิ่มเสียง คุณสามารถใช้ ffmpeg เพื่อรวมเสียงนั้นด้วยคำสั่งอย่างเช่น

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

3. เข้ารหัสวิดีโออัลฟ่าเป็น WebM

วิดีโออัลฟ่าดิบสามารถเข้ารหัสเป็น WebM ได้ 2 วิธี

  1. เมื่อใช้ ffmpeg: เราได้เพิ่มการรองรับ ffmpeg เพื่อเข้ารหัสวิดีโอ WebM เวอร์ชันอัลฟ่า

    ใช้ ffmpeg กับวิดีโออินพุตที่มีข้อมูลอัลฟ่า ตั้งค่ารูปแบบเอาต์พุตเป็น WebM แล้วระบบจะเข้ารหัสโดยอัตโนมัติในรูปแบบที่ถูกต้องตามข้อกำหนด (หมายเหตุ: ปัจจุบันคุณต้องตรวจสอบว่าได้ดาวน์โหลด ffmpeg เวอร์ชันล่าสุดจาก Git Tree เพื่อให้การดำเนินการนี้ใช้งานได้)

    ตัวอย่างคำสั่ง

    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. การเล่นใน Chrome

หากต้องการเล่นไฟล์ WebM ที่เข้ารหัสใน Chrome เพียงตั้งค่าไฟล์เป็นแหล่งที่มาขององค์ประกอบวิดีโอ

มาดูกันว่าผู้เชี่ยวชาญเหล่านี้ใช้วิธีการใดบ้าง

เราพูดคุยกับ Vignesh Venkatasubramanian วิศวกรของ Google เกี่ยวกับผลงานของเขาในโปรเจ็กต์นี้ เขาสรุปความท้าทายหลักๆ ไว้ดังนี้

  • บิตสตรีม VP8 ไม่รองรับแชแนลอัลฟ่า เราจึงต้องรวมเอาอัลฟ่าเข้ามาโดยไม่ทำให้บิตสตรีม VP8 เสียหายและไม่ทำให้โปรแกรมเล่นที่มีอยู่ใช้งานไม่ได้
  • โปรแกรมแสดงผลของ Chrome แสดงผลวิดีโอที่มีค่าอัลฟ่าไม่ได้
  • Chrome มีเส้นทางการแสดงผลหลายเส้นทางสำหรับอุปกรณ์ฮาร์ดแวร์/GPU หลายเครื่อง เราต้องเปลี่ยนเส้นทางการแสดงผลทั้งหมดเพื่อรองรับการแสดงผลวิดีโอเวอร์ชันอัลฟ่า

เรานึกถึง Use Case ที่น่าสนใจมากมายสำหรับความโปร่งใสระดับอัลฟ่าของวิดีโอ เช่น เกม วิดีโอแบบอินเทอร์แอกทีฟ การเล่าเรื่องแบบร่วมมือ (เพิ่มวิดีโอของคุณเองลงในวิดีโอ/รูปภาพพื้นหลัง) วิดีโอที่มีตัวละครหรือพล็อตทางเลือก เว็บแอปที่ใช้คอมโพเนนต์วิดีโอวางซ้อน

ขอให้สนุกกับการสร้างภาพยนตร์ โปรดแจ้งให้เราทราบหากคุณสร้างสิ่งที่น่าสนใจด้วยฟีเจอร์การแชร์แบบอัลฟ่า

แหล่งข้อมูลที่เป็นประโยชน์