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

แซม ดัตตัน
ฟร็องซัว โบฟอร์
François Beaufort
GitHub

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

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

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

มีเดโมที่ simpl.info/videoalpha ค่อนข้างเซอร์ไพรส์และรอบขอบขรุขระเล็กน้อย (จริงๆ แล้วคุณนึกออกเลย)

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

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

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

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

1. ถ่ายวิดีโอกรีนสกรีน

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

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

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

Reel Great Gatsby VFX แสดงให้เห็นว่ากรีนสกรีนสามารถทำสิ่งต่างๆ ได้มากน้อยเพียงใด

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

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

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

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

  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 เพื่อให้ทำงานได้)

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

    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 หลายเครื่อง ต้องเปลี่ยนเส้นทางการแสดงผลทั้งหมดเพื่อรองรับการแสดงผลวิดีโออัลฟ่า

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

ขอให้มีความสุขกับการถ่ายทำ ถ้าคุณสร้างผลงานที่น่าทึ่งด้วย ความโปร่งใสแบบอัลฟ่า

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