Chrome 影片的 Alpha 透明度
Chrome 31 現已支援 WebM 的影片 Alpha 透明度。
也就是說,在使用 Alpha 通道編碼 WebM (VP8 和 VP9) 的「綠幕」影片時,Chrome 會同時將 Alpha 版納入考量。也就是說,您可以使用透明背景播放影片,例如在網頁、圖片上,甚至其他影片上。
simpl.info/videoalpha 中的示範請見。有點超現實,而且有點會圍繞邊線發展 (說真的),但你知道的是什麼!
如何製作 Alpha 版影片
我們說明的方法使用開放原始碼工具 Blender 和 ffmpeg:
- 將拍攝主體置於單一顏色背景 (例如亮綠色布幕) 前。
- 處理影片,建構具有透明度資料的 PNG 靜態圖片陣列。
- 編碼為影片格式 (本例中為 WebM)。
您也可以使用專屬工具 (例如 Adobe After Effects) 來執行相同的工作。
1. 製作綠幕影片
首先,拍攝主體時,請務必讓背景所有內容在後續處理後都能「移除」(設為透明)。
最簡單的做法是在螢幕或窗簾等單一顏色背景前拍攝。最常使用的顏色是綠色或藍色,主要是因為這些顏色與膚色的差異。
我們有幾份 指南來拍攝綠幕影片 (又稱色鍵/色鍵) 及許多地方,可用來購買綠色和藍色的背景背景幕。或者,您也可以使用色鍵顏料繪製背景。
「The Great Gatsby VFX reel」(The Great Gatsby VFX reel) 畫面會顯示
拍攝影片的訣竅:
- 確認拍攝主體沒有與背景相同顏色的衣服或物體,否則這些物品在最終影片中會顯示為「洞」。即使是小型標誌或珠寶也可能會有問題。
- 使用一致、均勻的光線,並避免陰影:目標是盡可能在背景中採用最小的色彩範圍,之後這些色彩仍然必須變為透明。
- 使用多個散光效果有助於避免陰影和背景顏色變化。
- 避免閃亮的背景:霧面表面散發較光的光線。
2. 使用綠幕影片製作原始 Alpha 版影片
下列步驟說明如何透過綠幕影片製作原始 Alpha 版影片:
- 拍攝綠螢幕畫面的影片後,您可以使用 Blender 等開放原始碼工具,將影片轉換為含有 Alpha 資料的 PNG 檔案陣列。使用 Blender 的顏色按鍵移除綠幕,並使其透明化。(請注意,PNG 並不方便:可使用任何保留 Alpha 版管道資料的格式。)
使用 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。
使用 ffmpeg:我們新增了 ffmpeg 支援功能,用來編碼 WebM Alpha 版影片。
使用 ffmpeg 與輸入影片 (包括 Alpha 資料) 搭配使用,將輸出格式設為 WebM,編碼將根據規格自動以正確的格式完成 (注意:您目前必須從 git 樹狀結構取得最新版本的 ffmpeg,這項功能才能正常運作)。
指令範例:
ffmpeg -i myAlphaVideo.webm output.webm
使用 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 透明度打造出令人驚豔的內容,請通知我們。