新版“峡谷第一美”妲己尾巴毛发制作分享
關(guān)于作者：梁家斌，騰訊互動娛樂天美工作室群高級游戲美術(shù)師。
?
之前有很多人來詢問新版妲己寶寶
毛茸茸的尾巴 做法，
先謝謝大家對這個毛發(fā)效果的認可，
我在這里就簡單的分享一下，
毛發(fā)的實現(xiàn)思路和制作方法。
毛絨材質(zhì)在生活中出現(xiàn)的頻率非常高，
但是在各種游戲中，
我們卻很少看到這種材質(zhì)效果的良好表現(xiàn)，
原因在于它們的制作與渲染成本都太高了。
所以， 實時毛發(fā)渲染
是業(yè)內(nèi)最為期待的次世代特效之一。
我們先看看這些材質(zhì)的特征：
?
他們有著柔軟的豐富的外輪廓、
柔和的光影、溫暖，
這種材質(zhì)表現(xiàn)一直是女孩子所喜愛的。
?
因為毛發(fā)復(fù)雜性與龐大的計算量
（每根毛發(fā)產(chǎn)生的陰影遮擋），
所以在毛發(fā)渲染方面，
基本一直都是離線渲染的專利。
?
直到最近，
GPU處理能力才達到實時計算毛發(fā)的標準，
當(dāng)然那也是針對PC平臺而言，
我們手機暫時還望塵莫及。
?
我們一般游戲的毛發(fā)渲染，
都是將毛發(fā)紋理放到模型面片上面，
用AlphaBlend或者AlphaTest剔除鏤空區(qū)。
但這兩者也都無法盡善盡美：
-AlphaBlend沒有深度會有模型穿插問題。
-AlphaTest有頂點深度但邊緣鋸齒感嚴重，
需要在SSAA下面才不會有明顯的鋸齒。
-兩者結(jié)合使用效果比較好，
但會帶來更高的性能消耗。
所以至今為止，
游戲上面都很難做到滿意的毛發(fā)表現(xiàn)，
尤其是手游，
往往我們只能從設(shè)計層面去規(guī)避這些問題。
?
要制作一個東西，
我們必須抓住它的特點。
那么毛發(fā)有哪些特征呢？
我稍微歸納了一下：
通透性-次表面散射：
毛發(fā)是非常的細小的，
光線很容易就可以穿透它的表面，
尤其是淺色毛發(fā)，
顏色越深吸收光線的能力越強，
所以深色發(fā)毛的透光性相對較低。
?
這也是為啥很多女孩子
比較喜歡染發(fā)、燙發(fā)的原因之一。
因為淺色比黑色的毛發(fā)，
在逆光下的效果要漂亮很多。
燙發(fā)可以使頭發(fā)蓬松，
讓更多的光線穿透與反彈，
這樣整體的層次感會變得很豐富。
復(fù)雜的遮蔽性：
毛發(fā)又非常的密集，
毛發(fā)相互之間的陰影遮擋造成毛發(fā)。
密集的地方光線也很難繼續(xù)滲透進去，
就形成了發(fā)根到發(fā)梢的陰影漸變。
?
特殊的高光-各項異性高光：
頭發(fā)的表面并不是光滑的，
上面有一層被稱之為毛鱗片的結(jié)構(gòu)，
產(chǎn)生的高光散射性很高，
很多人造毛很難做到這一點。
這也是為啥很多廉價的假發(fā)的質(zhì)感
讓人一眼就看出來不真實的原因。
?
上面我們說了頭發(fā)，
是排列在一起的一個個細小圓柱體。
很多人不理解為什么
我們要把頭發(fā)的高光叫做各項異性高光，
我用一張圖簡單說明下。
?
我們這里提到的所謂各向異性高光，
其實是我們沒辦法真的將頭發(fā)
用一個個圓柱體來渲染，
而使用一種基于觀察近似的算法模擬結(jié)果。
而動物的短毛皮比人類頭發(fā)更加復(fù)雜，
可以大致分為兩類，
一種是表層的長毛（被毛），
另一種是內(nèi)層的絨毛（更加細小、彎曲）。
絲綢同理但更加復(fù)雜，
不同的絲本身質(zhì)感就不一樣，
加上不同針織結(jié)構(gòu)，
如紗、綺、絹、錦、羅、綢、緞等10多類，
造成絲綢效果最終質(zhì)感有很大的差異性，
有興趣可以深入了解不同絲綢的微觀結(jié)構(gòu)。
?
說了這么多。
在手機游戲里怎么實現(xiàn)這些效果呢？
?
用頂點細分來制作不現(xiàn)實，
這么大量的毛發(fā)，
又是移動端平臺，
機器的計算性能達不到要求。
而用大量面片插片的方式，
會占用大量3D美術(shù)的人力成本，
盡管效果是很好，
相對效果來說也不太劃算。
最后選擇了美術(shù)制作上最簡單的
多pass渲染的方案。
因為這套方案在美術(shù)資源制作上，
基本上和普通角色資源沒有差別，
唯一的限制就是skin多邊形數(shù)量上的限制。
而且這套方案在PC端游上已經(jīng)比較成熟，
比如《劍靈》。
多pass的方法局限性也很大，
不過我們可以拆分開來研究和優(yōu)化。
layer實現(xiàn)方式
?
根據(jù)模型使用層 (layer) 來渲染毛發(fā)長度，
在 Unity Shader 中，
每一個 Pass 即表示一層。
當(dāng)渲染每一層時，
使用法線將頂點位置擠出模型表面 。
Pass及使用的層數(shù)越多渲染效果越好，
當(dāng)然開銷也越大。
這種做法如果想要很好的表現(xiàn)，
就需要大量的pass。
如何用少量的pass實現(xiàn)更好的效果，
后面我們再一步步解決。
?
然后將Noise貼圖根據(jù)layer做衰減，
來當(dāng)做alpha值。
?
一定加入基于layer層高度的UV偏移。
? 沒有UV偏移效果的毛怎么看都會像刺猬。
? 記得對毛發(fā)做UV偏移的時候，
? ?Diffuse貼圖的UV也要跟著一起計算哦。
?
也可以加入風(fēng)力、重力等頂點控制項。
根據(jù)不同性能的機器來選擇是否開啟。
?
也可以將多層Noise
混合到一起來做一些不同的毛發(fā)，
將他們分別放到R、G、B不同的通道里，
可以減少貼圖量。
?
缺點：
? 這樣大家能看出來，
??多pass的制作方式，
??無法制作頭發(fā)這樣的長毛，
??只能制作較短的毛發(fā)。
??不過我們這次的目標也是制作短毛，
??所以長毛與頭發(fā)可以先拋開。
? 要有比較好的效果，
??就需要非常多的pass來進行計算，
??這也是我們不希望的。
??因為移動平臺對大量Overdraw這樣的
??像素級處理是非常大的一筆開銷。
?
layer的層數(shù)是越少效率越高的，
在低layer上得到更好效果是我們的目標。
我將控制半透明毛發(fā)的曲線做了一些優(yōu)化，
勉強可以在低layer上面達到多l(xiāng)ayer的效果。
?
優(yōu)化Layer數(shù)量
一般的做法：
優(yōu)化后：同時加入了可控的變量。
燈光
到現(xiàn)在為止，
在外形上基本接近了我們想要的毛發(fā)效果。
我們還需要將毛發(fā)的渲染特征也加上去。
這里用3個部分來實現(xiàn)：
環(huán)境光、輪廓光、太陽光
環(huán)境光：
環(huán)境光可以是一個單色，
也可以是一個微弱的頂?shù)诐u變，
或者球協(xié)光照（提取Hdir貼圖低頻數(shù)據(jù)）。
?
這里以簡單的頂?shù)最伾珵槔?#xff1a;
?
前面講了毛發(fā)的特點之一
就是環(huán)境光遮蔽與自陰影，
缺少了環(huán)境光遮蔽的效果只能打20分。
環(huán)境光遮蔽形成的散射是帶有顏色的，
會根據(jù)物體的顏色不同產(chǎn)生不同顏色。
我很懶，就沒將顏色與環(huán)境光遮蔽
之間的關(guān)系公式寫進去，
直接開放一個顏色手動設(shè)置反彈的顏色。
（也能節(jié)約一些計算不是~）
?
但要記住固有色越淺，
反彈光就越強，
Visibility的影響就越弱；
反之顏色越深，
反彈光就越弱，
Visibility的影響就越強；
簡單的說就是：
物體的顏色越淺，AO顏色越淺；
反之顏色越深，AO顏色越深。
輪廓光：
輪廓光其實也是環(huán)境光的一部分。
這里單獨給輪廓光計算，
也只是彌補環(huán)境反光的不足，
同時加一些可控項，
也可以調(diào)出一些特殊的不一樣的效果。
?
同時也和上面的一樣，
物體的顏色越淺，
輪廓光穿透率越強；
反之顏色越深，
輪廓光穿透率越弱。
這里也一定要加入環(huán)境光遮蔽的遮擋，
因為毛發(fā)的透光性，
邊緣稀疏的部分光線穿透率更高。
同時模擬了在環(huán)境光下次表面散射效果。
?
差異性在低多邊形下會更加明顯。
?
將Occlusion的計算
放到RimLight平方的前面，
是因為模型的多邊形數(shù)量低，
輪廓會比較明顯。
將Occlusion4次方，
能更好的減弱低多邊形的影響。
因為我們用于毛發(fā)材質(zhì)的模型面數(shù)，
是非常非常低的，
如果模型面數(shù)相對高一些的模型，
可以放到后面。
?
太陽光：
我們平常說的太陽光，
其實可以把它看成是平行光。
太陽其實是個點光源，
不過因為它過于龐大，
光線到地球上面的夾角非常非常小，
再到我們的可視物體的時候，
就完全可以忽略掉了。
?
我們就取最簡單的公式。
?
普通光照模型這樣計算沒有問題，
但完全沒有毛發(fā)的特性：
缺少太陽光在邊緣的穿透性，
也沒有逆光下的毛發(fā)次表面散射效果。
缺少每根毛產(chǎn)生的復(fù)雜的陰影表現(xiàn)。
?
用一個最簡單的擬合就可以得到這個效果。
主要利用了NdotL（-1~1）的特性。
?
最后將所有光照合并到一起：
?
? 為了節(jié)省性能，
??所有燈光與顏色計算全部在頂點空間完成；
? 像素空間只用來計算貼圖采樣；
? 很多需要貼圖一起計算顏色值的地方
??都優(yōu)化省略掉了，比較遺憾。
? 所有顏色計算都是在線性空間進行的
??所以最后要轉(zhuǎn)換到伽馬空間，
??這一步也可以去掉，
??也可以再加上簡單的tommping，
??讓畫面顏色變得更好。
高光 - Anisotropic（各項異性）
?
前面講毛發(fā)特性的時候，
對各項異性高光做了個簡單的介紹。
?
學(xué)術(shù)上Anisotropic（各項異性）的解釋：
? 某些材質(zhì)上有一些微觀上有方向的細絲，
??這些細絲在宏觀角度來看是不易察覺的，
??典型的有光盤的背面或者是頭發(fā)。
? strand based anisotropy是
??對上述光照情形的一種建模。
（http://www.bluevoid.com/opengl/sig00/advanced00/notes/node159.html）
一些Anisotropic表現(xiàn)的例子：
?
各向異性制作的各種具體實現(xiàn)方式
我就不一一細說了：
?
用抖動忒圖來彌補頭發(fā)細節(jié)。
?
頭發(fā)比較特殊
觀察頭發(fā)的高光會發(fā)現(xiàn)，
其中一層高光是有顏色的，
另外一層高光是沒有顏色的，
且兩層高光的相互錯開一點點。
?
我們根據(jù)公式在VS里計算出高光效果。
這時候會發(fā)現(xiàn)高光效果會很粗糙，
簡直有點不堪入目。
?
一步一步來優(yōu)化。
? 依然使用上面已經(jīng)使用老套的方法，
??用FUR_OFFSET做高光的遮蔽后，
??因為VS渲染精度方面過低的問題緩解了，
??但效果方面依然不是太好。
fixed SPec1 =StrandSpecular (T1,V,L,_specExp.x)*FUR_OFFSET;
?
? 因為毛束是一個個細小的單個圓柱體，
??它的高光也并不是一個平面連續(xù)的表現(xiàn)。
??我想了很多方法來彌補毛發(fā)體積與細節(jié)。
??最終下面的結(jié)果相對來說，
??得出的結(jié)果是目前得出的最好的。
??大家猜一下——下面這張圖是怎么得到的？
?
其實這就是我們目前的alpha當(dāng)做色彩輸出的結(jié)果。
? 越靠近透明的區(qū)域越黑，中間區(qū)域偏亮。
? 它剛好能達到我們高光缺少的細節(jié)部分的要求。
我就用它來當(dāng)做單根毛發(fā)邊緣體積的遮擋。
得到的結(jié)果很不錯。
同時這個也替代了抖動貼圖。
?
加入低頻與高頻2層高光后的效果更加自然。
?
高光部分我測試了很多方案，
目前效果只能說還能湊合著用，
因為都是在VS進行的計算，
效率上面應(yīng)該還行。
第一次寫分享，
羅里吧嗦的寫了一大堆。
效果方面肯定還有非常大的優(yōu)化空間。
歡迎大家一起討論和指正。
一些個人遇到的問題：
? 毛發(fā)UV控制部分我加入了flowmap，
??但是FlowTex的繪制太困難，
??而且也不直觀。
??可以做個工具實時直觀看到flowmap
??在毛發(fā)上面的繪制效果。
??甚至可以直接在unity繪制到模型頂點色
??XY2個值上面控制毛發(fā)方向。
? 多模型重疊的時候還是有深度穿插。
??分享一個16年的國外視頻，
??用了另一種方案來控制毛發(fā)長度與方向。
·END·
總結(jié)
以上是生活随笔為你收集整理的新版“峡谷第一美”妲己尾巴毛发制作分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 像素游戏制作大师MV新手教程（二）：素材
- 下一篇： 游戏UI设计师怎样的作品更值钱？