從頭學ShaderGraph 6:深度冰材質
https://connect.unity.com/p/cong ... hen-du-bing-cai-zhi
原作者來自於youtube,案例貼圖被壓縮過,如需高清貼圖可在原網址下載。
深度冰材質
先來張動圖
能看到在轉動的時候,白色裂縫處彷彿有模型插在裡面一樣,有深度。
有看過我HDRP節點的朋友應該知道,這就是視差parallax,在HDRP中有現成節點。
不過這次就是來點刺激的,純用基礎節點連出來,也方便一部分朋友理解parallax的原理。下面是全部節點截圖。
不要被一堆線嚇到,仔細看就是一條迴圈,分解過程一步步來。
基礎材質
沒什麼能說的,顏色和法線,加了個UV控制。
做一個裂縫
我們需要將貼圖,根據視角,將模型表面,向內部壓。
做過法線的人都知道,NormalMap是切線空間法線,這在我之前的文章裡也有寫。所以我們需要壓的方向便是:切線空間。
所以我們需要的是:
- 根據視角=View Direction
- 模型表面方向壓=Tangent的View Direction
本來要轉換一下矩陣,但View Direction自帶有轉換功能,所以直接用。
將UV減去第一層裂縫的厚度,即我們需要的新UV,自己建個引數ParallaxOffset,用來控制厚度。(這裡雖然用的是add,但parallax是負數,所以還是減法。)
可以看到已經出來第二層。
為了方便,將計算部分直接框選右鍵,打組。取名叫Ice Parallax,迴圈的時候不至於一堆節點。
做一堆裂縫
由於這次的冰凹槽,是黑白圖片疊加,所以能把視差偏移後的圖片直接混合。
正經的視差是偏移UV,最終輸出UV給貼圖用。而不是直接輸出貼圖,好孩子不要學。
先從2個裂縫開始。
2層比1層要更深,顏色要更淡。
左邊Add負責深度,右邊Lerp負責更淡。
記得將貼圖換成Texture 2D Asset,畢竟你不想定義多次圖片。
重複這個迴圈20次,lerp從上到下是:0,0.5,1,1.5...1。也就是分成了20段。
ParallaxOffset調到合適的數值。
上色
將裂縫黑白圖與原圖混合,混合模式為Overlay。
下面是Overlay公式,a就是Opacity。
我加了一個Pow2.2,應該有人熟悉這個數值,linear轉gamma(到底用2.2還是2.5呢,效果差不多)
效果如圖,無pow的白色戛然而止,過渡不明顯,有pow的就還不錯。
最後來張大圖
都看到這裡了,點贊收藏吧。
下面是我的檔案
連結:
檔案分享https://share.weiyun.com/5tfG4Rr
密碼:qtdxrd
使用方法:找個HDRP或著URP(LWRP),拖進去。我的資料夾下有預製體。
我的環境:Unity2019.3.0f1 HDRP 7.1.6 ShaderGraph 7.1.6
下面是我的artstation地址:https://www.artstation.com/luteli
相關閱讀:
從頭學ShaderGraph :UV與基礎材質
從頭學ShaderGraph:雪材質
從頭學ShaderGraph :護盾材質
作者:Lute Li
專欄地址:https://zhuanlan.zhihu.com/p/109549867
相關文章
- 從頭學ShaderGraph:雪材質
- 從頭學ShaderGraph :溶解材質
- 從頭學ShaderGraph :護盾材質
- 從頭學ShaderGraph :UV與基礎材質
- 材質
- 工字電感磁芯材質型別深度詳解型別
- 修改材質
- 蛋白質深度學習深度學習
- blender材質屬性:
- 材質最佳化:如何正確處理紋理和材質的關係
- OpenGL高階版本學習日誌2:光照模型&材質模型
- ThreeJs-03材質進階JS
- JMonkeyEngine——材質檔案備註
- katana材質的製作2
- 深度學習預測蛋白質-蛋白質相互作用深度學習
- 深度學習(6)——預處理Preprocessing深度學習
- 從頭開始學習VuexVue
- 韶關鋼材檢測 Q355B鑑定材質檢測
- three.js獲取物件的材質JS物件
- 閃耀暖暖手遊布料材質解析
- 時下火熱的 wGAN 將變革深度學習?這得從源頭講起深度學習
- Linux從頭學07:中斷那麼重要,它的本質到底是什麼?Linux
- 「兩全其美」,從頭設計分子,深度學習架構S4用於化學語言建模深度學習架構
- “深度學習三巨頭”來了倆,Hinton、LeCun預言深度學習的未來深度學習LeCun
- ThreeJs-05紋理材質高階操作JS
- ThreeJs-04詳解材質與紋理JS
- 一組材質面料展示模組參考
- 從冰墩墩悟出的熱銷公式公式
- 《Python深度學習從零開始學》簡介Python深度學習
- 從頭開始學習vue-routerVue
- 從機器學習談起,深度好文機器學習
- 【深度學習】--GAN從入門到初始深度學習
- Unity Shader之雙面材質和多Pass渲染Unity
- 深度:如何從系統層面優化深度學習計算?優化深度學習
- 《谷歌JAX深度學習從零開始學》簡介谷歌深度學習
- CesiumJS PrimitiveAPI 高階著色入門 - 從引數化幾何與 Fabric 材質到著色器 - 下篇JSMITAPI
- CesiumJS PrimitiveAPI 高階著色入門 - 從引數化幾何與 Fabric 材質到著色器 - 上篇JSMITAPI
- 教你6步從頭寫機器學習演算法——以感知機演算法為例機器學習演算法