在UE4中設置色鍵材質

來源：納金網 | 責任編輯：傳說的落葉 | 發布時間： 2019-04-23 08:48 | 瀏覽量：

作者： Ryan Brucks

兩年多以前，有人在 UE4 AnswerHub 上問及對材質使用色鍵摳像（又稱“綠幕”）的問題。那個帖子給了我靈感，讓我仿制了一個非常基礎的色鍵功能，取名為 Chroma Key Alpha，該功能不久前已添加到 UE4。雖然我們在發行說明中有過介紹，但說明的篇幅可能很長，很多深藏其中的功能都容易被遺忘，如果當時沒有使用它們的理由，更是如此。

AR 近來呈興起之勢，許多新工具和設備都不斷得到支持；UE4 最近添加的 ARKit 和 ARCore 支持就是很好的證明。大家可以前往此處閱讀 Tim Sweeney 發布的 WWDC 主題帖來了解相關內容，其中包括一些很棒的項目。

話說到這，感覺是時候向大家展示一些在 UE4 中設置色鍵材質的例子了。雖然大多數 AR 演示都是將數字對象合成到實時視頻中，但是有些項目需要混合現實，包括將實景對象投影到數字場景中。這通常涉及某種綠幕設置，這種設置可能更具挑戰性，因為你沒有內置的阿爾法。

從綠幕中提取阿爾法的過程，我們稱之為“色鍵摳像”。我們最近添加了一個名為 Composure 的 UE4 插件，它可以簡化后處理和渲染元素的混合與匹配，是一個嘗試使用實時色鍵材質的好地方。

182944rvvhuukrlulqquql

在開始之前，我想先說明，要獲得高質量的色鍵摳像結果不容易，而且通常需要結合使用不同的技術。許多軟件包提供了相當先進的色鍵摳像方法，例如 Nuke。為了獲得非常高質量的色鍵阿爾法，Nuke 會采用很多需要密集運算的做法。某些項目，如現場直播，則傾向于使用昂貴的專用硬件解決方案。

所以必須承認，相較之下我們的實時版色鍵摳像功能是相當基礎的，而且很可能需要根據內容做大量的調整，以使其看起來可以接受。但是，能夠在編輯器中隨時使用我們的色鍵做 previs 和測試，也是非常有用的。

基本方法

色鍵摳像背后的原理是通過創建對比色蒙版來生成阿爾法蒙版。然后，使用另一個蒙版進行“去除溢色”，即消除對象上的綠色陰影。去除溢色蒙版通常只是阿爾法蒙版結果的柔化、反向版本。最后，可以使用去除溢色蒙版的某個版本來補回一些虛擬的環境照明，用一種與待合成環境相匹配的顏色來替代綠色陰影。

上述幾個步驟相對簡單，實現方法不勝枚舉。我做的第一個版本是非常基礎的，并且內置到 UE4 中有一段時間了。如上所述，這就是 Chroma Key Alpha 的工作原理，下圖是其用法的基本示例：

182944rffizi3j51f0wkij

它需要的輸入包括圖像顏色、色鍵顏色以及一些阿爾法和去除溢色蒙版輸入。在接下來的示例中，我不會局限于使用這個節點的示例，而是展示如何執行該功能的各個步驟，以及一些優于初始設置的版本。

顏色提取

生成比色的第一步是消除圖像中的亮度，以免綠幕上的細微陰影、摺痕或照明光線產生干擾。在這個功能的第一個版本中，我只是簡單地將顏色規范化。這種做法效果相當好，只是會產生一些邊緣偽影。

另一種消除亮度的方法是除以分量和。采用這種方法可以獲得不錯的均勻色調，但往往會產生浮邊光暈偽影。我意識到在 Photoshop 中使用顏色圖層時沒有這樣的邊緣偽影，所以我決定想辦法消除它們。

答案是使用基于亮度的飽和度，這可以防止深色的飽和像素在顏色貼圖中變得飽和。事實證明，深色的飽和邊緣像素是兩次立方紋理調整的結果。

該測試圖像來自電視節目《Lost in Time》，它使用 UE4 渲染場景。注意，該測試圖像不是高質量的源素材；它采用了低質量的 jpeg 有損壓縮格式。

182944tzr2zdsz8bss88fl

為了生成基于亮度的飽和度貼圖，需要先對圖像去飽和度，并使用簡單指數函數 e ^ -x 來生成亮度曲線。亮度值 x 根據定義亮度蒙版強度的參數按比例調整。進行規范化之后，1 表示好的默認值，0 則會給出一個與除以分量和完全一樣的結果。下面是相關的代碼：

float3 ExtractColor(float3 Color, float LumaMask)

182945e5krkk02dk0k399c

完成顏色貼圖的提取之后，下一步就是通過比色來生成蒙版。這一步相當簡單。首先，應該通過相同的 ExtractColor 函數運行 ChromaColor （或者進行規范化之類的操作，前提是使用了該方法）。之后，獲取顏色貼圖和 ChromaColor 之間的差值。然后，計算出該差值的范圍，并通過寬范圍的漸變提取出清晰的蒙版，以分離出具體的預期誤差范圍。

182945pc5eaakii54ziev5

下圖是以節點呈現的示例，其中便使用了上述 ExtractColor 函數：

182945vtfuzd32ggzfmsy8

注意，在上面的示例中，我是把“Chroma Alpha Strength”用作乘數。我認為這是一種更直觀的指定邊緣銳度的方法。在 UE4 封裝的材質函數中，我是用 Min 和 Max 來指定這一參數的。結果是一樣的，但這意味著 Max 必須始終設置為大于 Min 的值，所以 Min 需要不斷調整。

去除溢色

在使用色鍵提取出阿爾法蒙版之后，下一個重要的步驟是對剩余的像素去除溢色。也就是說，我們要消除主體輪廓上的綠色陰影。由于照明和攝像機的各種影響，這一步是很有必要的。舉例來說，使用的綠幕越大，就會有越多的綠色反光投射到主體上。此外，攝像機往往會拾取各種鏡頭效果，從而導致主體上顯現出明亮像素反射的一點高光效果，即使現場的反光已經降到最低。

要想處理好去除溢色，首先必須使用與阿爾法蒙版相同的設置，但是把取值范圍設得更寬一些，以提供更柔和的蒙版。在內置函數中，這是通過引入一個單獨的 Despill Max 來實現的。用于去除溢色的 Min 和用于阿爾法的 Min 是相同的。

得到去除溢色阿爾法之后，便可以用它來消除圖像中色鍵顏色的陰影。最初，我只是使用去除溢色阿爾法進行去飽和度，但是通過減去與源圖像中色鍵顏色匹配的那一部分顏色，可以得到更好的結果。

182945pvzf0300ci09qpq0

以下是使用去除溢色阿爾法消除圖像中的色度溢出的基本邏輯：

182946w1uh1hi6u2qwaazu

注意，對于這幅圖像，使用兩個 Chroma Color 和兩個 Chroma Key Alpha 節點可以獲得更高質量的結果。其中的道理，想必大家也明白：由于地板和墻面的顏色差異很大，如果只使用單一比色，就必須把分界值設得更寬。如此一來就不能靈活地柔化邊緣，使畫面看上去如同產生了運動模糊，不易處理。如果使用兩個，每個阿爾法的結果將通過 Min 進行組合。去除溢色阿爾法將通過 Max 進行組合。

添加虛擬反光的過程很簡單。一種較好的做法是，先對圖像的底色進行去飽和度，再應用手動設定的反光或背景顏色。這么做的原因有兩個。第一，你需要去掉源素材中的任何現有陰影，你真正想要的只是亮度。第二，大部分陰影都是高光表面上因掠射角而產生的，而對于所有非金屬，高光部分被完全地去飽和之后，只有在光線下才會有顏色。

182946j8ju1psj6pib55v2

專業的合成人員在使用蒙版和添加虛擬照明方面可能需要做得非常細致，包括使用不同的渲染元素來幫助獲得正確的照明反應。這有點超出了本文的范圍，但希望這至少能為如何處理實時合成提供一種思路。

下面是另一個例子，這次使用了 Epic 視頻制作團隊的 Joe Wilson 提供的更高質量的圖像。這是工具程序員 Lauren Ridge 在制作《星球大戰 VR 體驗》演示視頻過程中拍攝的一個鏡頭，視頻曾在 WWDC 上展示過（頁面頂部有鏈接）。源素材質量越高，結果就會越理想。這個示例使用了現有版本的 Chroma Key Alpha。

182946d9ycfy9pfs8vhkms

在最后一幀中添加的反光可能很難感知到（除了邊緣處），尤其是 Vive 頭盔和控制器這樣的顏色較深的反射部位。注意，添加的反光可以補回天空在這些元素上的反射效果，從而幫助實現更自然地融合。

下圖是上述設置的完整材質信息，包括去除溢色和反光/修邊色的添加：

182946t54vm603199046mm

Composure

剛開始時我簡略地提了一下 Composure。我還沒試過向 Composure 中添加色鍵模式，但是經過對這個示例的深入研究，我覺得設置起來會十分簡單。其中有個 Final Compositing Material 可以用來處理各種合成設置。對于這個示例項目，所有的顏色蒙版都是從其他程序（例如 Nuke）導入的，但是這些蒙版在材質中的運用和本文描述的色鍵節點設置如出一轍，可以輕松地換用。