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