【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~


3樓貓 發佈時間:2023-05-30 09:48:03 作者:別喝可口可樂 Language

大家一起聽著音樂看文章吧

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第0張

當我第一次要拍洗頭水廣告的時候

其實我是 ,我是拒絕的 !

導演跟我講,拍完加特技

頭髮很黑,很亮,很柔

頭髮 !

Duang ~ Duang ~ Duang ~


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第1張

今天 !

讓我們一起來探索

        「遊戲開發小科普之頭髮的秘密」


溫馨提示:

此區域內容   非常輕鬆有趣

讓我們先來看看現實中的頭髮吧 . 


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第2張


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第3張


再看看在遊戲世界中的頭髮吧


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第4張


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第5張

在遊戲的世界裡 ,頭髮有著多種的類型

 

    第一種 , 繪畫的風格

夏日狂想曲中的人物就是繪畫出來的人物

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第6張

還有女神異聞錄5 中對話框中出現的人物

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第7張

這樣的展現一般在注重故事類遊戲更常見

就像是一個可以移動的卡片人物(圖片)

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第8張

  第二種   3D 人物模型

 

首先解釋一下 3D人物模型

它可以理解為  “手辦”


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第9張

和上面類型一樣 , 是會動的手辦

比如在奇異人生 ,偏卡通風格,

更注重遊戲內容

在她誕生的那一刻她的頭髮也跟著誕生


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第10張

我們來回到遊戲世界中

也是同樣的道理 ,在使用建模軟件創造出一個女孩的時候

她的頭髮也已經被創造了

比如就是這樣直接給你了一個完整的女孩子

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第11張

這樣的好處自然是更便捷 

但是同樣失去了更精緻的體現

想象一下

美女手辦的長髮會

隨著你拿著她擺動而飄散嗎 ?


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第12張

   第三種    假髮

 

假髮 ,顧名思義 

為了追求極致精美和多樣的頭髮

那就需要所謂的 “假髮”

這也是我後續要討論的主要方向

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第13張

我們會讓人物誕生時候並沒有頭髮

這樣製作出來了各種假髮 ,只需要戴在頭上就好了 

明白了這個想法後,我們來看看假髮的秘密吧

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第14張

    頭髮的顏色

底特律變人中的卡拉


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第15張


金色與褐色混合感覺,頭髮的顏色在

現實中使用的是染色劑 

遊戲中則是一個調色盤


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第16張

在頭髮上抹上不同顏色 ,就可以實現出了這樣混搭的色調 

比如天涯明月刀中的頭髮


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第17張

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第18張

如你所見 ,頭髮擁有多種的顏色混合 

並且還具有漸變效果

注意從頂部的藍色向粉色的漸變,其實還是調色盤的功勞 


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第19張

舉個通俗易懂的例子

遊戲裡頭髮設置的顏色 , 就像是你認識的各種顏色的彩鉛

但是在畫紙上能用彩鉛繪畫出多麼美的頭髮 

那就需要你慢慢的繪製了


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第20張

頭髮的美感不僅僅是因為顏色

頭髮還擁有著質感

就像是洗頭髮後 ,柔順和明亮的感覺

     “ 飄柔就是這樣自信 ”

飄柔打錢啊喂 !


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第21張


遊戲中也是同理

因為頭髮也是一種材質 (Material )

會搭配著環境的不同而產生不同的效果

影響他最有趣的還是光照

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第22張

在巫師 3 的葉奈法的頭髮 , 可以看到在蠟燭的燈光下,髮質顯得很具有油性感覺


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第23張

那麼在室外的希裡 , 頭髮就更偏向於 乾燥 / 順帶著一些小柔順 


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第24張

那麼使用好 調色盤 與 光照

就可以創造出頭髮很細膩的感覺


怎麼樣讓頭髮變得更加絲滑柔順 ?

 

現實中,我們不僅使用各種功能的洗髮水

還會使用 護髮素,洗衣粉等

洗衣粉什麼鬼啊喂!


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第25張

遊戲中也是可以做到的

主要在感官上有兩點 :

第一點:

頭髮可以通過材質與紋理的更細膩來完成

這就是遊戲裡的洗髮膏與護髮素

沒有洗衣粉啊喂

更沒有火鍋底料啊喂 !!


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第26張

生化危機4重製版 -  礙事梨臉模

第二點:

在前面剛剛提到的 “彩鉛繪畫” ,“環境光照”影響

紅藍Buff 正在持續中 …


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第27張

輕微的細節就體現出來了

看看耳朵那裡的頭髮

具有小撮頭髮,耷拉在耳朵上

這就是細節在各種光環的加持下顯得更好

 

那麼飄逸又是怎麼樣的呢 ?

其實也是上面所提到的因素


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第28張

只是隨著風中的搖曳 ,還涉及到了流體 ,力學 

我覺得以後還有機會

在更有趣的講解

比如從 遊戲中的海洋延展到 風中飄逸的秀髮

所以這裡就埋下一個伏筆

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第29張

等等 ! 

我們年輕人肯定喜歡柔順飄逸的秀髮

可是也存在有小孩,老人以及各種頭髮的質感

 

Duang ~ Duang ~ Duang !

加了特技的頭髮 ,是頭髮的特技

成龍大哥 :

   其實一開始我是拒 〃 絕 ~ 的   

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第30張

給我認真科普啊喂 !


在遊戲中真的也存在有各種的 “ 特技 ”

別忘了,我一直把他比喻為  “假髮”

 

來看看死亡擱淺裡,弩哥的頭髮

蒼老感 ,與瑪瑪相比來說

多了凌亂 ,這種的蒼老感在面部如鬍鬚以及面容下加重了 。

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第31張

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第32張

所以還記得之前討論的嗎 ?

頭髮不僅僅是因為他本身的美

而是加了特技 和 其他的映襯

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第33張

在這裡 我還想提到一款遊戲的CG

《黑悟空:神話》

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第34張

黑悟空在渲染上將頭髮接近了 “完美”

在這裡我們不討論這款遊戲其他

這次我們只討論頭髮

在頭髮的細節上

他 — 做的真的“完美”

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第35張

如果將上述的頭髮比喻為在白紙上作畫 

那他這個更像是 在清掃出土的文物

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第36張

舉個例子 ,大家都知道頭髮是一根根的

黑悟空在毛髮上從極小的部分開始認真繪製

就像是一個草地

上面的小草一顆顆種上去的(略微誇張)

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第37張

可能你會想 ?

國產的遊戲積累本來就不夠,怎麼可能做到 ?

其實有兩個方面 :

一是 毛髮的技術在遊戲行業早已成熟

二是 我一直在拿繪畫做比喻

    只是你10分鐘畫一張素描沾沾自喜 

    我可能花費數月畫出一副而已

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第38張

自己感想 :

其實中國的遊戲行業發展怎麼樣

我也沒有辦法去改變

我能做的只有兩點 :

1 我並不在乎像是悟空這樣的遊戲最終的生與死 

   我只是看到他們在這樣建模上的細緻 ,讓我熱淚盈眶

2 我永遠熱愛著遊戲

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第39張

那麼到這裡我肯定又要邀請出我的好朋友

《荒野大鏢客2》


綠油油的草地 ,想要流淚的雲朵

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第40張

這款遊戲我總是愛提到他

因為想亞瑟了 ! (抖個機靈)


這款遊戲就是結合了我們前面所提到的所有的元素

這種感覺像極了 :

   特技加滿的狀態

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第41張

不僅僅是頭髮的繪製極其的精美 

也因為他的其他元素都格外的美

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第42張

溫馨提示:

此區域內容

認為你已經看過上面內容

來看看遊戲引擎下的美吧

很多的時候 , 人物再創造出來的時候

在3D建模軟件中 , 頭髮,身體,衣服也就全部一起製作出來了

直接使用與展示了

就像是我們提到的 “ 手辦 ”

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第43張

也可以通過用多種顏色的頭髮組合來實現多彩效果

注意看這裡的劉海奧

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第44張

也可以通過 材質(Material) 來設置出漸變的頭髮

 Hair  ( StatTrak™ ) | 漸變之色

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第45張

也可以直接更換顏色 , 實現各種顏色的小姐姐

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第46張

頭髮的模型有一個最基礎的顏色(比如偏灰的)

然後直接更改材質的顏色就好了

就像是黑色的頭髮 可以染色為各種顏色

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第47張

很有趣吧 。

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第48張


本期內容就到此結束

那麼敬請下一期「遊戲開發小科普」 !

我們不見不散 !

悄咪咪 :  其實底下還有內容

———

上一期科普導航 :

「遊戲開發小科普-6」我穿這件衣服好看嗎?

上一期科普收入捐贈:

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第49張


請 ! 等一下 ! 

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第50張

文章還沒有結束 !


如果你對文章有興趣可以讀到最後

最後有福利 ,嘿嘿嘿


溫馨提示:

此區域內容從引擎角度展示

頭髮也是一種材質 , 所以也受到了光照的影響

可以看到臉部的陰影


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第51張

在線框中的樣子

線框:方便查看模型的內部結構


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第52張

仔細看 , 在單純的模型下 

打入光照,不是太陽的自然光

會發現頭髮其實是具有顏色層次的

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第53張

依舊能看到他就像是衣服一樣

只是緊貼著在一起

需要更復雜的手段去

儘可能的模擬真實的頭髮散落

注意看下圖中的胸部與頭髮的間距


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第54張

可以理解為用一股股頭髮拼湊在一起的

先看一下頭髮的圖


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第55張

再看一下頭髮的材質圖


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第56張

所以對於這個頭髮,你可以這樣的理解


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第57張

一塊塊的拼接在一起


溫馨提示:

此區域內容從材質角度

來看一下頭髮的材質什麼樣子吧

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第58張


生成這樣的材質需要通過顏色的搭配

來看一下生成的概念圖

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第59張

看一下這個材質球最原始的樣子

就像是純黑的物體

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第60張

通過繪畫板的繪製後 , 輸出的效果


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第61張

首先來看看顏色的設定吧

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第62張

這裡意思是:默認頭髮顏色為咖啡色 

也可以切換為使用紋理取樣,偏向於褐色 

紋理取樣參數2D


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第63張

想要讓頭髮更加真實 , 這裡直接使用了紋理 

為了增加更強烈的顆粒感

畢竟沒有誰的頭髮是完全的光滑無比的

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第64張

為了讓頭髮不會被穿透,比如你可以透過頭髮看到背後的景色

這裡加入了  不透明蒙版(Opacity Mask) 

意味著要麼完全可見,要麼完全不可見

但是這樣依舊可以讓光照影響著不透明的部分.

在這裡使用了:

一張紋理圖 與 約為 0.5 的白色材質球做到組合

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第65張


溫馨提示:

此區域內容 從圖形方面

影響的效果是什麼呢?


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第66張

頭髮是(至少我認為)是大多數玩家很容易觀察以及受影響的地方

不要給我說胸部啊喂 !

所以這裡也使用了

法線(Normal)

這樣可以大幅度的添加紋理細節,這是一個常用的手段

因為他看起來像是添加了諸多的多邊形

其實並沒有

甚至渲染的數量更少

這是不使用法線的細節

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第67張

這是使用了法線的細節


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第68張

主要區別就是在整體的質感上


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第69張

為了更明顯的體驗, 我們放在整體的頭發上來看一下

如箭頭所指向的地方,如同染色未影響的髮根


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第70張

為了體現出頭髮的更加柔軟 

這裡使用了Edge Mask 


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第71張

這裡使用的照相機矢量(Camera Vector)頂點法線矢量越接近垂直

則可以通過這個獲取參數值 , 這個比例是使用了Depth紋理 

就是為了增加頭髮的柔軟度

通俗點來講就是

在你相機的離頭髮越近的地方, 也就越容易進行透明

所以這裡就是根據位置進行計算來控制 蒙版   

上面提到的 不透明蒙版  ( Opacity Mask )

開始犯困了 ?

你怎麼睡得著的 ?


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第72張


這裡討論一個遊戲中經常所涉及到的點   

“ 深度偏移值 ”

具體是什麼效果呢 ?

在引擎的角度下考慮是:

在頭髮的紋理上直接的使用有時候很容易產生頭髮像是網格的薄片 

所以在同一個平面上就容易產生片狀結構(一塊一塊的)

深度偏移則是增加發束的深度 , 營造出頭髮上的層次感


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第73張

所以仔細看

23的深度偏移是不是具有更明顯的差距


可以怎麼理解呢 ? 

想象一下 

荒野大鏢客2的雪地裡走路,人物踩下的雪印


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第74張

在這樣雪印的渲染與地面的雪接近重合的時候,那麼為了不讓被覆蓋(多邊形的公共面)

那麼就可以輕微的偏移這樣能讓效果產生一定的透視效果,避免重疊

術語就是:  紋理映射透視處理


溫馨提示:

此區域內容 從數學方面


讓我們站在數學角度來看一下吧

採用標準的OpenGl透視投影矩陣對觀察空間一點P 

(可以理解為一根頭髮)

進行偏移  P = (Px,Py,Pz,1)

 

首先Px Py Pz可以理解為

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第75張

通俗的說: 想象一個三維空間 

 

在這個投影區域內的位置內

這裡解釋一下各個參數意思就開始計算 !

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第76張

中心軸為z軸 , e 為焦距 

a 為寬高比, 近剪裁平面的距離為 n 

遠剪裁平面的距離為f

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第77張

這是根據三維空間的矩陣列出來公式 , 針對右邊的內容

我們在引入第四維的矩陣 , W

這裡再轉換為 投影透視變換後 , 也就是用w座標去變換 , 這裡w是-Pz


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第78張

這裡w座標我們只關注Z軸,所以忽略  x    與  y  的

加入一個影響因子   1 + e

所以很容易得到:

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第79張

簡單的運算一下

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第80張

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第81張

這樣偏移值就算出來了 


這個偏移值上 e 的影響因子該怎麼最好呢 ?

其實就是在數學中運算的一個區間吧,也就是最大值最小值

通用的做法是根據相機空間偏移Q , 深度值Pz 再來一個偏移常數e


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第82張


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第83張

這是Z軸,上面也算過一次Z軸,兩個值進行相等,抽離出這個偏移常數e


【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第84張

這裡只是計算出來了偏移常數 ,接下來我們只需要 

然後加入一個緩衝區

上一篇科普最後說到的內容

將他帶入上面的偏移常數 , 就可以得到 相機的偏移值 Q 

這裡就不列舉計算了 , 我在演草紙上自己算了

有點懶了 , 哈哈哈哈哈哈哈哈哈 

【PC遊戲】「遊戲開發小科普-7」頭髮加特技 !Duang~-第85張

今天的旅程結束了!

期待下一期吧 !


© 2022 3樓貓 下載APP 站點地圖 廣告合作:asmrly666@gmail.com