風(fēng)靡全球的《原神》NPR風(fēng)格化渲染！用UE5如何實現(xiàn)？
作為一款現(xiàn)象級的黑馬游戲?
《原神》在2020年9月剛一上線
就登頂了多國游戲的榜單第一
并持續(xù)作為中國游戲文化輸出大勢
活躍在吸金項目第一批隊中
除了大型開放世界+自由式探索
點滿玩家的興趣探索值外
很多人也被它出眾的二次元美術(shù)風(fēng)格所吸引
那作為同樣對ACG建模感興趣的同學(xué)們
你知道它屬于哪種渲染風(fēng)格嗎
一般來說，計算機圖形渲染風(fēng)格主要分為兩種（寫實渲染和非寫實渲染。）：
基于物理的渲染PBR（Physically Based Rendering）
非真實渲染NPR（Non-Photorealistic Rendering）
其中NPR也稱為風(fēng)格化渲染，其下又分為很多子類風(fēng)格。由于手游市場二次元風(fēng)格的盛行，所以近年來日式卡通風(fēng)格較為常見。
以Unityちゃん為例的日式卡通渲染部分效果展示
《原神》實機游戲畫面就是屬于卡通渲染（注釋：原神實機游戲畫面非三渲二，其制作公司米哈游做的CG動畫短片是三渲二，三渲二包含在卡通渲染里，此處不對三渲二技術(shù)做詳細解釋）。近年來流行的《守望先鋒》，《英雄聯(lián)盟》，《DOTA2》，《崩壞3》等游戲中都或多或少地出現(xiàn)過卡通渲染的身影。
那么卡通渲染這項技術(shù)為什么這么廣泛的運用呢？有兩個原因：
是游戲玩家們對卡通渲染畫面風(fēng)格的喜好。
（McCloud寫到“amplification through simplification”，對卡通角色來說，簡單的風(fēng)格能增加觀眾辨識度，所以非常流行）
是卡通渲染對程序員的技術(shù)要求和機器硬件要求相比于寫實畫面渲染要求低很多。
（寫實渲染需要考慮更多光影渲染如光線的折射、反射、漫反射、丁達爾效應(yīng)等）
這么一看非寫實卡通渲染風(fēng)格的確具有別樣的魅力大家是不是也對這種風(fēng)格躍躍欲試呢？
由于篇幅有限本次先以大佬??@HyeungKun Park?關(guān)于用UE5創(chuàng)建《原神》風(fēng)格化著色器的教程為例帶大家一探NPR非寫實渲染技術(shù)！
●?UE5風(fēng)格化著色器的設(shè)置+各種流程圖
●?《原神》3D模型的下載地址
● NPR《原神》著色器的詳細教程地址
▲著色器基于Unlit著色器啟動，并通過執(zhí)行NdotL（頂點法線點積光向量）創(chuàng)建Lambert著色。
▲NdotL的結(jié)果與漫反射紋理融合。
▲Half Lambert著色是通過將NdotL乘以0.5再加上0.5來實現(xiàn)的。
▲LUT曲線被添加到Half Lambert的結(jié)果中。當你創(chuàng)建Half Lambert時，亮度譜會變得更寬，因此可以很好地使用所有LUT顏色。
▲自發(fā)光通過單獨的遮罩通道輸出。
▲因為Unlit shader不接收Normal輸入，所以metallic expression使用了置換UV的方法。
以下是我使用Substance Designer制作的金屬遮罩示例，盡管它與現(xiàn)實有很大的不同，但我能夠以類似的方式實現(xiàn)金屬表現(xiàn)。
各向效果是使用菲涅耳效果的單獨遮罩通道實現(xiàn)的。
▲自定義法線基于紋理執(zhí)行，無需使用VertexNormal。漸變紋理根據(jù)LightVector的角度翻轉(zhuǎn)和應(yīng)用。
▲對于某些角色，外部和內(nèi)部的紋理可能不同。你可以使用兩個UV通道和 TwoSidedSign節(jié)點來表示兩側(cè)。
▲檢查UV0和UV1的位置差異。
▲還可以指定單獨的顏色曲線。
▲檢查UV坐標是否設(shè)置為1。
▲我命名為“銀河”效果的偏移效果廣泛用于游戲的各個部分（域入口、Tartaglia、Skaramoosh 等），它是作為單獨的材質(zhì)創(chuàng)建的。
▲包括基于時差的深度效果和閃閃發(fā)光的效果。雖然它稍微專用于派蒙的斗篷，但它在任何地方都適用。
▲MF_SinedTwinkle
▲紋理是在Substance Designer中創(chuàng)建的，R和G通道代表閃爍效果，B通道使用 HueShift功能表示云。
▲輪廓是使用稱為Inverted Hull的傳統(tǒng)方法創(chuàng)建的，這涉及復(fù)制網(wǎng)格、翻轉(zhuǎn)面并稍微縮放它們。
如果有一個高多邊形模型，我們可以使用更多的烘焙技術(shù)（曲率、厚度等）來添加更多有趣的功能，但我們沒有，所以我使用UE5的建模模式執(zhí)行了一個簡單的 VertexColor烘焙。
▲然后我們在VertexNormal的方向上應(yīng)用WPO（世界位置偏移）。此外，我們根據(jù)光線方向使用VertexColor和陰影調(diào)整尖銳部分線條的粗細。
▲Rim Light（邊緣光）在后期處理中使用Custom Depth和Stencil Pass執(zhí)行，使其僅出現(xiàn)在輪廓內(nèi)。
▲僅通過查看節(jié)點，3x3的矩陣可能顯得有些復(fù)雜，但是按照每8個方向的X、Y值連接Append做起來是非常直觀的，如圖所示。
▲亮度根據(jù)光線的方向進行調(diào)整，從而在背光情況下產(chǎn)生更明亮的邊緣光。
▲使用后期處理顏色分級進行色調(diào)調(diào)整。
▲在很多動畫作品中，眉毛往往出現(xiàn)在前面，而《原神》卻不是這樣。我使用World Position Offset來確保它們從任何角度都始終可見。
▲未使用PDO的原因是由于為Conservative Depth Output（保守深度輸出）的優(yōu)化問題不支持負值。
這里你可以查看UE5官方的教程解釋：
https://docs.unrealengine.com/5.0/en-US/depth-material-expressions-in-unreal-engine/
▲相反，將 Camera Position 和 World Position 之間的差異連接到 World Position Offset 可以使眉毛看起來好像總是以任何角度突出。
▲在原神中，當你從下面看角色時，你剋看到角色會半透明淡化。這可不是真正的透明度，而是使用抖動的遮罩不透明度。
有關(guān)抖動的更多信息，請參閱以下鏈接
http://momentsingraphics.de/BlueNoise.htm
▲我使用了用拜耳過濾器矩陣算法制作的紋理。
▲最后，我添加了動畫和效果來完成項目。
大家可以去以下地址下載3D模型
https://sketchfab.com/3d-models/paimon-idle-animation-990c9d459212467288b64e9b19c9c9b5
如果同學(xué)們還想尋找原神系列的更多模型進行學(xué)習(xí)參考，也可以關(guān)注這個寶藏收藏夾：（很多可以進行免費下載哦）
https://sketchfab.com/Shein.Shein/collections/genshin-impact-4ff58a599f4b4dbab6e00c3b44dc9370
或者官方地址：
https://genshin.hoyoverse.com/ja/news/detail/5885
本文還借鑒參考了大佬Adrian Mendez和Ben Ayers的的內(nèi)容：
https://www.artstation.com/artwork/wJZ4Gg
https://www.artstation.com/blogs/bjayers/9oOD/blender-npr-recreating-the-genshin-impact-shader
想要看大佬進一步教程的同學(xué)
請多多點贊轉(zhuǎn)發(fā)哦
給予我們更多動力~
? 次世代建模課程早鳥優(yōu)惠??
