法线贴图那些事儿

概述

在学习法线贴图的过程中,有几个比较难以理解的概念,这里记录一下。特别说一下,本文的法线贴图是切线空间下的法线贴图。

空间变换

空间变换示意图

如上图所示,简单表达了在使用法线贴图的过程中,涉及到的几个空间变换:

  1. 切线空间:从法线贴图中采样得到的法线,在切线空间中;

  2. 对象空间:物体的本地坐标空间,顶点的相关信息,在对象空间;

  3. 世界空间:光源位置、观察者位置等,在世界空间中。

在空间变换的过程中,主要涉及到了两个变换矩阵:

  1. TBN矩阵:从切线空间变换到对象空间;

  2. Model矩阵:从对象空间变换到世界空间。

对于上述概念,大部分都是比较熟悉的,只有法线贴图、切线空间和TBN矩阵比较陌生。下面,将分别介绍一下。

法线贴图

在3D计算机图形学中,法线贴图是一种用于伪造凹凸光照的技术,是凹凸贴图的一种实现。它用于添加细节,而不使用更多的多边形。这种技术的一个常见用途是,通过从高精度多边形或高度图生成法线贴图,来极大地增强低精度多边形的外观和细节。下图来自Paolo Cignoni,图中对比了两种方式:

法线可以使低精度模型实现高精度模型的效果

法线贴图通常存储为常规RGB图像,其中RGB分量分别对应于表面法线的X,Y和Z坐标。

法线的每个分量的值的范围是[-1,1],而RGB分量的值的范围是[0,1]。所以,在将法线存储为RGB图像时,需要对每个分量做一个映射:
vec3 \quad rgb\_normal = normal * 0.5 + 0.5
这里要注意,将法线存储到法线贴图的过程中,需要进行上述操作。当我们从法线贴图中读取到法线数据后,需要进行上述变换的逆变换,即从[0,1]映射到[-1,1]

切线空间

那么,法线向量应该相对于哪个坐标系呢?我们可以选择模型顶点的的坐标系,即对象空间;也可以选择模型纹理所在的坐标系,即切线空间,也称为纹理空间。

对象空间中,法线信息是相对于对象空间的朝向的,各个方向的法线向量都有,所有贴图看起来色彩比较丰富;而在切线空间中,法线是相对于顶点的,大致指向顶点信息中的法线方向,即法线向量接近于(0,0,1),映射到RGB是(0.5,0.5,1),这是一种偏蓝的颜色。下图分别是对象空间和切线空间下的法线纹理。

对象空间和切线空间下的法线纹理

那么,怎么进行选择呢?考虑一下二者的优缺点:

  1. 重用性:对于对象空间的法线贴图,它是相对于特定对象的,假如应用到其他的对象上,可能效果就不正确了;而切线空间中的法线贴图,记录的是相对法线信息,所以可以把它应用到其他对象上,也能得到正确的结果。

  2. 可压缩:考虑到法线向量是单位向量,而且Z分量总是正的,可以只存储XY方向,而推导出Z方向。

综上所述,我们一般选择切线空间下的法线贴图。

TBN矩阵

在光照的计算过程中,需要用到光线方向、视线方向和法线方向等,为了得到正确的结果,这些变量必须在同一坐标系下计算。参考一下本文开头的“坐标变换示意图”。

在纹理坐标系中,x和y分量与2D图片的水平方向和垂直方向对齐,而z分量指向图片外部的上方。如下图所示:

纹理坐标系

为了正确使用贴图中的纹理信息,我们必须找到一种方法——从切线坐标空间变换到对象空间。这可以通过指定切线坐标系的坐标轴在对象空间中的方向来达到。

对一个单独的三角形面片来说,我们可以认为纹理贴图覆盖在三角形的表面上,如下图所示:

image

根据上图,可以得出:三角面片和纹理贴图是共面的。那么,根据平行四边形法则,可以得出:
\begin{matrix} E_{1} = \Delta U_{1}U + \Delta V_{1}V \\ E_{2} = \Delta U_{2}U + \Delta V_{2}V \\ \end{matrix}
其中,E_{1}E_{2}是两个顶点之间的向量差,可以根据顶点的坐标计算出来;\Delta U_{1}\Delta V_{1}\Delta U_{2}\Delta V_{2}分别是纹理坐标的水平和垂直方向的差,可以根据纹理坐标计算得到。UV分别是纹理的水平和垂直坐标轴,是要计算的未知量。

写成坐标表示:
\begin{matrix} \left( E_{1x},E_{1y},E_{1z} \right) = \Delta U_{1}\left(U_{x},U_{y},U_{z}\right) + \Delta V_{1}\left( V_{x},V_{y},V_{z} \right) \\ \left( E_{2x},E_{2y},E_{2z} \right) = \Delta U_{2}\left(U_{x},U_{y},U_{z}\right) + \Delta V_{2}\left( V_{x},V_{y},V_{z} \right) \\ \end{matrix}
上面的方程,也可以写成矩阵乘法的形式:
\begin{bmatrix} E_{1x} & E_{1y} & E_{1z} \\ E_{2x} & E_{2y} & E_{2z} \\ \end{bmatrix}= \begin{bmatrix} \Delta U_{1} & \Delta V_{1} \\ \Delta U_{2} & \Delta V_{2} \\ \end{bmatrix} \begin{bmatrix} U_{x} & U_{y} & U_{z} \\ V_{x} & V_{y} & V_{z} \\ \end{bmatrix}

两边同时乘以\Delta U \Delta V的逆矩阵,可得:
\begin{bmatrix} U_{x} & U_{y} & U_{z} \\ V_{x} & V_{y} & V_{z} \\ \end{bmatrix}= \begin{bmatrix} \Delta U_{1} & \Delta V_{1} \\ \Delta U_{2} & \Delta V_{2} \\ \end{bmatrix}^{-1} \begin{bmatrix} E_{1x} & E_{1y} & E_{1z} \\ E_{2x} & E_{2y} & E_{2z} \\ \end{bmatrix}

求逆矩阵不太方便,可以使用伴随矩阵法
\begin{bmatrix} U_x & U_y & U_z \\ V_x & V_y & V_z \end{bmatrix} = \frac{1}{\Delta U_1 \Delta V_2 - \Delta U_2 \Delta V_1} \begin{bmatrix} \Delta V_2 & -\Delta V_1 \\ -\Delta U_2 & \Delta U_1 \end{bmatrix} \begin{bmatrix} E_{1x} & E_{1y} & E_{1z} \\ E_{2x} & E_{2y} & E_{2z} \end{bmatrix}

至此,我们求出了UV向量。但是我们需要的构成TBN空间的坐标轴是正交的,这里求出的UV并不一定能满足正交的条件。这里,顶点的法线N是已知的,我们可以根据UVN,根据格拉姆-施密特正交化方法,求出与N正交的TB(此处假设切线空间是右手坐标系):
\begin{aligned} T &= normalize \left( U - dot \left( U,N \right) * N \right) \\ B &= normalize \left( cross \left( N,T \right) \right) \\ TBN &= mat3 \left( T,B,N \right) \end{aligned}

这样,我们获得了坐标轴相互正交的TBN矩阵。

实际使用中的法线贴图

看完上面计算切线空间的TBN矩阵的部分,估计也是头大。不禁想到,每次使用法线贴图的过程,真的如此麻烦吗?

幸运的是,答案是否定的。

一般情况下,模型存储的顶点信息中,都包含了顶点的法线和切线的数据,这样,我们就不用进行上面的复杂计算了,直接使用法线和切线的叉乘,求出副切线,从而构成TBN矩阵。

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352