UE4在UI上顯示人物模型

您可能會意識到,不可能在UMG小部件(在寫作時從API 4.7.4開始)直接渲染3D對象/藍圖/網格。

我會盡量清楚地說明我是如何實現的。這是我們試圖得到的結果:[gif即將推出]

基本原理是將3D對象捕獲到您可以在UMG小部件中使用的2D“圖像”。

基本的解釋是好的,但更多的細節更好!所以這裏是步驟:

  1. 創建場景捕獲藍圖
  2. 捕獲到2D紋理
  3. 從該紋理創建材質
  4. 在您的小部件中使用該材料

處理我覺得更像反向工程,而不必閱讀我所說的話,我也在GitHub上提供了代碼:p從GitHub下載


先決條件/項目設置

您需要遵循的是一個具有UMG小部件的UE4項目,其顯示在遊戲中的某個地方(基本上在您的HUD中)。

如果您沒有這樣的UE項目,您可以按照這個簡單的教程  ,完成之後再回到這裏。

但是,如果您自己的項目似乎適合該描述,則可以直接跳到場景捕獲創建

現在我們是在共同的理由,我們很好去!

1 - 創建場景捕獲藍圖

開始創建一個...是的,藍圖,多麼令人驚訝!選擇“演員”作爲其父類。我命名爲“CaptureBlueprint”。新演員藍圖

打開它。我們將從創建一個封閉的“房間”開始。爲此,添加6個StaticMesh組件“Floor_400x400”(該引擎默認提供該網格)。確保BP的根組件是“房間”的實際樓層。“爲什麼我需要建立一個盒子?”,這可能是你現在想的。我知道這是“脫離藍色”,但相信我,這將是有道理的!這是沒有屋頂的樣子:room_outside

現在我們有了我們的“工作室”(實際上我覺得這是一個很酷的描述性名字,我要把它叫做“工作室”,直到結束),我們需要改變它的牆壁顏色。我們願意創建一個“藍屏”,是的,就像他們拍攝電影時所用的那樣!

爲此,我們將創建一個可以在牆上應用的材料。我把它命名爲“StudioMaterial”。編輯它 從調色板中添加一個Constant4Vector組件,並將其顏色更改爲3D模型不會包含的顏色(再次,這是一個藍屏)。我選擇了一個明亮的青色RGBA(0,1,1,0)。工作室材質顏色

將此顏色設置爲材質的發光顏色。最後,將材質的陰影模型設爲不亮。這一點非常重要,就像這個選擇一樣,我們的工作室牆壁不會受到3D物體陰影和燈光的影響,因此只會出現一種聯合色(實際上我們剛選擇的)。工作室材料不亮

現在回到我們的工作室,將牆壁材料設置爲我們剛剛創建的牆壁材料。您現在可以將要在UMG小部件中呈現的3D對象/網格添加到工作室!我沒有時間找到一個有趣的模型來渲染,所以我只是選擇一個默認的網格(SM_MatPreviewMesh_02)。確保它在工作室(至少你想看到的部分)。當然,如果需要,你可以使工作室更大。工作室藍圖然後將相機添加到藍圖。嘗試將其放在Object的前面進行渲染,以便相機可以實際拍攝它。工作室相機

最後,添加一個SceneCaptureComponent2D到相機。這是我們要用來渲染相機拍攝到2D紋理的組件。Studio Capture組件

作爲我們工作室的最後一步,我們向藍圖添加了一些亮點。我將Light組件插入到我的對象之前,我將燈光選項設置爲默認值。你當然可以添加多個選項,調整他們的選擇,並將它們放在任何你喜歡的地方。如果你不添加光,那麼你的捕捉會看起來很黑暗(但它可能是你想要的效果,我不知道!)。給演播室添加燈光

你現在可以放鬆,我們完成了這個棘手的部分。與我們已經在這裏實現的相比,剩下的就像我的第一個女孩一樣容易...不,我取消這個句子。


2 - 捕獲到2D紋理

現在我們需要告訴我們的SceneCaptureComponent來保存它所捕獲的內容。爲此,我們首先必須在我們的項目中創建一個新的TextureRenderTarget2D。我命名爲“TextureRenderTarget”。渲染目標創建

編輯它,並將“大小X”和“大小Y”設置爲適合您的需求。請注意,默認值爲256×256,這些大小將影響UMG中呈現的質量。這裏我選擇的最大尺寸是2048×2048。渲染目標大小設置

現在回到我們的“CaptureBlueprint”,只需將這個全新元素設置爲場景捕獲組件的紋理目標,然後保存。設置BP渲染目標

就是這樣,相機捕獲的內容將保存到您的2D紋理!


3 - 從紋理創建材質

在這裏,我們將通過刪除其藍色背景(或您爲工作室牆壁選擇的顏色)“轉換”我們捕獲的2D紋理,並將其轉換爲我們最終將能夠在UMG中使用的材質。

首先,創建一個新的材料。我把它命名爲“CapturedMaterial”。保存並編輯它。將其混合模式設置爲“半透明”,因爲我們需要一些透明度( 如果您想了解更多關於它們的信息,虛幻引擎維基對混合模式非常有見地見解)。然後將其着色模式設置爲“不亮”,以確保在我們的HUD中,任何動態光都不會被更改。HUD材質基本設置

一旦完成,請確保在設置的“使用”面板中檢查“使用UI”,如果您不這樣做,您將無法在UMG小部件中選擇此材料。HUD材質UI設置

現在我們很好去 在材質中添加一個紋理樣本,並在“設置”面板中將“TextureRenderTarget”設置爲“紋理”。HUD材質紋理樣品加

將其鏈接到材質“發光顏色”引腳。HUD材料發光

現在,我們將使我們的工作室背景顏色透明的部分,以便只有我們的模型將在我們的HUD中可見。

從調色板中添加一個Constant3Vector組件,並將其顏色更改爲用作牆壁顏色的顏色 - 記住我使用了RGBA(0,1,1)的顏色。HUD材質牆壁顏色

然後添加必要的元素,使您的材料看起來像這樣(“0”和“1”是簡單的常量元素):HUD材質牆面顏色透明度

不要忘記設置If組件的B常數。如果您稍後注意到,當渲染對象的邊框是藍色時,調整它的值(值越高,藍色越透明,但是如果該值太高,則可能是某些意外的對象消失了)。UMG物料B值

這只是處理背景顏色透明度的部分。我認爲它做得很簡單。

保存。而已!我們的材料完成了!


4 - 使用UMG小部件中的素材

現在我們可以在UMG中使用一種材料,讓我們來吧,讓我們來吧!

編輯要在其中顯示3D對象的UMG窗口小部件,並將要顯示對象的圖像組件添加到其中。我將簡單地將其添加到基本的“畫布”面板中,如您所見。UMG添加圖片

按照你的願望量身定做 我只用256×256去。UMG圖像大小

然後,在“外觀”面板中的“畫筆”下,將“CapturedMaterial”設置爲“圖像”。UMG將材質設爲圖像

編譯保存。

最後一步,我們需要將我們的CaptureBlueprint添加到我們的地圖中,因爲它不會捕獲任何東西,如果它不存在於世界上。放置它,使玩家不會意識到它的存在(基本上在地圖下或地圖下)。將地圖捕獲BP置於地圖中請注意,當您選擇其中有相機的藍圖時,會打開一個小窗口,並顯示相機看到的內容。

保存,點擊播放,享受:您的對象實際上呈現在HUD上!請注意,由於工作室牆壁的反射,我的對象的邊界有點藍色。如果發生這種情況,您可以通過在CaptureBlueprint中向工作室添加燈光和/或通過增加對象材料粗糙度來修復它。

最後結果

最後…就這樣,我們已經在UMG中呈現了3D對象!現在呢,它沒有什麼特別的,只能站在那裏,但是,畢竟這是一個藍圖,你可以想象到所有的行爲和功能。我不知道,爲什麼不是一個3D健康測量儀,有一些粒子效應像蒸汽一樣紅色嗎?或任何你需要的!

如果您需要,該項目可在GitHub上獲得。隨意克隆/ fork /下載吧!

從GitHub下載


結論

我必須承認,這看起來更像是一個真正好的和完美的解決方案的解決方案,我意識到它需要 許多有些調皮看起來體面。但是,除了史詩遊戲讓它成爲這個偉大的UMG的本土特徵之外,它還會做的。我希望...。如果我說了嗎?

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