UE4動態繪製網格皮膚

網格繪畫是玩家在遊戲中的物體上繪畫的能力。網格繪畫的例子有Super Mario Sunshine中的 goop、 Portal 2中的凝膠和Splatoon中的墨水。它可以用作遊戲元素,也可以純粹用於視覺效果。無論哪種方式,網格繪畫都爲遊戲設計師和藝術家開闢了許多可能性。

儘管前面的示例都是幾乎相同的效果,但你也可以使用網格繪畫來製作許多其他效果。例如,可以使用它來噴塗物體、渲染角色的傷口,甚至讓玩家繪製自己角色的臉!

在本教程中,我們將學習如何在骨架網格物體上繪畫,主要步驟包括:

  • 將網格展開爲其 UV 形式
  • 使用線跟蹤中的命中位置對網格進行球面遮罩
  • 使用場景捕獲將展開的網格和球體蒙版渲染到渲染目標
  • 使用蒙版在角色材質中的紋理之間進行混合

請注意,這不是關於頂點繪製的教程。頂點繪製取決於網格分辨率,不能在遊戲運行時更改。另一方面,本教程中的方法獨立於網格分辨率工作,也可以在遊戲運行時工作。

1、準備

首先下載本教程的材料(可以在教程底部找到鏈接)。解壓縮並導航到MeshPainterStarter並打開MeshPainter.uproject。如果按Play按鈕,將看到要在其上繪畫的角色。

在這裏插入圖片描述

就像雪地和草地痕跡教程一樣,我們實現網格繪畫也需要場景捕捉。爲了節省時間,我已經創建了場景捕捉藍圖。如果想了解更多關於捕捉設置的信息,請查看創建雪痕的教程。

首先,讓我們看看如何在網格上繪畫。

2、網格繪畫

在大多數情況下,我們使用的網格都是已經 UV 映射的。因此,顯而易見的事情是使用渲染目標(Render Target)創建一個遮罩,然後將其應用於網格。但是,直接在渲染目標上生成遮罩(使用 Draw Material to Render Target)通常會導致 UV 殼之間的不連續性。

這是一個立方體的 UV 貼圖和球體蒙版紋理的示例: 在這裏插入圖片描述

這是應用於立方體的蒙版: 在這裏插入圖片描述

如上圖所見,2D 球體蒙版不會環繞角落,因爲它沒有考慮幾何形狀。要生成正確的遮罩,球體遮罩需要對網格的世界位置進行採樣。但是在使用 Draw Material to Render Target 節點時如何訪問世界位置呢?

如果你在研究網格繪畫的方法,可能已經看過 Ryan Bruck 的關於使用渲染目標實現角色毀損的視頻(本教程基於其方法)。在視頻中,他成功生成了 3D 球體蒙版,並將其累積到渲染目標中。Ryan之所以能夠做到這一點,是因爲他創建了一個渲染目標來存儲網格的世界位置,然後他可以使用球體蒙版對其進行採樣。讓我們仔細看看。

3、Ryan的世界位置採樣方法

Ryan的方法有四個步驟。第一步是“展開”有問題的網格。這只是簡單地移動所有頂點,以便獲得 UV 形式的網格。例如,這裏是角色的 UV: 在這裏插入圖片描述

這是在虛幻中展開後的角色:

在這裏插入圖片描述

可以通過應用一些簡單的世界位置偏移數學來展開網格(稍後將看到)。

展開後,第二步是將網格的世界位置編碼爲渲染目標。爲此,可以將展開材質的顏色設置爲絕對世界位置,然後使用場景捕捉來捕捉展開。這是渲染目標的樣子:

在這裏插入圖片描述

注意:渲染目標會改變顏色,因爲角色是運動的。這導致世界位置不斷變化。

第三步是創建球體蒙版。現在可以訪問網格的世界位置,因此可以在球體蒙版中對其進行採樣。然後,可以將球體蒙版直接繪製到第二個渲染目標。

最後一步是使用角色材質中的蒙版在顏色、紋理或材質之間進行混合。以下是可視化的步驟三和四:

在這裏插入圖片描述

現在,讓我們看看建議的方法。

4、我們建議的方法

雖然 Ryan 的方法有效,但它需要:

  • 需要兩個渲染目標進行繪製。首先是捕獲展開的網格,然後是彙總球體蒙版。 一個渲染目標用於存儲世界位置
  • 另一個渲染目標用於累積球體蒙版,我們需要爲每個要在其上繪製的actor 設置一個單獨的渲染目標。
  • 本教程中的方法避免了第二次繪製及世界位置渲染目標。方法通過將展開和球形遮罩組合成一種材料(展開材料)來實現此目的。然後,使用加法合成模式捕獲展開以累積球體蒙版。

需要注意的一點是,當網格沒有重疊 UV 時,這兩種方法都最有效。重疊的 UV 將導致共享相同 UV 空間的像素也共享相同的蒙版信息。例如,將雙手 UV 映射到同一空間。如果一隻手進行了蒙版處理,另一隻手也一樣。

現在讓我們從創建展開材料開始。

5、創建展開材質

導航到Materials文件夾並創建一個新材質。將其命名爲M_Unwrap,然後打開它。

接下來,更改以下設置:

  • 着色模型:Unlit。這是爲了確保場景捕獲不會捕獲任何照明信息。
  • 雙面:啓用。有時,根據網格的 UV 映射方式,展開的面可能會面向另一個方向。雙面將確保我們可以看到任何翻轉的面。
  • 與骨架網格體一起使用:啓用。這將編譯材質在骨架網格物體上工作所需的着色器。

在這裏插入圖片描述

接下來是展開網格。爲此,請創建以下設置。請注意,我已經在MPC_Global資產中創建了CaptureSize和UnwrapLocation參數。

在這裏插入圖片描述

這會將網格 UV 展開到指定大小的指定位置。請注意,如果網格的唯一 UV 貼圖位於單獨的通道上,則需要更改TextureCoordinate節點的座標索引。例如,如果唯一的 UV 在通道 1 上,可以將Coordinate Index設置爲1。

下一步是創建球體蒙版。爲此,我們將需要兩個參數:命中位置和球體半徑。創建突出顯示的節點: 在這裏插入圖片描述

這將爲球體蒙版內的像素返回白色,爲外部的像素返回黑色。不必擔心爲參數設置值,因爲稍後我們將在藍圖中這樣做。

將Absolute World Position節點設置爲Absolute World Position (Excluding Material Shader Offsets)很重要。這是因爲像素的世界位置會因爲展開而改變。排除材質着色器偏移將爲我們提供展開前的原始世界位置。

這就是展開材質所需的全部內容。單擊應用,然後關閉材質編輯器。接下來是將材質應用到角色以展開它。

6、展開角色

對於本教程,捕獲藍圖將處理展開和捕獲。首先,我們需要展開材質的動態實例。導航到Blueprints文件夾並打開BP_Capture。然後,將突出顯示的節點添加到Event BeginPlay。確保將Parent設置爲M_Unwrap。 在這裏插入圖片描述

接下來,我們需要一個函數來執行展開和捕獲。創建一個名爲PaintActor的新函數。之後,創建以下輸入:

  • ActorToPaint:類型是Actor。Actor展開和捕捉。
  • HitLocation:類型爲Vector。這將是球體蒙版的中心點。
  • BrushRadius:類型爲Float。以世界單位表示的球體蒙版的半徑。

雖然這種繪畫方法可以與任何Actor一起工作,但我們只會檢查傳入的Actor是否繼承自Character類。爲了簡化代碼,我們將角色的骨架網格組件存儲到一個變量中,因爲我們將多次引用它。爲此,請添加突出顯示的節點:

在這裏插入圖片描述

現在是時候進行展開和球體蒙版了。爲此,請將突出顯示的節點添加到節點鏈的末尾: 在這裏插入圖片描述

以下是每行的作用:

  1. 首先,這將保存網格的原始材質,以便我們以後可以重新應用它。之後,它將應用展開材料。
  2. 這條線將在命中位置和筆刷半徑中傳遞到展開材質以進行球體遮罩

在測試展開之前,我們需要從玩家處進行線跟蹤以獲得命中位置。

7、獲取命中位置

單擊編譯,然後返回主編輯器。之後,打開BP_Player。打開Shoot功能並添加突出顯示的節點。對於本教程,將筆刷半徑設置爲10。 在這裏插入圖片描述

單擊編譯,然後關閉BP_Player。按播放,然後左鍵單擊角色以進行展開和球體蒙版。

在這裏插入圖片描述

你可以想知道爲什麼遮罩一直在移動,那是因爲部件正在進出球面遮罩。但這不是問題,因爲我們只會在命中時捕獲展開。

現在已經展開了網格,讓我們捕獲它。

8、捕獲展開

首先,最好在展開的網格後面添加一個不亮的黑色平面。這將有助於防止 UV 殼邊緣出現接縫。打開BP_Capture,然後添加一個名爲BackgroundPlane的平面組件。爲了節省時間,我已經爲你創建了黑色材料。將材質設置爲M_Background。

在這裏插入圖片描述

對於本教程,展開和捕獲大小爲500×500單位,因此背景平面至少需要那麼大。將比例設置爲(5.0, 5.0, 1.0)。 在這裏插入圖片描述

由於平面的位置和展開位置相同,因此最好將平面向下偏移以防止任何 z 軸衝突。爲此,請將Location設置爲(0.0, 0.0, -1.0)。

在這裏插入圖片描述

接下來,我們需要執行捕獲。返回到PaintActor函數並添加突出顯示的節點:

在這裏插入圖片描述

這將捕獲展開的網格。之後,它將重新應用網格的原始材質。

目前,場景捕獲將覆蓋渲染目標的先前內容。爲確保球體蒙版累積,我們需要確保場景捕獲添加到先前的內容中。爲此,請選擇SceneCapture組件並將Scene Capture\Composite Mode設置爲Additive。 在這裏插入圖片描述

單擊編譯,然後關閉藍圖。接下來,我們需要在角色的材質中使用渲染目標。

9、使用蒙版

導航到Characters\Mannequin\Materials並打開M_Mannequin。然後,添加突出顯示的節點。確保將Texture Sample設置爲RT_Capture。 在這裏插入圖片描述

這將在蒙版爲白色的地方顯示紅色,在蒙版爲黑色的地方顯示橙色。但是,如果願意,我們可以在紋理或材質層之間進行混合。

單擊應用,然後關閉材料。按播放並左鍵單擊角色開始繪畫。 在這裏插入圖片描述

原文鏈接:UE4動態網格繪畫 — BimAnt

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章