女猎人Varga游戏角色塑造流程揭秘

4.4.Photoshop 进一步调整法线贴图

这一节主要讲述法线贴图的工作原理及应用技巧，需要一些基础的数学及向量等知识。

4.4.1.TS（tangent space）Normal Maps 切线域法线贴图综述：

首先来简单说一下关于法线贴图的计算和显示。
我的兴趣主要集中在 tangent space normal maps（切线域法线贴图），因为 world 或 object space normal map 不适合角色或可变形物体。因此除非特别指明，下面我说的所有法线贴图都指的是 tangent space normal maps（切线域法线贴图）。

如果你和我当初一样是第一次接触法线贴图（尤其是切线域法线贴图），下面的内容应该有点帮助。

最开始，我真是被“Seam”接缝问题打败了：一个软件计算出来的法线贴图不能在另一个里正常显示——UV边界上会出现接缝。我绞尽脑汁想要解决这个问题——读每个软件的帮助文件、作测试、在互联网上搜索...终于了解了这个问题以及它产生的原因，不过还是不能修正它。

这个问题的产生主要在于各个软件计算/显示切线域法线贴图的方式不同。

Tangent space 切线域由3个向量组成：一个是 normal（法线-与表面正交垂直）；另外两个与法线垂直，称为tangent（切线）和 binormal（副法线）或 bitangent（双切线）。这两个名字我都见过，有人说 bitangent（双切线）这个称呼是正确的，毕竟我们讨论的是一个表面——3d空间的曲线的切线域为一条切线两条法线（normal 法线和 binormal 副法线）；而表面的切线域为一条法线和两条切线（ tangent 切线和 bitangent 双切线）。其实名字武官紧俏，主要明白说的是什么就行了。总之这三个向量能定义表面上任意一点，把它们集合在一起就成为了一个坐标组。

一个三角形的切线域通常按下述方法计算：
——Normal Vector 法线向量与三角形面垂直，用蓝色表示，储存在法线贴图的蓝色通道里。
——tangent 切线向量用红色表示，储存在红色通道里；binormal 副法线向量用绿色表示，储存在绿色通道里。它们的方向与UV的方向相同：切线为左右向，即为贴图空间中的 U 坐标；副法线为上下向，是贴图空间中的 V 坐标。许多法线贴图的设置窗口中都有反转方向的选项，这个方向指的就是 tangent 切线向量的（左右/右左）方向和 binormal 副法线向量的（上下/下上）方向，另外一些软件的方向比较特殊。你也可以在 Photoshop 的通道中反转方向，比如要反转红色的切线向量方向：按 ctrl+1 进入红色通道，按 ctrl+I 反转，按 ctrl+~ 返回RGB模式（副法线向量同理操作即可）。

假如我沿对角线切割UV，并将1号面顺时针旋转90度，而 UV 空间的旋转，导致了1号面切线方向与与最初的位置发生了变化（1号三角形的rgb通道同样沿蓝色轴旋转了90度）

因此，UV shell 的方向会影响到法线贴图的颜色；如果旋转模型的UVs（或其中一部分UV shell），比如顺时针旋转90度，那么重新计算出来的法线贴图颜色就会完全不一样（并不是整张图像旋转了90度这么简单。你可以在 Photoshop 中顺时针旋转90度对比一下就会发现区别）。

每个点的切线域计算完成后，还可以通过内插值的方法得出表面上其它任意位置的切线向量，通常 tessellation 镶嵌细分越多，计算起来就越复杂。比如 Maya 上一个版本的法线贴图计算就依靠 tessellation 镶嵌细分，因此如果你有一个三角面的模型，选择一个边反转，法线贴图就会因为 TS 切线域的重新计算而无法正确显示。不过 Maya 的新版本解决了这个问题：用专门的工具（比如 NVMesh Mender）备份所有点的切线数据模型，以用于 per-pixel lingting——基于象素点（而不是顶点）的照明。

如果采用光线追踪的方式来计算法线贴图，会先从低多边形网格的当前点发出一条光线，投射到该点法线与高分辨率模型相交位置，同时按 world space 计算相交处高分辨率模型的法线数据，最后将计算结果传递回低多边形模型的点上，并储存在法线贴图中。因此法线的计算是根据低多边形模型的切线域来进行的，而切线域必须由相同的法线/切线/副法线组成，而不同软件间由于切线域计算方式的不同，最终导致了法线贴图显示的扭曲或间断。

不能正确显示还不是大问题，最主要的是不同软件间的数据无法共享，尽管有人出于爱好编写了相应的工具或插件来解决，但真正确立了一套通用规则的只有 Mudbox，在他们的在线帮助上可以看到详细的切线域向量计算方式。

现在你知道问题的根源了，虽然无能为力，但至少知道这是软件的问题，不用自己独自烦恼了。

下面我来举个例子来解释一下法线贴图的计算以及转换方式，以便于你能够在 photoshop 中进行调整、叠加以及直接绘制。

我将一个平面和圆柱体的法线贴图烘培到下图绿色线框标注的平面方块上。如前所述，切线域空间如下图所示分别为：切线域法线为蓝色箭头，切线为3-4方向红色箭头，副切线为3-1方向绿色箭头。圆柱体为硬边分段，以便于观察法线贴图的变化，分段标号为1-7。

如果我们从正前方观察物体，形状应如下图所示。

图片的上方有一组配色表：高分辨率模型为白色，它的法线用青色表示，低多边形模型为粉红色，法线用黄色表示（因为低多边形表面上所有地方的法线方向都是一样的）。

下面的 TS（切线域）坐标分别为：切线（红色左-右方向）、法线（蓝色下-上方向）以及副法线（绿色垂直屏幕，你-屏幕方向）。注意图例画面上高分辨率所有面的副法线方向都是平行的，而圆柱两端的三角形面在法线贴图中将不可见。

现在，高分辨率模型上每个多边形都根据切线域分解为法线向量（青色）、切线（红色）及法线（蓝色），所有的副法线因为与副法线向量平行，因此均为0。

绿色的虚线用于辅助观察面和面之间的颜色过渡以及它们对应的模型位置。

从低多边形模型到高分辨率模型的灰色箭头用于表示计算法线贴图时发射的光线。现在假设低多边形的点（A\B\C\D\E\F\G\）发射了了光线，接下来会怎样呢：

附带说一下，如下图所示，将青色的法线向量分解为切线域结构，以向量为对角线，单位为1，那么切线和副法线都会按正反方向生成一个矩形相邻的两条直角边，数值为-1至1之间，并可按比例转换为正整数，以灰度值储存在法线贴图的RGB通道中：
——切线（红色通道）负方向区间(-1,0)，那么它的灰度值范围就在0-127之前，0是128的中灰色。反之，正方向（0，1）的范围就在129-255之间。
——同理适用于副法线的绿色通道。
——法线向量的值永远为正，灰度值范围总是在128-255之间。因为切线域法线贴图的法线向量不能指向负方向，所以以它为标准单位，可以很方便的计算出其余两个数值。

我们从D点发射一条光纤，与高分辨率模型的4号面相交，因为两者的法线平行，所以切线的值为0，在红色通道表示为128的中灰。

F点的光线与6号面相交，可以看到这个面的法线向量（青色）为1个单位，分解出切线（红色）长度约为正方向0.78，对应的法线贴图的红色通道灰度值是228；蓝色的副法线长度约为正方向0.625，对应的法线贴图的蓝色通道灰度值为208。

B点的光线与2号面相交，青色的法线向量可分解为红色的切线，长度-0.78单位，对应灰度值为22；蓝色的副法线长度为0.625单位，对应蓝色通道的灰度值为208。