Spark AR 人物外框效果 | Background Remove with Outline Effect

教學 Spark AR 如何使用 Patch Editor 幫人物去背加上外框

Spark AR 內建很好用的去背效果，透過 Patch Editor，我們可以幫去背的人加上任意顏色的外框線。

實作

首先我們需要準備兩張貼圖：Person Segmentation x2

為了檢視方便，先將兩張去背貼圖命名為 Segmentation 與 Segmentation Outline。

Segmentation 貼圖本身可以調整 Edge Softness 與 Make Size，而 Make Size 可以控制去背的出血，只要兩張貼圖的 Make Size 不同，我們就可以計算他們相差的範圍，當成外框線。

Make Size 參數在不同數值下的視覺效果

首先設定兩張去背貼圖的參數，讓兩張貼圖的去背範圍產生差異。

• Segmentation 貼圖的 Make Size 設定為 1
• Segmentation Outline 貼圖的 Make Size 設定為 4
• 兩張貼圖的 Edge Softness 都設定為 0

設定 Canvas + Rectangle，並將需要的材質球與貼圖放到 Patch Editor

準備需要處理的貼圖與材質球放到 Patch Editor 上，接著用 Mix 將貼圖與材質球連接起來，如下圖：

此時應該就可以看到，畫面上去背的人物有外框線的效果了！

需要注意的是，第二個 Mix 的 Type 是 Color，並且它的第一個顏色是「透明」。

第二個 Patch 的類型設定

由於 Spark AR v66 與之後的版本差異，目前使用的版本很可能無法直接賦予透明色，點這裡看解決方法。

解釋

Mix 的 Patch Info 如下：

Linearly interpolates between two values modulated by Alpha.
在兩個數值之間根據 Alpha 做線性插值

假設當 Alpha 的數值範圍在 0~1 時（可以超過，例如 3）：

• 第一個數值是 10
• 第二個數值是 20，
• Alpha 是 0.5

那麼輸出的數值就會是 15（10 跟 20 的中間值）。

Mix.Alpha 在數值上的對應效果，就我的理解跟 Lerp 是一樣的？

Segmentation 的 A 是指透明度，通常範圍在 0~1 之間，例如 0.5 就是指 50% 透明度。去背貼圖中，有人的區域透明度是 1，沒有人的區域透明度是 0。

以下圖為例：0 對應的是綠色，1 對應的是透明。

把 Segmentation.A 接到 Mix.Alpha 可以達到「有人的區域是透明，沒有人的區域是綠色」的效果。

Mix.Alpha 在顏色上的對應效果

從綠色的畫面中剔除人物去背的區域

把 Segmentation.A 接到 Mix.Alpha 可以達到「從 Mix 第一個顏色中剔除Segmentation.A 的區域」的效果。

所以把 SegmentationOutline.A 接到 Mix 的第一個顏色，就變成了「從 SegmentationOutline.A 中剔除 Segmentation.A 的區域」，成功取得兩張去背貼圖的相差範圍，作為外框線。

第二個 Mix Patch 也是利用同樣的原理為外框線上色。第一個顏色是透明，第二個顏色是紅色；所以透明度為 0 的部分是透明，透明度為 1 的部分是紅色。

顏色的部分還可以用 Gradient 跟 SDF 等等玩更多花樣！想進一步了解 SDF 能做出什麼效果嗎？點此前往相關文章