一、前言：

????前兩年玩過一段時間《看門狗2》，雖然個人覺得游戲內(nèi)容非常重復(fù)、劇情拖沓，只玩了一半就躺在硬盤里吃灰，但里面的很多美術(shù)效果和創(chuàng)意都非常值得學(xué)習和參考。比如在主角出現(xiàn)在自己遠程操控的攝像頭畫面中時，主角的身體會被蒙上一層馬賽克。這篇文章就分享一下我對于這個效果的制作思路和實現(xiàn)方法，文章的結(jié)尾會實現(xiàn)一個基于Custom Stencil的目標物馬賽克效果的基本模板，在此模板的基礎(chǔ)上進行自定義修改，即可實現(xiàn)你想要的任意擴展效果

二、效果分析

????首先，我們可以很容易的分析出這個畫面主要是由原始畫面（當然游戲畫面中還有許多其他后處理效果，這篇文章中不會討論）與覆蓋在角色身上的馬賽克兩個主要部分組成。

????我們可以將這個效果理解為：利用角色模型輪廓處理生成一個馬賽克遮罩，并在遮罩內(nèi)對畫面進行馬賽克化處理，遮罩外輸出原始畫面

????為了實現(xiàn)這個效果，我們需要了解兩種關(guān)鍵后處理效果的實現(xiàn)方法：

????1.畫面的馬賽克化后處理

????2.覆蓋角色的馬賽克遮罩

三、效果實現(xiàn)

1.馬賽克效果實現(xiàn)步驟

????為了實現(xiàn)馬賽克后處理效果，我們首先需要了解屏幕空間的坐標，將ScreenPosition中的Viewport UV通過后處理材質(zhì)直接輸出，你會看到如下畫面：

????可以看到屏幕空間的UVW坐標類似模型紋理的的Tex Coord（這里把Tex Coord輸出會的得到相同的結(jié)果），可以理解為窗口即是一張1X1的UVW?map，橫軸與縱軸的長寬比等于窗口尺寸的長寬比，知道了這個結(jié)果，我們就可以使用與紋理馬賽克化相同的方式對畫面進行馬賽克化操作

????通過以下邏輯，對UV做階段化處理，即可初步實現(xiàn)馬賽克畫面：

????但此時得到的并非我們想要的正方形馬賽克效果，因為窗口UV長寬比受窗口長寬比影響，所以輸出的馬賽克塊的長寬比與窗口長寬比相同，為了在任何窗口比例下得到正方形馬賽克塊，我們需要利用窗口尺寸對窗口UV做非等比縮放處理：

????把剛剛得到的階段化的窗口UV連接到Scene Texture并輸出，可以得到正方形馬賽克塊處理后的畫面：

????把得到的窗口UV處理邏輯保存成材質(zhì)函數(shù)，便于在后續(xù)制作中做擴展處理：

2.角色區(qū)域遮罩實現(xiàn)步驟

????為了實現(xiàn)角色遮罩的效果，我們首先需要了解引擎中的Custom Stencil后處理功能，這個功能允許我們?yōu)殚_啟了Custom Depth的物體設(shè)置單獨的Stencil Value，并通過Scene Texture在后處理材質(zhì)或半透明材質(zhì)中得到對應(yīng)的遮罩（這里需要注意的是，設(shè)置了Stencil Value的半透明材質(zhì)無法在后處理中通過Scene Texture獲取到其對應(yīng)遮罩）

????接下來的幾步可以幫助你理解和使用

????首先，為了使用此功能，我們需要在項目設(shè)置中開啟Custom Stencil：

? ? 然后，在角色模型的細節(jié)面板中勾選Custom Depth，并為Stencil Value設(shè)置任意大于0的整數(shù)（默認區(qū)間0~255）：

????接著，在后處理材質(zhì)中通過如下邏輯獲取對應(yīng)的角色遮罩，這個邏輯可以讓你根據(jù)輸入的Stencil Value得到一個非0即1的遮罩（對應(yīng)Stencil Value的模型區(qū)域為1，其余區(qū)域為0）

????把得到的遮罩輸出到窗口中，即可得到遮罩的畫面：

????把剛剛得到的遮罩保存成材質(zhì)函數(shù)，便于后續(xù)使用和擴展：

????現(xiàn)在，我們已經(jīng)得到了角色模型的遮罩，但只是原始模型輪廓遮罩，并不適配馬賽克塊

????所以，我們需要對角色遮罩做相同的馬賽克處理：

????把馬賽克處理后的角色遮罩輸出，可以得到如下畫面：

3.馬賽克與原始畫面混合

????現(xiàn)在，我們得到了馬賽克化后的畫面，并得到了馬賽克化的角色遮罩，可以先通過線性插值將馬賽克與原始畫面進行混合：

????把插值結(jié)果輸出，可以得到如下畫面：

????可以看到馬賽克覆蓋到了角色身上，但相對于角色，馬賽克的位置整體偏向右下，使角色的左上半邊暴露在馬賽克外

????這是因為我們使用的UV階段化邏輯中，每一階UV塊的坐標值取自于當前塊左上角點對應(yīng)的坐標值，所以每一個馬賽克塊的顏色填充取自當前塊左上角點對應(yīng)的原始畫面顏色

????因此，當色塊的左上角點剛好處于角色原始遮罩左邊時，即使色塊覆蓋到了角色遮罩區(qū)域，依然會被填充為取自色塊左上角點的黑色，導(dǎo)致角色左上半邊沒有馬賽克遮蓋

????為了矯正馬賽克的覆蓋區(qū)域，我們需要修改UV階段化邏輯，讓馬賽克向左上方移動半個色塊的距離，使色塊的填充色取自色塊中心點對應(yīng)的原始畫面顏色：

????把修改后的結(jié)果輸出到窗口，可以得到如下畫面：

????可以看到馬賽克位置已經(jīng)與角色完全重合，但在四周依然角色原始畫面暴露在馬賽克之外。把馬賽克區(qū)域輸出改成黑色，可以方便的觀察到角色原始畫面暴露的部分：

? ? 接下來，為了擴大馬賽克遮罩使剩余的角色畫面被馬賽克覆蓋，我們把馬賽克遮罩向 (1,0),(-1,0),(0,1),(0,-1),(1,1),(-1,-1),(1,-1),(-1,1) 共8個方向分別偏移，并將得到的結(jié)果與原始馬賽克遮罩對比取最大值。為此我們需要在UV階段化邏輯中加入UV偏移輸入：

????把修改后的材質(zhì)函數(shù)按照上述邏輯連接，可以得到如下材質(zhì)邏輯圖：

????把得到的插值結(jié)果輸出，可以得到如下畫面：

????現(xiàn)在，我們已經(jīng)得到了一個完全覆蓋角色的馬賽克效果，如果你想要在一個目標與攝像機距離相對固定的視角下使用此效果，目前已經(jīng)實現(xiàn)了可以滿足你需求的目標物馬賽克效果模板。接下來是我對一些非固定視角下的修改和應(yīng)用

四、擴展應(yīng)用

????在大范圍運動視角下，由于馬賽克的尺寸相對于窗口尺寸保持不變，當我們把視角拉遠時，或由于馬賽克相對于角色過大無法分辨角色輪廓，或由于馬賽克遮罩精度降低而出現(xiàn)未完全覆蓋角色的情況，當我們把視角拉近時，會由于馬賽克相對于角色過小，幾乎還原畫面細節(jié)，失去了馬賽克的原有作用。為了解決這個問題，使馬賽克尺寸相對于角色保持不變，我希望利用角色坐標與攝像機坐標動態(tài)計算馬賽克尺寸

????為了方便預(yù)覽和使用，我把材質(zhì)混合模式從后處理改成半透明，在角色身上附加一個頂點法線方向向內(nèi)的球體模型，并把材質(zhì)引用設(shè)置為我們的半透明材質(zhì)，接下來，在材質(zhì)邏輯中把原來的馬賽克數(shù)量變量，改為利用球體與攝像機距離動態(tài)計算的材質(zhì)邏輯，并禁用材質(zhì)的深度檢測：

????

?? ?現(xiàn)在，就得到了一個動態(tài)計算馬賽克尺寸的后處理效果，隨著攝像機的拉近拉遠，馬賽克尺寸相對于角色會保持不變：

????感謝你看到這里，如果你對這個效果有其他的想法或?qū)崿F(xiàn)方法，請在評論區(qū)里和我分享討論吧！