想象一下，你正在装修新家，想把一面平淡无奇的墙壁变成粗犷的石墙。真正的石墙又贵又重，于是你灵机一动——买了一张印着石纹的壁纸。贴上去之后，只要灯光一照，那光影的深浅变化竟然让整面墙“看起来”真的凹凸不平，甚至忍不住想伸手摸摸。但如果凑近细看，又发现墙其实是平的。 在 3D 游戏和电影的世界里，艺术家们每天都在玩这个“贴壁纸”的把戏。不过他们的“壁纸”可比装修用的高级多了——它不仅能模仿花纹，还能精确地“欺骗”光线，让光线误以为墙面真的有凹坑和凸起，从而正确地投射出明暗阴影。这张神奇的“壁纸”，就是本文的主角：法线贴图（Normal Mapping）。它能让一块平滑的曲面变得细节丰富、质感十足，而完全不需要改变模型的几何形状。今天我们就来拆解这张“魔法壁纸”的纹理编码、坐标系统与光影原理。

岗位关联

对 AI 从业者而言，法线贴图是理解渲染管线和材质表达的关键一环。掌握它，你的 AI 模型（如生成式 3D 内容工具）才能输出真正符合渲染器预期的物理资产。

目录
  1. 可视化演示
  2. 法线贴图概念
  3. 凹凸贴图原理
  4. 切线空间
  5. 法线存储格式
  6. 光照计算
  7. 制作流程
  8. 工程应用
  9. 技术对比选型
  10. AI 应用场景
  11. Python 演示
  12. 常见误区
  13. 面试题

可视化演示

通过凹凸原理对比、TBN切线空间变换、光照计算流程三个模式，展示法线贴图如何在不改变几何的前提下模拟表面凹凸细节。

本节配有交互动效（进入视口后自动加载，约 3KB）。

凹凸贴图与法线贴图原理对比 凹凸贴图通过高度图扰动表面法线模拟微观几何细节 法线贴图直接存储扰动后的法线向量实现更精确的光照 rgb = (normal + 1) * 0.5 * 255 法线贴图不改变几何轮廓仅影响光照计算结果

法线贴图概念

还记得装修时贴壁纸的场景吗？壁纸本身是平的，但印在上面的砖纹阴影让人产生了立体错觉。法线贴图做的就是这件事——只不过它骗的不是眼睛，而是光线。确切地说，它欺骗的是渲染器里的光照计算公式。光照公式就像一名认真的安检员，它会严格检查物体表面每个点的朝向（也就是法线方向），再决定这个点该亮还是该暗。如果表面是平的，安检员就会给出“整片区域均匀受光”的结论，视觉上就是平平无奇的效果。

法线贴图的思路非常巧妙：既然安检员只看“朝向”这个信息，那我们就伪造一份“朝向记录表”给它看。这份记录表不描述真实几何形状，只描述“如果这里真的凹凸不平，法线应该朝向哪里”。于是，原本平整的平面在光照计算中获得了类似真实凹凸表面的光影分布，产生了以假乱真的立体感。

这种“伪造记录表”的技术对游戏和影视行业意义重大。要知道，在模型里加一个真实的凸起，意味着要多画几百上千个三角形，会显著增加 GPU 的计算压力。而一张法线贴图只是普通的图片文件，GPU 读图的速度远比处理复杂几何快得多。因此，法线贴图的核心优势——用廉价的纹理采样替代昂贵的几何建模——让它成为实时渲染中最受欢迎的“作弊工具”之一。

回到那面墙。壁纸让我们省下了搬运真石材的力气，法线贴图让艺术家省下了雕刻百万三角形的功夫。它们都遵守同一条法则：真正重要的是观察者感知到的东西，而不是真实存在的东西。

凹凸贴图原理

如果说法线贴图是“骗过安检员的记录表”，那它最初是怎么被伪造出来的呢？在 3D 建模软件里，模型最开始的那份“凹凸信息”通常是一张高度图（Height Map）。这张图是一张灰度图，上面深一块浅一块的斑驳纹理，像是用炭笔在纸上随意涂抹的阴影素描。画得越亮的地方，代表表面凸起越高；越暗的地方则凹陷越深。

关键在于怎么把“高度图里的深浅”变成“法线方向”。想象你在爬一座沙丘，沙丘的陡峭程度取决于你脚下地形的“斜率”。当高度变化剧烈时，坡度就大，站在上面你的身体自然会向一侧倾斜——这个“倾斜”的方向和角度，就是法线方向。数学上，这个斜率就是高度函数对水平方向的导数（偏导数）。只要知道了高度图在某个点的水平和垂直方向的变化率，就能算出该点的法线方向。

这种方法被称为“从高度图生成法线贴图”，常用的是 Sobel 算子或中心差分法。对于高度图上的任意点 (u,v)，采样它左右和上下的高度值，用差分公式估计该点在 T 方向和 B 方向的坡度，两个坡度向量叉乘（Cross Product），就能得到垂直于表面的法线向量。是不是有点想起高中数学课上的"“斜率”概念？是的，法线贴图生成的核心思想正是让“斜率”参与表面光影的计算。

沙丘的梦幻之处在于，即使它真的只是平地上的一堆沙子，风的雕刻也能让它呈现出千变万化的轮廓。高度图就是那堆沙子，差分运算就是风，而最终的法线贴图则是沙丘起伏时投下的光影。

这个从高度到梯度的转换过程，就是“把素描变成雕塑”的关键步骤。它赋予了平面最基础的立体感。

N=normalize([−∂h∂u−∂h∂v1])\mathbf{N} = \text{normalize}\left( \begin{bmatrix} -\frac{\partial h}{\partial u} \\ -\frac{\partial h}{\partial v} \\ 1 \end{bmatrix} \right)
用图像处理术语来说，这个公式是用高度图的梯度（gradient）构造扰动后的法线向量：水平方向和垂直方向的斜率取反，再与 1 组合并归一化，构成一个指向“上”的向量。
  1. 高度采样获取高度图在像素 (u,v) 处的灰度值 h(u,v)，灰度范围通常是 [0,1] 或 [0,255]。
    h=texture(u,v)\displaystyle h = \text{texture}(u, v)
  2. 计算偏导数通过相邻像素的高度差，估计高度在 u 方向和 v 方向的变化率，即坡度。
    ∂h∂u≈h(u+1,v)−h(u−1,v)\displaystyle \frac{\partial h}{\partial u} \approx h(u+1, v) - h(u-1, v)
  3. 构造法线向量将两个偏导数取负，与 1 组成三维向量。这个 1 代表默认的“向上”方向。
    N′=[−hu−hv1]\displaystyle \mathbf{N}' = \begin{bmatrix} -h_u \\ -h_v \\ 1 \end{bmatrix}
  4. 归一化将向量长度缩放为 1，确保后续光照计算的点积运算结果正确。
    N=N′∥N′∥\displaystyle \mathbf{N} = \frac{\mathbf{N}'}{\|\mathbf{N}'\|}

切线空间

现在我们拿到了一堆法线向量，但它们存在一个棘手的问题：这些向量是在“什么坐标系”下描述的？在三维世界里，“上下左右”总是相对的。你在北京说“上”，你在地球另一端的朋友就不会同意。同样，对于一个倾斜放置的砖块，它的“表面法线”到底是垂直于砖块自身，还是垂直于地面？如果全世界的法线都用一个统一的世界坐标系来描述，那每逢物体旋转，贴图就必须跟着旋转，如同墙上的壁纸会随着墙体的歪斜而歪斜掉。

解决这个问题需要引入切线空间（Tangent Space），一个附着在模型表面的局部坐标系。它有三个轴：法线轴 N（垂直于表面）、切线轴 T（沿着纹理 U 方向）和副切线轴 B（沿着纹理 V 方向）。这三个轴合称 TBN 矩阵。你可以把 TBN 想象成贴在模型表面的一个“指南针”：无论表面怎么旋转、怎么弯曲，这个指南针都会跟着局部变形而调整方向。这样，法线贴图里存储的数值就总是相对于表面的“本地朝向”，而非相对于世界的“绝对朝向”。

有了切线空间，渲染管线中的光照计算就得走一条双向的桥梁：先把光照方向从世界空间变换到切线空间，或者把法线从切线空间变换到世界空间。前者在顶点着色器中完成，性能更优；后者则在像素着色器中进行，灵活性更高。

这个“本地指南针”的意义，如同你出门旅行时携带的地图：地图只描述你周围的街道，无论你在哪个城市都能用。切线空间让同一张法线贴图可以贴遍所有模型，而不必为每个模型重画一份“世界地图”。

法线存储格式

走进贴图烘焙车间，你会看到一摞摞排列整齐、泛着蓝紫色光泽的图片，这就是法线贴图的“标准照”。你可能会好奇：为什么法线贴图总是呈现出蓝紫色？而不是像普通贴图那样五颜六色？这就要从它的编码方式讲起。

一张标准的法线贴图是一张 RGB 图像——一个像素有三个通道，Red、Green、Blue，每个通道存一个 8 位整型数，范围从 0 到 255。而空间中的法线向量是三个分量（x, y, z），取值范围通常在 [-1, 1] 之间。于是，一个自然的映射方案诞生了：把 xyz 分量的 [-1, 1] 范围映射到 RGB 通道的 [0, 255] 范围。这就是所谓的“RGB 编码 XYZ”。

那么蓝紫色从何而来？观察你会发现，绝大多数法线贴图的主色调都是偏蓝的。这其实是一条隐藏的规则：在切线空间中，法线向量的 z 分量（垂直表面向上）通常接近 1，因为正常情况下表面法线就是朝外的。按照映射规则，z 分量接近 1 对应蓝色通道接近白色 255，而 x 和 y 分量往往在 0 附近波动，对应红绿通道接近中间值 128。三者混合，整体就呈现为我们熟悉的蓝紫色调。这可以说是法线贴图的““出厂制服””。

但要小心：这种映射是约定俗成而非强制标准。不同的软件对 Y 轴朝向可能有不同约定（比如 OpenGL 与 DirectX 的差异），一旦混淆就会导致光影效果“翻车”。在工程实践中，如果你发现模型的光照出现“凸变凹、凹变凸”的现象，十有八九是法线贴图的 Y 轴约定与引擎不一致。

这份“出厂制服”让 GPU 能以极低的成本解码法线数据。现实中，每次从贴图读到颜色后，GPU 只需做一次乘法、一次加法即可还原法线向量，这让法线贴图在实时渲染中拥有极高的性价比。

color=round(N+12×255)=[RGB]\text{color} = \text{round}\left( \frac{\mathbf{N} + 1}{2} \times 255 \right) = \begin{bmatrix} \text{R} \\ \text{G} \\ \text{B} \end{bmatrix}
这个式子将法线向量从数学空间 [-1, 1] 转换到图像空间 [0, 255]：加 1 是为了把负数变为非负，除 2 是归一化到 [0, 1]，再乘 255 转为 8 位整型存储。
  1. 分量偏移将法线向量的每个分量加 1，把 [-1, 1] 范围平移到 [0, 2] 范围，消除负数。
    N+1=[Nx+1,Ny+1,Nz+1]\displaystyle \mathbf{N} + 1 = [N_x+1, N_y+1, N_z+1]
  2. 归一化缩放除以 2，将范围压缩到 [0, 1]。
    N+12∈[0,1]\displaystyle \frac{\mathbf{N} + 1}{2} \in [0, 1]
  3. 量化到 8 位乘以 255 并四舍五入，映射到 0~255 的整型范围，符合图片存储格式。
    RGB=round(N+12×255)\displaystyle \text{RGB} = \text{round}\left( \frac{\mathbf{N} + 1}{2} \times 255 \right)
  4. 解码还原在渲染时逆向操作，先将 RGB 除以 255，乘以 2，再减 1，还原到 [-1, 1] 的法线向量。
    Ndecoded=RGB255×2−1\displaystyle \mathbf{N}_{\text{decoded}} = \frac{\text{RGB}}{255} \times 2 - 1

光照计算

法线贴图的所有准备工作，最终都是为了在一个宏大的“舞台”上表演——光照计算。想象你用一只手电筒在暗室里照射一面粗糙的墙壁：光打到凸起的地方会更亮，落到凹陷处则更暗。手电筒没有改变墙壁的几何形状，但明暗变化让你清晰地感知到凹凸。这个场景的背后，是光照模型在起作用。

最简单的光照模型是 Lambert 漫反射模型，它描述的是光线照射到粗糙表面后向四面八方均匀散射的现象。这个模型的表达式非常优雅：漫反射亮度等于光源颜色乘以表面颜色，再乘以光线方向与法线方向夹角的余弦值（即点积）。当光线垂直于表面时最亮，掠射时最暗。法线贴图的“伪造法线”就是在这一步发挥威力的——它改变了点积运算中的向量夹角，从而让平坦表面呈现出凹凸起伏的光影变化。

然而 Lambert 模型只能表现“哑光”质感，无法解释光滑表面上的高光亮点。于是就有了 Blinn-Phong 高光模型的延伸。它引入了半角向量（光线方向与视线方向的中间值），将半角向量与法线的点积进行幂运算，模拟出集中于某一方向的高光反射。法线贴图的高频扰动让高光产生细腻的变化，比如湿漉漉的石板路在月光下闪烁的碎光，正是千万个微小法线方向差异的杰作。

现在回到那间暗室。手电筒的光线没变，墙面也没变，变的是墙上那张法线贴图“伪造”的朝向量。就是这个微妙的变化，让原本乏味的平面拥有了戏剧性的光影层次。

Lout=Llight×color×max⁡(N⋅L,0)+spec×(N⋅H)αL_{\text{out}} = L_{\text{light}} \times \text{color} \times \max(\mathbf{N} \cdot \mathbf{L}, 0) + \text{spec} \times (\mathbf{N} \cdot \mathbf{H})^{\alpha}
第一项是漫反射：法线与光线方向点积，决定基础的受光强度。第二项是高光：法线与半角向量点积再求幂，决定高光的亮度和集中程度。
  1. 点积计算计算法线 \(\mathbf{N}\) 与光线方向 \(\mathbf{L}\) 的点积。如果夹角小于 90 度，结果为正；若光线在表面背后，结果为负，需要钳制为 0。
    cos⁡θ=max⁡(N⋅L,0)\displaystyle \cos\theta = \max(\mathbf{N} \cdot \mathbf{L}, 0)
  2. 半角向量将光线方向 \(\mathbf{L}\) 与视线方向 \(\mathbf{V}\) 归一化相加，得到半角向量 \(\mathbf{H}\)，它代表“反射最亮的方向”。
    H=L+V∥L+V∥\displaystyle \mathbf{H} = \frac{\mathbf{L} + \mathbf{V}}{\|\mathbf{L} + \mathbf{V}\|}
  3. 漫反射着色将点积结果乘以材质颜色和光源颜色，这是物体基础颜色的来源。
    Ldiffuse=Llight×color×max⁡(N⋅L,0)\displaystyle L_{\text{diffuse}} = L_{\text{light}} \times \text{color} \times \max(\mathbf{N} \cdot \mathbf{L}, 0)
  4. 高光成形计算 \(\mathbf{N} \cdot \mathbf{H}\) 的 \(\alpha\) 次幂。\(\alpha\) 越大，高光越集中、光斑越小，表面显得越光滑。
    Lspec=spec×(N⋅H)α\displaystyle L_{\text{spec}} = \text{spec} \times (\mathbf{N} \cdot \mathbf{H})^{\alpha}

制作流程

在游戏公司里，法线贴图的制作是一门艺术与工程交织的手艺。想象一个雕塑工作室：艺术家先用油泥雕出一个细节丰富的“高模”——这可能是带有每一道伤疤、每一条皮革纹路的角色模型，花费数月精心打磨。但在实际游戏中放置数百万三角形的模型是不现实的。于是，工作室里还有另一位师傅：他用极少的三角形快速搭出模型的粗略外形，称为“低模”。现在的问题是，怎么把高模的精细细节“压印”到低模上？

答案就是烘焙（Baking）技术。在 3D 建模软件（如 Substance Painter、Maya、Blender）中，美术人员会将低模覆盖在高模之上，然后从低模表面的每个点发出一条射线，寻找它命中高模的位置，计算两者之间的法线差异，将这个差异记录到一张纹理图上。这张纹理图就是最终的法线贴图。整个过程可以理解成“用拓片技术把石碑上的浮雕转移到一张薄纸上”。

烘焙完成后，工作并未结束。美术人员需要将法线贴图应用到低模上，并在渲染器或游戏引擎中检查光照效果，反复调整参数，确保没有“接缝”或“扭曲”等伪影。接缝问题通常源于 UV 展开时切开的边界，而扭曲则源于 UV 缩放比例不一致。高通量的项目团队还会制定严格的管线规范，规定所有模型的 UV 密度、法线贴图分辨率、压缩格式等，保证跨部门协作时资产能够无缝衔接。

| 资产阶段 | 工具 | 产物 | 用途 |

|---------|------|------|------|

| 高模雕刻 | ZBrush / 3D Coat | 高模网格 | 提供细节来源 |

| UV 展开 | Maya / Blender | UV 布局 | 定义纹理映射关系 |

| 法线烘焙 | Substance Painter / xNormal | 法线贴图 | 记录高模细节 |

| 低模应用 | 游戏引擎 / RenderMan | 最终渲染结果 | 实时呈现凹凸效果 |

这场“雕刻与压印”的协作，让游戏角色既拥有了电影级的外观，又保持了流畅运行的体态。如同书法家精心书写的碑文，经过拓印后送达千家万户——高模的每一处精雕细琢，都通过法线贴图被低模完整复刻。

工程应用

把法线贴图应用到实际项目中，就像把一台精密仪器装进流水线，需要考虑的因素骤然增多。首先是性能与品质的权衡。普通漫反射贴图只需做一次纹理采样，而法线贴图除了采样本身，还引入了一次矩阵变换（从切线空间到世界空间）和一次归一化计算。在移动端，GPU 的 ALU 单元有限，法线贴图的引入可能让着色器指令数翻倍，从而触发性能瓶颈。技术美术通常会用 LOD（Level of Detail）策略动态缩减法线贴图生效距离来均衡负载。

其次，纹理压缩格式的选择直接影响法线贴图的精度。流行的压缩格式如 ASTC、BC7 能够保留较高的法线方向精度，而低端格式如 DXT1 则可能造成法线方向偏移。若压缩参数设置不当，贴图上会出现肉眼可见的“块状断层”或“条带”伪影。在 DirectX 世界有一种专门的 BC5 格式（双通道格式），它用两个通道存储 x、y 分量，而 z 分量在着色器中推导得出，相比传统的 BC3 格式（四通道），能有效减少法线方向的量化误差，是法线贴图首选的压缩格式。

此外，Mipmap 设置也是一个坑点。当物体远离相机时，采样区域变大，法线贴图的细节被平均化，会导致远处的表面出现闪烁噪点。解决办法是生成 Mipmap 链时对法线进行“重新归一化”处理，或者在采样时配合各向异性过滤。当然，业界也有更激进的方案，比如使用微表面法线分布模型来替代传统法线贴图，但那已是超越本文内容的另一场冒险了。

在工程实践中，法线贴图的“最佳实践清单”是每一位材质渲染工程师的必备手册：选择合适的压缩格式、开启正确的 Mipmap 过滤、在着色器中处理坐标约定的兼容性、在烘焙时保证 UV 岛间的低失真、以及在性能侧提供降级方案。把这些问题处理好，法线贴图才算真正从“玩具”变身为“生产力工具”。

技术对比选型

到了最终决策的时刻。法线贴图虽然强大，但并非万能的金钥匙。在 3D 渲染的武器库里，还有其他“骗术”各擅胜场。比如视差贴图（Parallax Mapping），它在法线贴图的基础上，进一步利用高度图进行像素级的视差偏移，让表面产生更明显的体积感——就像把壁纸换成了一面有厚度的浮雕板。不过它的开销更高，在掠射角时可能出现物体“穿透”的伪影，需要多层采样或使用浮雕贴图（Relief Mapping）等衍生技术。

另一条路线是置换贴图（Displacement Mapping），它从根上解决问题——真正移动几何顶点的位置，产生物理级别的凹凸。这条路径的效果无疑最逼真，但它要求模型具备极高的细分密度。在实时渲染领域，通常配合 Tessellation（曲面细分）技术使用，会显著加重 GPU 负担。而在离线渲染（电影特效）中，置换贴图则是标配。

这三者之间的关系可以被类比为“漫画书的三个版本”：法线贴图是黑白线稿，视差贴图是上色后的二维画面，而置换贴图则是立体书。成本依次递增，效果也依次逼近真实。在真实的项目选型中，决策者必须权衡目标平台、性能预算、视觉品质和开发周期四大因素。

| 维度 | 法线贴图 | 视差贴图 | 置换贴图 |

|------|---------|---------|---------|

| 性能开销 | 低 | 中 | 高 |

| 视觉保真 | 中 | 中高 | 极高 |

| 轮廓修正 | 无 | 部分 | 完整 |

| 适用平台 | 全平台 | 中高端 GPU | 高端 GPU / 离线 |

| 实现复杂度 | 低 | 中 | 高 |

选型不是寻找“最好的技术”，而是寻找“最合适的骗术”。当你面对一面需要凹凸的墙，最理想的方案可能不是最昂贵的浮雕板，而是那张恰到好处的魔法壁纸——它用最少的代价，让每一位经过的观众都信以为真。

AI 应用场景

场景一：AI 辅助 3D 内容生成的材质烘焙

阶段：内容生成与后处理

解决的问题：传统流程中，美术人员需要手工制作高模、展开 UV、烘焙法线贴图，耗时数天且高度依赖经验。AI 生成式技术可以基于单张图片或低模直接预测法线贴图，大幅降低普通开发者的 3D 内容生产门槛。

具体案例：近年兴起的 AI 3D 生成模型（如通过扩散模型生成 PBR 材质），输入一张照片或文本描述，模型输出包含法线贴图的完整 PBR 材质球。然而这类模型的输出往往包含坐标约定错误或贴图接缝问题，渲染工程师需要编写后处理脚本，将 AI 输出的法线贴图进行颜色空间转换与切线空间重映射，确保其符合目标引擎的渲染管线预期。

场景二：游戏引擎中的法线贴图压缩与优化

阶段：数据压缩与管线优化

解决的问题：将高质量法线贴图打包进手机游戏时，过大的贴图体积会让安装包膨胀数 GB。传统压缩算法会引入法线精度损失，导致画质劣化。AI 超分辨率技术可用低分辨率法线贴图推理出高精度法线细节。

具体案例：某大型 MOBA 手游项目，使用 AI 超分模型将 512×512 的法线贴图实时放大到 2048×2048，在移动端 GPU 上通过高效推理库运行，视觉质量与原生 2048 贴图相当，而内存占用降低了 75%。技术美术负责设计评估指标（如法线角度误差、渲染差异 MSE）来验证 AI 超分输出与手工制作贴图的等效性。

场景三：AI 雕塑辅助系统

阶段：训练数据生成与标注

解决的问题：为训练 AI 模型生成逼真法线贴图，需要大量高质量的高模/低模配对数据。传统人工建模成本极高，AI 系统可以用数学算法（如高度图合成、过程化噪声）自动生成大规模多样化的法线贴图训练集。

具体案例：某 3D 资产生成平台，用程序化方法生成 10 万张覆盖岩石、布料、生物皮肤等类别的法线贴图，结合物理渲染结果自动标注光照信息，用于训练“单图生成法线”的神经网络。算法工程师在此链路中负责设计合成引擎的参数空间，确保训练数据的分布覆盖真实世界的法线特征。

Python 演示

python47 行
import numpy as npfrom PIL import Image def height_map_to_normal_map(height_path, output_path="normal_map.png"):    """Convert a height map to a normal map using Sobel operator.     Args:        height_path: Path to input height map image (grayscale)        output_path: Path to save output normal map    """    # Load grayscale height map as float array    img = Image.open(height_path).convert("L")    height = np.array(img, dtype=np.float32) / 255.0    h, w = height.shape     # Sobel kernels for gradient computation    sobel_x = np.array([[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]], dtype=np.float32)    sobel_y = np.array([[1, 2, 1], [0, 0, 0], [-1, -2, -1]], dtype=np.float32)     # Pad edges to handle border pixels    padded = np.pad(height, 1, mode="edge")    gx = np.zeros((h, w), dtype=np.float32)    gy = np.zeros((h, w), dtype=np.float32)     # Convolve manually for clarity    for i in range(h):        for j in range(w):            patch = padded[i:i+3, j:j+3]            gx[i, j] = np.sum(patch * sobel_x)            gy[i, j] = np.sum(patch * sobel_y)     # Normal vector: (-gx, -gy, 1), then normalize    normal = np.dstack([-gx, -gy, np.ones((h, w), dtype=np.float32)])    norm = np.linalg.norm(normal, axis=2, keepdims=True)    normal /= np.clip(norm, 1e-8, None)     # Map from [-1, 1] to [0, 1] for RGB output    rgb = (normal + 1.0) / 2.0    rgb = (rgb * 255.0).astype(np.uint8)    # Note: OpenGL-style normal map (Y axis upward)    rgb_img = Image.fromarray(rgb, mode="RGB")    rgb_img.save(output_path)    print(f"Normal map saved to {output_path}")    print(f"Sample normal at (100, 100): {normal[100, 100]}") if __name__ == "__main__":    height_map_to_normal_map("height_map.png")
目的：这段代码接收一张灰度高度图，通过 Sobel 算子计算每个像素的梯度，生成世界空间中的法线向量，并编码为 RGB 法线贴图。这是法线贴图制作管线中最核心的算法环节。
  1. np.array(img, dtype=np.float32) / 255.0将图片像素值归一化到 [0,1] 浮点范围，便于后续计算。
  2. sobel_x = np.array([[-1,0,1],[-2,0,2],[-1,0,1]])Sobel 水平算子模板，用于估计 u 方向的梯度。
  3. np.pad(height, 1, mode="edge")边缘填充，避免边界像素无法计算梯度的问题。
  4. np.sum(patch * sobel_x)卷积操作：将 3×3 邻域与算子模板逐元素相乘后求和。
  5. np.dstack([-gx, -gy, np.ones(...)])构造法线向量：梯度取反后与 1 组合，符合“凹凸向上”的几何直觉。
  6. normal /= np.clip(norm, 1e-8, None)归一化并防止除零，确保法线长度为 1。
  7. rgb = (normal + 1.0) / 2.0将法线从 [-1,1] 映射到 [0,1] 区间，适配 RGB 编码。

常见误区

误区“法线贴图是给模型贴了一层凹凸不平的膜，所以模型表面真的变凸了。我放大模型时应该能看到凸起。”

正解法线贴图根本不改变几何形状。它只改变光照计算中使用的法线方向，从而在视觉上“伪造”出凹凸感。从侧面看模型，轮廓依然是平的。就像贴在墙上的壁纸，从图案上看是砖墙，但只要摸一摸或者侧着看，就知道它还是平的墙面。想真正改变轮廓，需要用置换贴图或曲面细分。

为何常见：人类的视觉系统高度依赖光影来感知立体形状。法线贴图造成的光影效果如此逼真，以至于人们很容易误以为几何形状真的发生了变化。

误区“法线贴图和凹凸贴图是同一个东西的两种叫法，反正都是让表面看起来凹凸不平。”

正解虽然目标相似，但两者的数据本质不同。传统凹凸贴图（Bump Map）本质是灰度高度图，只存储高度信息，通过有限差分推算法线；而法线贴图（Normal Map）直接存储方向信息（编码为 RGB），不需要实时差分运算。在游戏引擎中，Bump Map 管线的效果往往不如直接采样法线贴图准确。类比来说，凹凸贴图像是“等高线地图”，需要自己算坡度；法线贴图则是“方向指示牌”，已经标好了方向。

为何常见：两者在最终渲染效果上非常相似，且许多旧文档将 Bump Mapping 作为所有表面扰动技术的统称。加上软件菜单中的命名混乱，让两者的边界模糊不清。

误区“法线贴图是蓝色的，因为所有法线都指向天空。”

正解在切线空间中，法线确实大多数时候接近 (0,0,1)，对应蓝色。但这只是“默认状态”。实际的法线贴图中，每个像素的 RGB 值都可能偏离蓝色——例如凹陷处的法线会指向侧下方，表现为绿色或品红色分量增强。蓝紫色调说明大部分法线朝上，但真正让表面有细节的恰恰是那些偏离蓝色的部分，也就是 RGB 三通道的相对变化。用“壁纸上的纹理”来理解：蓝色是底色，花纹的精彩在于偏离底色的各种杂色。

为何常见：快速扫看法线贴图时，大面积的蓝紫色确实会给人留下“都是蓝的”的印象。初学者通常没有仔细观察过放大后的像素级颜色分布。

误区“为了细节更丰富，法线贴图一定要用 4096×4096 甚至更高的分辨率。”

正解法线贴图的分辨率应该匹配模型在屏幕上实际覆盖的像素面积。一个远处的小道具贴一张 4096 的贴图，纯属浪费显存。更重要的是，过高的分辨率会导致采样时产生摩尔纹和闪烁伪影。工程实践中，贴图分辨率与 LOD 距离挂钩，远处自动切换到低精度贴图是常见的优化策略。如同装修时巨大的壁画贴在远处，再多的细节也只是白白费漆。

为何常见：人们直觉上认为“细节丰富 = 质量高”。但在渲染管线中，过高的分辨率带来的采样噪声可能反而降低视觉质量，同时增加 GPU 带宽压力。

误区“法线贴图无非就是一张图，随便在哪个引擎里都能用。”

正解不同渲染管线的坐标系统不同，最典型的是 OpenGL（Y 轴向上）与 DirectX（Y 轴向下）的差异。使用错误约定的法线贴图，会导致光照方向的偏差，让凹凸效果“反转”——凸起变成了凹陷。这也是为什么 Substance Painter 导出法线贴图时会有 “OpenGL“ 和 ”DirectX” 两种选项。检查坐标约定的最直接方法是查看绿色通道的方向：OpenGL 法线贴图的绿色通道通常偏亮（表示朝上），而 DirectX 版则偏暗（表示朝下）。

为何常见：大部分图形 API 对开发者屏蔽了底层坐标转换细节，初学者很难觉察到坐标约定的存在。直到在某些场景下贴图效果异常，才发现是坐标约定不匹配导致的问题。

面试题

Q1. 法线贴图的核心作用是什么？

单选题 · easy

  • A.增加模型顶点数量，提高几何精度
  • B.通过修改光照计算中的法线方向模拟凹凸← 正确答案
  • C.直接改变模型表面的物理形状
  • D.替换模型的基础颜色纹理

答案：B。法线贴图不改变模型几何形状，而是在像素着色阶段用贴图中的法线向量替换几何法线参与光照计算，从而让平面产生凹凸光影错觉。它不需要增加任何顶点或三角形，因此性能代价远低于几何建模。

Q2. 在切线空间中，法线贴图中哪个分量通常接近 1？

单选题 · easy

  • A.红色分量
  • B.绿色分量
  • C.蓝色分量← 正确答案
  • D.透明通道

答案：C。切线空间中，法线垂直于表面朝外，因此 z 分量即蓝色通道通常接近 1，对应 RGB 编码中的蓝色几乎为 255。这也是法线贴图整体呈现蓝紫色的原因。红绿通道存储的是切线和副切线方向上的法线偏移量。

Q3. 高度图生成法线贴图时，Sobel 算子计算的是什么？

单选题 · mid

  • A.高度值的整体平均值
  • B.像素颜色的明暗对比度
  • C.高度函数的梯度即斜率← 正确答案
  • D.表面纹理的散射系数

答案：C。Sobel 算子是一种离散微分算子，卷积高度图后得到的是水平方向和垂直方向的梯度（偏导数），即表面在某点的“坡度”。有了两个方向的坡度，就可以构造几何法线向量，完成从高度图到法线贴图的转换。它统计的是高度变化率，而非平均值或对比度。

Q4. 法线从[-1,1]映射到RGB[0,255]时，若法线为（0,0,1），对应的RGB值是多少？

单选题 · mid

  • A.（128, 128, 255）← 正确答案
  • B.（0, 0, 255）
  • C.（255, 255, 255）
  • D.（128, 128, 128）

答案：A。按公式 color=(N+1)/2×255，x=(-1+1)/2×255=128，y=(-1+1)/2×255=128，z=(1+1)/2×255=255。因此法线(0,0,1)对应RGB(128,128,255)，即中等红绿配全蓝，这是标准切线空间法线的“默认色”。

Q5. Blinn-Phong 模型中“半角向量”是什么？

单选题 · mid

  • A.光线与表面法线的夹角一半
  • B.光线方向与视线方向归一化相加的结果← 正确答案
  • C.视线方向与法线方向垂直时的向量
  • D.反射光线方向与法线方向的夹角

答案：B。半角向量是光线方向 L 与视线方向 V 的中间方向，计算公式为 normalize(L+V)。它用于避免 Phong 模型中计算反射向量的开销，当半角向量与法线对齐时高光最亮。法线贴图扰动 N 后，(N·H) 的值会随之变化，产生细腻的高光细节。

Q6. 以下哪些属于法线贴图的工程应用注意事项？

多选题 · mid

  • A.选择合适的纹理压缩格式← 正确答案
  • B.处理 Mipmap 导致的闪烁伪影← 正确答案
  • C.确保坐标约定与渲染管线一致← 正确答案
  • D.强制所有模型使用 4096 分辨率

答案：ABC。压缩格式（如 BC5）影响法线精度；Mipmap 平均化会导致远处闪烁；坐标约定（OpenGL vs DirectX 的 Y 轴方向）不一致会让凹凸反转。而过高的分辨率并非必须，应根据实际屏幕覆盖面积选择，因此 D 错误。

Q7. 法线贴图与置换贴图最本质的区别是什么？

单选题 · mid

  • A.法线贴图适用于离线渲染
  • B.位移贴图真正改变几何形状← 正确答案
  • C.法线贴图消耗更多显存
  • D.置换贴图颜色更丰富

答案：B。法线贴图只修改光照计算的输入法线方向，模型轮廓不变；而置换贴图会实际移动顶点位置，产生真实的几何凹凸。因此置换贴图能修正轮廓剪影，但需要高密度网格配合，开销远高于法线贴图。

Q8. 为什么法线贴图在移动端需要考虑 LOD 策略？

单选题 · hard

  • A.移动端 GPU 无法采样纹理
  • B.法线贴图着色器指令数更多，性能开销更大← 正确答案
  • C.移动端不支持切线空间
  • D.法线贴图在移动端颜色会失真

答案：B。法线贴图着色器需要额外的纹理采样、矩阵变换（向量从切线空间转到世界空间）和归一化运算，ALU 指令数显著增加。移动端 GPU 的运算能力和带宽有限，因此需要通过 LOD 或距离远近来降低远处像素着色成本。

Q9. 下列关于切线空间（TBN）的说法正确的有哪些？

多选题 · hard

  • A.N 轴垂直于表面，T 轴沿纹理 U 方向← 正确答案
  • B.法线贴图中的数据独立于模型的旋转← 正确答案
  • C.TBN 矩阵用于切线空间与世界空间的转换← 正确答案
  • D.所有模型的切线空间坐标都相同

答案：ABC。切线空间由 T（纹理 U 方向）、B（纹理 V 方向）、N（法线方向）构成正交基。由于它附着于模型表面，法线贴图数据是“本地”的，模型旋转不会影响其效果。TBN 矩阵负责空间转换。不同模型使用不同的 TBN 坐标系，因此 D 错误。

Q10. 法线贴图在烘焙过程中出现接缝伪影的可能原因有哪些？

多选题 · hard

  • A.UV 岛边界处法线方向不连续← 正确答案
  • B.高模与低模的贴合不对齐← 正确答案
  • C.烘焙时采样射线从高模内部穿出← 正确答案
  • D.低模材质颜色设置过暗

答案：ABC。UV 岛的边界切线空间会因 UV 拆分而不连续，导致接缝处法线跳跃；高模低模不对齐会记录错误距离信息；采样射线可能因高模自交叉而穿透到内部。而模型材质颜色与烘焙几何无关，因此 D 错误。