大家好， 我是炭窯居士， 好久不見
這次由我和好友
fxyyoung
一起給大家帶來原創的毛髮效果案例：不需要寫程式碼，直接在unity實現手機可以跑的毛髮效果！
效果如下面兩圖，是我們在unity裡面直接用ase連線工具實現的
再次說明一下,因為篇幅所限,這篇文章可能沒有把每個知識點都完整詳細的講出來,需要大佬們有一定的圖形學和Unity連線工具的知識基礎,就可以讀懂.如果沒有這樣的基礎,大佬們當作一個知識點的瞭解也是可以的,看完可能無法做出來,但是大概知道了手機可以執行的毛髮的製作原理演算法,也是蠻不錯的
。
毛髮效果一直是cg的專屬，比如最近上映的皮卡丘，細膩的毛髮對於模型面數和渲染都是很大的考驗，在手機遊戲上面想要達到很好的毛髮效果還是有比較大的困難的
突然間天美大佬發了一片非常乾貨的文章，介紹了王者榮耀使用多層pass渲染毛髮的文章，一看，效果還真不錯
https：//
mp。weixin。qq。com/s？
__biz=MzI3MTQzOTY3OQ==&mid=2247488264&idx=1&sn=262a1800172f00553c43001e8b2e0b90&chksm=eac09158ddb7184e913cd9832057d09d7e7a6666c1f158f9822a04ddf2369d7b9d0db4b068a3&mpshare=1&scene=23&srcid=#rd
上面是大佬的原文連結
最新的王者榮耀的梅西面板展示介面的草坪我猜測也使用了類似的技術，
可見這個技術還是非常適合於手遊開發的，值得美術向特效和Ta學習
但是這裡就有一個非常嚴重的問題， 這篇文章依靠的是shader 的 多pass渲染來達成的效果，全部是靠手寫Shader來達成
這就對於對程式設計和shader 還不熟悉的美術大佬們非常不友好了
我這篇文章的目的,就是讓美術大佬們,可以在不寫程式碼的基礎上,直接用連線工具和兩張貼圖製作出來毛髮的效果
首先我知道的Unity毛髮效果都是需要頂點偏移做出來 ，可以分為兩種方法
1\一種是使用頂點偏移命令
把這種點狀圖和模型本身的normal 法線方向相乘，然後對頂點位移產生影響即可
這種方法非常常用 ， 大部分特效的頂點動畫都是透過local vertex offset 節點製作的
但是有一個問題， 想要達到毛髮的質感， 模型就需要使用tessellation 細分
就是把模型的面數細分到非常高
這種操作在手機上面是不支援的。
如果不使用細分， 擠壓偏移的效果就非常差
所以這種方法是沒辦法用到手機上面的，
附上這種方法的節點圖， 有需要的大佬可以參考一下
接著為大家介紹第二種方法,也就是王者榮耀那篇文章使用的方法
王者榮耀那篇文章也是基於一個對於程式設計師非常流行的演算法 ，相信很多程式設計師都很熟悉
但是對於美術大佬們卻相當陌生的演算法
又是英文，又是演算法， 這張圖對於一些美術大佬們可能稍微有些難以理解
遇到這種情況, 美術和特效大佬們可能就直接放棄了
我這裡從美術的視角稍微介紹一下, 相信就會好理解很多
Shader其實是依靠pass，也就是層 來進行渲染的
美術大佬如果不太熟悉，其實可以看作PS
我們大部分使用的shader 只有一層pass，相當於ps的一個圖層
極個別情況會使用 兩層pass，
比如背面顯示效果， 邊緣線效果
這個雙層pass，其實就是把物體畫了兩邊
用ps的原理，就是本體繪製一邊，
外輪廓擠出後再繪製一邊
用兩個圖層，再迭加，就實現了角色描邊的效果
這裡面的每個圖層，就對應了shader裡面的pass
而毛髮是這個多pass的升級版，就是會使用大概10多層 pass，利用迭加來實現這個效果，
這塊我覺得非常繞，必須透過實踐才能瞭解清楚
咱們可以從一根毛髮說起
其實原理就是這樣，可以把毛髮想象成很多圓柱體
每一層就是這個圓柱體的橫切面， 上面用noise貼圖控制生成的亮色大小，逐層noise會變小，同時變亮
然後這些橫切面足夠多， 就會形成一個類似的圓柱體
這樣在不同的角度開起來就會有立體的毛髮的感覺了
所以上圖這樣的效果，
就是把這樣一張noise貼圖，每一層pass 白色區域逐漸縮小，然後偏移度逐漸遞增就可以了
這個效果從邊緣看就是這樣了， 有些bug
但是放遠了看 ，就是一種作假了的毛髮的感覺了
我們可以檢視他的原始碼， 會發現確實是每一層逐步遞增0。05來達到的效果
然後接下來的問題就是， ase等連線工具對多pass的支援非常差……
http：//
wiki。amplify。pt/index。p
hp？title=Unity_Products：Amplify_Shader_Editor/Template_Multi-Pass_Switch
官網只是在做邊緣線的時候使用了兩層pass
但是非常難以操作
所以只能放棄了直接使用ase多pass 的效果
當是已經想放棄了，
突然我們發現， 原來unity 自帶的物體材質sub shader 這邊竟然自動
就可以達到多pass的效果，而不需要寫程式碼！！！
也就是說每個單層的材質球都相當於一個pass，然後再混合到一起
這個功能太強大了， 終於可以實現不寫程式碼就達成多pass的使用了
我製作了 兩個Shader
一個是最底層的基礎材質球
主要就是底層的貼圖和光影的顯示，非常簡單
外一個shader ，除了新增這個貼圖以外，主要就是控制位移，同時位移又可以讓noise貼圖的白色區域逐漸縮小
程式碼裡面是這樣寫的， 其實這些用ase 都可以連出來
我簡化了一下，就把這三個值相乘，就基本可以了
就下來我們把這個材質球複製成10多份，因為他們的furStep值是不一樣的
fur Step的值 每個逐漸增加0。05
就可以形成毛髮的效果了，
接下來就是給這個shader 新增貼圖和透明度的控制， 然後迭加方式如圖設定
這是他的透明通道的練法，其實就是隨著furStep的逐漸增加， noise貼圖的白色部分逐漸減少
可以參考shader裡面的寫法
接下來的偽ao效果其實也一樣，就是用furStep值來控制，step值越小，越暗
連法如圖
如果你還想讓他有隨風飄動的效果,只需要用一張noise貼圖去影響他的offset 偏移值就可以了
連線方法如圖
最後是使用這個方法在unity裡面製作的老虎和草地的效果
是不是已經有點接近王者榮耀的效果了。
總結:
使用連線工具是我的一個想法，就是希望美術大佬們在不需要寫程式碼的情況下也可以做出來在手機上能跑的毛髮效果。
因為我是美術出身，深深知道美術大佬被程式碼折磨的痛苦，就是就想著怎麼可以繞過程式碼也能實現好的效果。
個人感覺如果從可調性來說，這個效果寫程式碼會比較方便，但是缺點就是美術人員想調整效果很難，同時如果是美術自己來做的話，寫程式碼還是比較不方便
使用ase的這種方法，
效率和可用性還需要專案的實戰檢驗,不過確實也是一種有趣的美術的嘗試
這個效果個人感覺還是有些費事的，中間還有不少技術細節需要最佳化，琢磨，歡迎各位大佬多多溝通交流，給我提各種寶貴的意見，在大家的支援下，相信我們的公眾號以後能夠發出更多更好的原創內容
這是我的公眾號， 歡迎各位大佬新增，交流
