纹理贴图、法线贴图、切线空间法线贴图

前言：我好像弄懂了一点点，把这个再梳理一遍

一切都要从 Shader 说起

Shader 分为「顶点渲染器」和「片段渲染器」

「顶点渲染器」

「顶点渲染器」保存三角形的三个顶点的 u v 值，给后续片段渲染器提供数据。但是返回 $Viewport × Projection × ModelView × uv$ 值。

「片段渲染器」

在调用「片段渲染器」之前，遍历属于三角形的最大矩形，用重心法算出比例。传递给「片段渲染器」，「片段渲染器」拿到这个比例以后就可以算出属于这个点的 u、v 值。通过 u、v 值从 diffuse 贴图中拿到颜色。

用图解就是这样

$u = \alpha u_0 + \beta u_1 + \gamma u_2$
$v = \alpha v_0 + \beta v_1 + \gamma v_2$

这就是不考虑光照的纹理贴图

法线贴图

当然通过 $\alpha ,\beta, \gamma$ 用插值的方法可以计算任一点的法线。

但是我们可以存储法线，像 diffuse 贴图那样通过 uv 访问。

存储法线的贴图

我们为什么需要法线贴图？

通过法线，我们可以计算该点的光照强度。使纹理感更强。

法线贴图的制作

可以看我这篇文章如何产生法线贴图
（我是翻译国外大神的，但是国外大神有点烂尾，有关键问题没有解决）

只要知道

是可以从普通「texture」贴图中计算法向量的。但是还有很多其他的办法

左图为普通 texture，右图为由左图计算的法线贴图

这样的法线定义在切线空间中

还没完

这样的法线贴图，有一个问题

举个例子，有一个正方体，每一面都贴相同的图，而由相同的图来说，法向量永远一样。但是由于在空间中位置的不一样，每一面的世界坐标系的法向量不可能一样。所以有的面算光强度的时候就会失败！

再举个例子，我们把世界坐标系中物体的表面法向量不指向 z 轴附近，指向 y 轴附近。其他的不变，从贴图中得到的法向量还是指向 z 轴附近的。所以光照强度肯定还是错的！

明白了就给我点个赞吧

所以我们需要计算出一种矩阵，把法线从切线空间变换到一个不同的空间，这样在切线空间的法线就能和表面法线方向对齐了

一个神奇的矩阵

这个矩阵牛逼坏了

我们要计算的矩阵叫做「TBN 矩阵」。T B N 分别代表 Tangent（切线）、Bitangent（副切线） Normal（法向量）

下面叙述推导过程

首先 N 是表面法向量

用差值算（用比例算）

$n = \alpha n_0 + \beta n_1 + \gamma n_2$

看上图 T、B 的方向和纹理方向一致。

看上图可以写出，

$E_1 = \Delta U_1T + \Delta V_1B$
$E_2 = \Delta U_2T + \Delta V_2B$

可以写出

$(E_{1x}, E_{1y}, E_{1z}) = \Delta U_1(T_x, T_y, T_z) + \Delta V_1(B_x, B_y, B_z)$
$(E_{2x}, E_{2y}, E_{2z}) = \Delta U_2(T_x, T_y, T_z) + \Delta V_2(B_x, B_y, B_z)$

写出

$\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} T_x & T_y & T_z \\ B_x & B_y & B_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} T_x & T_y & T_z \\ B_x & B_y & B_z \end{bmatrix}$

算出 [T, B] 后记得要正则化噢，加上表面法向量 N

$\begin{bmatrix}T_x & T_y & T_z \\ B_x & B_y & B_z \\ N_x & N_y & N_z \end{bmatrix}$

还没完

哈哈，我骗你的啦。一切都结束了。最后你只要记得，在切线空间里得到的法向量乘以这个矩阵，就得到世界坐标系中的法向量啦

最后实现渲染器的代码

点个喜欢呗

最后编辑于：2019.05.13 16:55:33