【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