Chrome 影片中的 Alpha 透明度

法蘭索瓦博福
François Beaufort

Chrome 影片的 Alpha 透明度

Chrome 31 現已支援 WebM 的影片 Alpha 透明度。

也就是說,在使用 Alpha 通道編碼 WebM (VP8VP9) 的「綠幕」影片時,Chrome 會同時將 Alpha 版納入考量。也就是說,您可以使用透明背景播放影片,例如在網頁、圖片上,甚至其他影片上。

simpl.info/videoalpha 中的示範請見。有點超現實,而且有點會圍繞邊線發展 (說真的),但你知道的是什麼!

如何製作 Alpha 版影片

我們說明的方法使用開放原始碼工具 Blender 和 ffmpeg:

  1. 將拍攝主體置於單一顏色背景 (例如亮綠色布幕) 前。
  2. 處理影片,建構具有透明度資料的 PNG 靜態圖片陣列。
  3. 編碼為影片格式 (本例中為 WebM)。

您也可以使用專屬工具 (例如 Adobe After Effects) 來執行相同的工作。

1. 製作綠幕影片

首先,拍攝主體時,請務必讓背景所有內容在後續處理後都能「移除」(設為透明)。

最簡單的做法是在螢幕或窗簾等單一顏色背景前拍攝。最常使用的顏色是綠色或藍色,主要是因為這些顏色與膚色的差異。

我們有幾份 指南來拍攝綠幕影片 (又稱色鍵/色鍵) 及許多地方,可用來購買綠色和藍色的背景背景幕。或者,您也可以使用色鍵顏料繪製背景。

「The Great Gatsby VFX reel」(The Great Gatsby VFX reel) 畫面會顯示

拍攝影片的訣竅:

  • 確認拍攝主體沒有與背景相同顏色的衣服或物體,否則這些物品在最終影片中會顯示為「洞」。即使是小型標誌或珠寶也可能會有問題。
  • 使用一致、均勻的光線,並避免陰影:目標是盡可能在背景中採用最小的色彩範圍,之後這些色彩仍然必須變為透明。
  • 使用多個散光效果有助於避免陰影和背景顏色變化。
  • 避免閃亮的背景:霧面表面散發較光的光線。

2. 使用綠幕影片製作原始 Alpha 版影片

下列步驟說明如何透過綠幕影片製作原始 Alpha 版影片:

  1. 拍攝綠螢幕畫面的影片後,您可以使用 Blender 等開放原始碼工具,將影片轉換為含有 Alpha 資料的 PNG 檔案陣列。使用 Blender 的顏色按鍵移除綠幕,並使其透明化。(請注意,PNG 並不方便:可使用任何保留 Alpha 版管道資料的格式。)
  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. 將 Alpha 影片編碼為 WebM

原始 Alpha 測試版影片可透過兩種方式編碼為 WebM。

  1. 使用 ffmpeg:我們新增了 ffmpeg 支援功能,用來編碼 WebM Alpha 版影片。

    使用 ffmpeg 與輸入影片 (包括 Alpha 資料) 搭配使用,將輸出格式設為 WebM,編碼將根據規格自動以正確的格式完成 (注意:您目前必須從 git 樹狀結構取得最新版本的 ffmpeg,這項功能才能正常運作)。

    指令範例:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. 使用 webm-tools:

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

    webm-tools 是一組與 WebM 相關的簡易開放原始碼工具,由 WebM 專案作者維護,其中提供用於製作 Alpha 透明度的 WebM 影片的工具。

    使用 --help 執行二進位檔,即可查看 alpha_encoder 支援的選項清單。

4. 在 Chrome 中播放

如要在 Chrome 中播放經過編碼的 WebM 檔案,只要將檔案設為影片元素的來源即可。

他們是怎麼做到的?

我們訪問了 Google 工程師 Vignesh Venkatasubramanian,他在這項專案中的表現。他總結了各項主要難題:

  • VP8 位元串流不支援 Alpha 版。因此我們必須加入 Alpha 版,而不會中斷 VP8 位元串流,也不會影響現有玩家。
  • Chrome 的轉譯器無法轉譯 Alpha 版的影片。
  • Chrome 為多部硬體/GPU 裝置提供多種轉譯路徑。每個算繪路徑都必須變更,才能支援顯示 Alpha 版影片。

我們可以想到很多有趣的影片 Alpha 透明度用途:遊戲、互動式影片、合作述說故事 (將自己的影片加入背景影片/圖片)、含有替代角色或情節的影片,以及使用重疊影片元件的網頁應用程式。

祝你製片愉快!如果您用 Alpha 透明度打造出令人驚豔的內容,請通知我們。

實用資源