本文轉(zhuǎn)自公眾號(hào)：Thepoly

Hello . 大家好

今天給大家?guī)?lái)無(wú)主之地著色器紋理解析

原作者為西班牙大佬Daniil Spivak

https://www.artstation.com/spacecentipede/blog

前段時(shí)間，我根據(jù) Sergi Broza 的 2D 概念制作了 Effie 的角色模型 https://www.artstation.com/artwork/yD0ExO

劇透：我接下來(lái)要分享的并非什么秘訣。我只是從 YouTube 教程和其他資源中學(xué)習(xí)，然后把各種東西混合在一起，最終得到了這個(gè)效果。在本文中，我將逐一講解，并展示節(jié)點(diǎn)設(shè)置的截圖。如果你想創(chuàng)建類似的材質(zhì)，只需復(fù)制你需要的部分即可。

首先，您在《無(wú)主之地》中看到的漫畫風(fēng)格可以分為兩部分：直接繪制在紋理上的效果，以及著色器本身稍后添加的效果。

在第一張圖片中，后期處理和紋理描邊均已啟用。在第二張圖片中，后期處理已關(guān)閉，但紋理上的描邊仍然可見。在第三張圖片中，兩種效果均已完全禁用。

您可以看到 Manny 的原始效果，無(wú)需任何手繪線條。我們可以看到模型周圍的輪廓，以及基于法線的效果（稍后會(huì)詳細(xì)介紹）。陰影部分填充了交叉影線，就像經(jīng)典漫畫一樣；高光部分則使用了點(diǎn)狀圖案，就像老式漫畫書的印刷一樣。顏色漸變被簡(jiǎn)化為階梯狀，我們稍后可以調(diào)整它來(lái)控制整體外觀。

這是基礎(chǔ)的漫反射紋理。我還在 Alpha 通道中添加了一個(gè)蒙版，以便在織物上創(chuàng)建菲涅爾效果，但這個(gè)細(xì)節(jié)在這里并不重要。

所有有趣的東西都發(fā)生在 RMAL 紋理中。我們按通道來(lái)分解它：紅色表示粗糙度，綠色表示金屬度，藍(lán)色表示遮擋。Alpha 通道保存線條。

在 Substance Painter 中，我將所有這些筆觸繪制到一個(gè)特殊的通道中：黑色用于輪廓，白色用于高光。每個(gè)筆觸的顏色要么比中灰色更深，要么比中灰色更淺，這使得材質(zhì)能夠?qū)⑸钌€條與淺色線條區(qū)分開來(lái)，并將它們作為獨(dú)立的參數(shù)進(jìn)行顯示。這樣，我們就可以隨意調(diào)整輪廓顏色和高光。

這是完整、擴(kuò)展的服裝主材質(zhì)。你會(huì)注意到我沒有使用虛幻引擎中常見的節(jié)點(diǎn)連接方式，而是使用了 NameRerouteNodes。說(shuō)實(shí)話，我真的很討厭默認(rèn)的意大利面條式連接看起來(lái)亂糟糟的——搞清楚各個(gè)節(jié)點(diǎn)連接在哪里真讓人頭疼。

所以我把節(jié)點(diǎn)從左到右排列，分組到塊中，并清晰地命名路由。這樣，你隨時(shí)可以按名稱搜索，并立即知道哪些節(jié)點(diǎn)的去向。更加簡(jiǎn)潔，也更容易操作。

高清圖片：https://cdna.artstation.com/p/assets/images/images/091/148/228/4k/daniil-spivak-effy-mm-materialgraph-0-00000.jpg? 1755961075

關(guān)鍵在于將深色筆觸與淺色筆觸分離，并分別放入各自的蒙版中。為此，我使用了“步進(jìn)”和“飽和度”功能。完成后，我就可以抓取蒙版來(lái)生成輪廓，并用任何我想要的顏色進(jìn)行著色。

這些蒙版也可以在其他地方重復(fù)使用 - 例如，我將它們插入金屬和鏡面參數(shù)中，這樣輪廓就不會(huì)拾取任何高光。

漫反射和手繪描邊就到此為止了。現(xiàn)在我們來(lái)看一下后期處理材質(zhì)本身的設(shè)置。材質(zhì)圖太大了，所以我把它分成了兩部分。

高清圖片： https://cdna.artstation.com/p/assets/images/images/091/148/252/4k/daniil-spivak-pp-outline-materialgraph-0-00000.jpg? 1755961161

讓我們逐塊進(jìn)行，我將簡(jiǎn)要解釋每個(gè)部分的作用以及它給出的結(jié)果。

簡(jiǎn)而言之，這個(gè)塊提供了基礎(chǔ)光照。我們需要光影邊界，以便稍后構(gòu)建階梯狀的漫畫風(fēng)格著色。通過將去飽和的 PostProcessInput0 除以去飽和的 BaseColor，我們得到了基礎(chǔ)光照。在此基礎(chǔ)上，我使用場(chǎng)景紋理中的金屬數(shù)據(jù)生成一個(gè)金屬遮罩，并使用鏡面反射將所有筆觸推入一個(gè)單獨(dú)的遮罩中——因?yàn)槲也幌Ｍ鼈儼魏喂庹招畔ⅰ９P觸應(yīng)該始終保持暗色。

接下來(lái)，我們構(gòu)建顏色之間的“階梯”——就像老式漫畫書印刷那樣，調(diào)色板有限。這里的關(guān)鍵節(jié)點(diǎn)是 Floor 節(jié)點(diǎn)：它會(huì)向下取整值，并通過除以它們，我們?cè)诠庥爸g創(chuàng)建那些硬階梯。最終呈現(xiàn)的是一個(gè)雙色調(diào)圖像，其過渡是階梯狀的，而不是平滑的漸變。

接下來(lái)，我們將最終結(jié)果與最終圖像和純色進(jìn)行混合，并使用參數(shù)控制混合效果。與默認(rèn)著色相比，顏色可能會(huì)略有偏差，這是我們想要避免的。為了解決這個(gè)問題，我添加了一個(gè)“功率”節(jié)點(diǎn)和一個(gè)“亮度校正”節(jié)點(diǎn)，這樣我就可以根據(jù)需要調(diào)高或調(diào)低亮度。

現(xiàn)在我們來(lái)看看點(diǎn)線圖案塊。這里我們生成陰影中的筆觸和高光中的半色調(diào)點(diǎn)。在底部，你會(huì)看到三個(gè)子塊：線條圖案、半色調(diào)圖案和距離摳圖蒙版。前兩個(gè)子塊會(huì)程序化地創(chuàng)建實(shí)際的圖案（因此我們無(wú)需加載額外的紋理），而摳圖蒙版會(huì)使筆觸隨著距離的增加而淡出。如果沒有它，當(dāng)你縮小時(shí)，線條會(huì)保持屏幕大小，與角色相比會(huì)突然顯得巨大——這感覺非常不對(duì)勁。

光照處理方式與之前相同：將 PostProcessInput0 除以顏色，然后使用曲線分離最暗和最亮區(qū)域。暗區(qū)使用交叉影線，亮區(qū)使用半色調(diào)點(diǎn)。

我還添加了靜態(tài)開關(guān)參數(shù)來(lái)關(guān)閉金屬表面上的筆觸（因?yàn)樗鼈冊(cè)谀抢锟雌饋?lái)并不總是很好），另外還添加了一些額外的控件來(lái)調(diào)整高光中的線條不透明度、大小和點(diǎn)密度。

高分辨率：https://cdnb.artstation.com/p/assets/images/images/091/148/625/4k/daniil-spivak-pp-outline-materialgraph-0-00007.jpg? 1755962450

好了，現(xiàn)在到了棘手的部分——?jiǎng)?chuàng)建大綱。這需要構(gòu)建幾個(gè)相當(dāng)復(fù)雜的函數(shù)。說(shuō)實(shí)話，我自己并沒有完全弄清楚每個(gè)細(xì)節(jié)，所以如果感覺困惑，不用擔(dān)心——你可以直接復(fù)制我的做法。不過，我會(huì)盡力解釋每個(gè)部分的主要功能。

我根據(jù) Evans Bole 的教程制作了這個(gè)效果——您可以通過下面的鏈接查看。在這里一步一步地解釋會(huì)花很長(zhǎng)時(shí)間，所以最好直接從源代碼中查看。

https://www.youtube.com/watch?v=9KvUfnrHcqM&t=71s

高分辨率：https://cdna.artstation.com/p/assets/images/images/091/148/610/4k/daniil-spivak-pp-outline-materialgraph-0-00008.jpg? 1755962418

為了使我們的輪廓在模型上正確呈現(xiàn)，我們需要設(shè)置以下功能：

1. MF_獲取內(nèi)核
2. MF_DetectEdges_depth
3. MF_DetectEdgesNormal
4. MF_DTM_凝視角度
5. MF_厚度_調(diào)制
6. MF_Mask_depth

1) 首先，我們需要一個(gè)名為MF_GetKernel的輔助函數(shù)。此函數(shù)會(huì)生成中心像素及其四個(gè)相鄰像素（左、右、上、下）的 UV 坐標(biāo)。這基本上是為接下來(lái)的計(jì)算做準(zhǔn)備。

2) 接下來(lái) -MF_DetectEdges_depth。我們需要一個(gè)函數(shù)來(lái)檢查像素是否位于網(wǎng)格的邊緣，并據(jù)此生成輪廓蒙版。這時(shí)，之前創(chuàng)建的 GetKernel 函數(shù)就派上用場(chǎng)了。

3) 現(xiàn)在我們已經(jīng)完成了沿著物體邊界構(gòu)建輪廓的部分，但仍然缺少基于法線貼圖的輪廓。為此，我們需要?jiǎng)?chuàng)建一個(gè)名為MF_DetectEdgesNormal的新函數(shù)。它基本上是前一個(gè)函數(shù)的副本——但它不是使用場(chǎng)景深度，而是依賴于 WorldNormal。

4) 我們還需要一個(gè)小的輔助函數(shù)來(lái)去除網(wǎng)格表面上與攝像機(jī)視圖過于平行的多余輪廓，例如地板。這個(gè)函數(shù)通過使用簡(jiǎn)單的菲涅爾效應(yīng)來(lái)創(chuàng)建額外的遮罩，過濾掉與攝像機(jī)呈銳角的像素，從而解決這個(gè)問題。讓我們創(chuàng)建MF_DTM_Gazing_angle

5) 下一個(gè)函數(shù)非常重要：MF_Thickness_Modulation。它使輪廓的粗細(xì)根據(jù)角色與相機(jī)的距離動(dòng)態(tài)變化。如果沒有它，線條將保持與屏幕的相對(duì)關(guān)系——因此，當(dāng)你縮小時(shí)，輪廓會(huì)顯得太粗，最終覆蓋整個(gè)角色。

6）我們還需要這個(gè)函數(shù)來(lái)關(guān)閉太遠(yuǎn)的物體的輪廓 - MF_Mask_depth。

所有主要功能都已準(zhǔn)備就緒，現(xiàn)在可以將它們組合起來(lái)了。讓我們看看輪廓圖內(nèi)部發(fā)生了什么。

整個(gè)設(shè)置分為兩部分。第一部分在網(wǎng)格周圍創(chuàng)建外輪廓，第二部分基于法線生成輪廓。兩者使用基本相同的函數(shù)——唯一的區(qū)別是網(wǎng)格輪廓使用 MF_DetectEdgesDepth，而基于法線的輪廓使用 MF_DetectEdgesNormal。

1. 這兩個(gè)函數(shù)是我們輪廓系統(tǒng)的核心。它們生成用于繪制輪廓的蒙版。每個(gè)函數(shù)都有兩個(gè)輸入——厚度和閾值，我們將在下文中介紹。
2. 在 Thickness 輸入中，我們插入了 MF_Thickness 調(diào)制函數(shù)，該函數(shù)有三個(gè)輸入引腳。第一個(gè)引腳設(shè)置輪廓的最小厚度，第二個(gè)引腳設(shè)置最大厚度，第三個(gè)引腳定義達(dá)到最大值時(shí)的距離。這為我們提供了一個(gè)漸變效果：輪廓逐漸由細(xì)變粗，一旦達(dá)到（比如說(shuō)）距離 2000，它就會(huì)保持在最大值，不再增加。
3. 在閾值輸入中，我們插入了這段代碼。它會(huì)調(diào)整閾值，使角色距離越遠(yuǎn)，輪廓的擴(kuò)散范圍就會(huì)根據(jù)場(chǎng)景深度縮小。這樣，我們不僅會(huì)隨著距離改變輪廓的粗細(xì)，還會(huì)改變輪廓實(shí)際顯示的區(qū)域。
4. 在這里，我們使用 MF_Mask_depth 函數(shù)來(lái)切斷遠(yuǎn)處的物體，因?yàn)槲覀兘^對(duì)不希望輪廓出現(xiàn)在背景中的物體上。
5. 這部分功能確保輪廓隨著角色的遠(yuǎn)離而平滑淡出。如果沒有它，你會(huì)看到輪廓忽明忽暗，并且其粗細(xì)變化劇烈——這看起來(lái)非常令人分心。
6. 在這里，我們終于把所有東西混合在一起了。PIN A 是沒有輪廓效果的圖像。PIN B 是輪廓顏色。Alpha 是輪廓蒙版本身——它告訴著色器在哪里應(yīng)用輪廓顏色。

具體設(shè)置取決于你的項(xiàng)目。你需要根據(jù)角色與攝像機(jī)的距離，以及你希望在不同距離下保持哪些細(xì)節(jié)可見來(lái)調(diào)整這些值。

最后一步是添加模板蒙版，這樣所有這些效果就只作用于我們的角色，而不是整個(gè)環(huán)境。當(dāng)然，如果你確實(shí)希望效果作用于周圍環(huán)境，可以關(guān)閉它——這實(shí)際上取決于你想要的效果。

最重要的是不要忘記在項(xiàng)目設(shè)置和網(wǎng)格本身中啟用自定義深度。

就這樣！我想我已經(jīng)涵蓋了所有關(guān)于制作著色器和使用紋理的知識(shí)。感謝所有堅(jiān)持到最后的讀者——這篇文章很長(zhǎng)，但我想詳細(xì)解釋一下。網(wǎng)上有很多關(guān)于如何制作單元格著色器或輪廓著色器的教程，但我想把所有東西都整合起來(lái)——包括紋理應(yīng)該是什么樣子，以及如何將它們組合起來(lái)，使整個(gè)設(shè)置真正發(fā)揮作用。

分享就到這里辣，謝謝大家！下次再見！