1. 纹理映射到底在解决什么问题很多人一听到“纹理映射”这四个字第一反应就是把一张图片贴到模型表面上去。确实这是最直观的理解但如果你只停留在这一层那后面遇到法线贴图、阴影贴图这些概念时就会觉得它们和“纹理”没什么关系甚至会以为它们是完全独立的技术。实际上它们全都建立在同一个核心思想上把数据存在一张二维图上然后在渲染时按坐标取出来用。这张“图”不一定非要是颜色。它可以存颜色漫反射贴图可以存高度凹凸贴图可以存法线方向法线贴图可以存光照可见性阴影贴图甚至能存自发光强度、金属度、粗糙度这些都是纹理映射的延伸。所以我的理解是纹理映射不是某个单一功能而是一套“数据编码与采样”的通用框架。为什么图形学最终选了“二维图像”作为载体想想看模型表面本质上是一个二维流形无论它是球体、人脸还是地形在局部看都是平面。用UV坐标把模型表面展开成一张二维图就把“表面上的点”和“图像上的像素”建立了一一对应的关系。这是极其自然的做法因为它把任意复杂的几何表面问题转化成了图像处理问题。图像的存储、压缩、采样、滤波这些几十年来积累的成熟成果都可以直接复用。对做渲染的人来说理解这一层特别重要。因为这意味着你解决问题的思路可以扩展只要能在图上编码信息并且能在着色器里解码那么纹理映射就能干很多和“颜色”完全无关的事情。法线贴图、凹凸贴图、阴影贴图全都是吃透了这个思想之后在不同方向上的延伸。2. 从最简单的颜色贴图说起既然要聊高级用法先把地基夯实。颜色贴图漫反射贴图是纹理映射最基础的应用但恰恰是基础的东西里面藏着很多会影响后续所有纹理应用的坑。2.1 UV坐标与纹素采样每个模型顶点都会带一组UV坐标范围通常是[0,1]。UV坐标决定了这个顶点在纹理图上的对应位置。三角形内部的像素点它的UV坐标由三个顶点的UV做重心插值得到。这是一个关键机制你只需要在顶点上存UV三角形内部所有像素的UV都能算出来。采样是另一个核心环节。GPU里的纹理采样器根据UV坐标去读取纹素texel纹理图像上的像素但浮点坐标和整数像素之间需要映射规则。这里有个常见的误解UV坐标(0,0)到底对应纹理左上角还是左下角不同图形API约定不同DirectX里(0,0)在左上角OpenGL里(0,0)在左下角。我在做引擎移植时经常看到美术同学抱怨贴图上下颠倒十有八九就是这个约定搞混了。采样时还有一个绕不开的问题当UV坐标超出[0,1]范围时怎么办。这个通过寻址模式控制有Repeat重复、Clamp钳制、Mirror镜像三种常见模式。Repeat模式适合瓷砖地面这类需要平铺的纹理Clamp模式适合UI或需要拉伸到边缘的场景。选错了接缝处就会出现明显的硬边。2.2 Mipmap与纹理过滤这是纹理映射里最容易被忽略但影响最大的部分。当一个纹理被缩小时如果直接采样会产生严重的锯齿闪烁远处的路面会像信号不好一样哗哗闪。Mipmap的做法是预生成一系列逐级缩小一半的纹理从原始的1024x1024到1x1。采样时根据像素在屏幕上的覆盖率选择合适的层级或者在三线性过滤下对相邻两层做混合。各向异性过滤更进一步它处理的是“斜面”情况。当纹理表面与视线方向夹角很小时屏幕上的一个像素实际上覆盖了纹理上非常狭长的一块区域。三线性过滤在这种场景下仍会糊成一片而各向异性过滤会沿着纹理的延伸方向多做几次采样来改善清晰度。实测下来各向异性过滤开到4x到8x地面和墙面的清晰度差异非常明显性能开销却完全可控。做渲染的人有个共识纹理过滤没有选择余地必须用好。因为法线贴图和阴影贴图同样依赖纹理采样过滤做得不好后续所有效果都会出问题。比如法线贴图如果没有正确的Mipmap远处的法线方向会因为锯齿而剧烈抖动表现为高光点随机闪烁。3. 凹凸贴图原理用假几何骗过眼睛凹凸贴图Bump Mapping的历史比法线贴图更早思想也更直观而且它和法线贴图的原理深度关联搞懂一个另一个就顺了。3.1 高度图与表面扰动凹凸贴图的核心假设是我们不想真的改变模型几何只想让表面看起来有凹凸感。做法是准备一张高度图Height Map每个纹素存一个灰度值代表这个位置相对基准表面在法线方向上的“偏移高度”。渲染时对每个像素的UV坐标求高度值再在UV方向分别求偏导就能得到表面在该点的“坡度”。看这里的关键点来了光照模型需要法线方向来计算亮度。如果表面是真的凸起的法线应该随几何形状变化。但我们现在只有高度不改变几何那就用偏导数去估计法线方向。实际计算中把高度图在u和v方向上分别做差分得到一个近似的切线方向再通过这些切线叉乘出法线。这个过程等效于h(u, v) 对u求偏导 dh/du对v求偏导 dh/dv 切线之一 ≈ (1, 0, dh/du) 切线之二 ≈ (0, 1, dh/dv) 法线 ≈ normalize(cross(切线之一, 切线之二))用这个扰动后的法线替代原先的法线去计算光照表面就有了凹凸的明暗变化。这是一种非常聪明的手法因为人眼对光照明暗非常敏感但对几何轮廓并不总是敏感——物体在静止时我们看到的大部分“凹凸”信息其实是光影信息凹凸贴图正好利用了这一点。3.2 凹凸贴图的局限与法线贴图的升级凹凸贴图的优势是简单、省内存一张灰度图就够了。但它有明显的局限高度图只有一维信息高度所以它只能表达连续缓和的凹凸变化很难表达尖锐的细节而且在极端角度看贴图是“平的”这一事实会被看穿因为轮廓边缘没有凹凸。法线贴图Normal Mapping直接存三个方向分量RGB每个纹素直接给出该点的法线方向。它不需要在渲染时去求偏导采样出来就是完整的三维向量精度和表达能力比凹凸贴图高很多。美术同学可以雕刻一个高模把高模的法线方向“烘焙”到低模的法线贴图上在游戏里用低模运行却得到接近高模的光照细节。这里有个概念需要区分清楚法线贴图里的法线是存的世界空间还是切线空间世界空间法线贴图直接存世界坐标的法线简单直接但问题是模型动不了一旋转贴图就废了。切线空间法线贴图存的是相对模型表面“基准法线”的偏移适用范围广所以实际工程中绝大多数法线贴图都是切线空间的。它的代价是渲染时需要构造切线空间变换矩阵多一步计算。4. 法线贴图的切线空间与TBN矩阵既然说到了切线空间这是法线贴图实操中最大的坎儿值得展开细讲。4.1 TBN矩阵是怎么构造的切线空间的三轴是TTangent切线、BBitangent副切线、NNormal法线。T沿UV的u方向B沿v方向N垂直于表面。有了这三个轴就能把法线贴图里采到的切线空间法线转换到世界空间或者反过来。TBN矩阵的构造依赖顶点的切线数据。建模软件导出模型时通常会把切线算好计算原理是假设三角形的两条边与UV增量存在线性关系P1 - P0 ΔU1 * T ΔV1 * B P2 - P0 ΔU2 * T ΔV2 * B这是一个二元线性方程组解出T和B向量再通过N cross(T, B)得到法线。工程实现上通常还需要按顶点法线做正交化和Gram-Schmidt处理让TBN三个轴尽量保持正交且单位长度否则光照角度会出现偏差。实操中很常见的一个坑是美术制作的模型有时候缺少切线数据或者软件间切线手性不一致。DirectX和OpenGL的坐标系差异会导致切线空间的手性翻转表现为法线贴图看起来“反了”某些角度下高光位置完全偏移。排查方法很简单输出切线向量可视化看一下或者把法线贴图的绿色通道翻转因为没有标准约定部分引擎用OpenGL风格部分用DirectX风格绿通道即v方向的含义有区别。4.2 Micronormal与法线混合问题法线贴图虽然“升级”了但它和凹凸贴图并非替代关系而是可以叠加的。一张地形纹理可以用凹凸贴图表达宏观起伏再用细节法线贴图Detail Normal Map增加微观细节。叠合的常见做法是把两张法线贴图采样后做向量混合再归一化但需要注意普通的线性混合会导致法线方向缩短结果偏斜不准确。业界常用的一种处理是“部分推导式混合”finalN normalize(vec3(n1.xy n2.xy, n1.z * n2.z))这个公式会让法线细节保持得更自然高光表现更干净。实际项目里叠加两层法线贴图是调地表质感的常见手段第一层控制大体地貌第二层增加碎石、苔藓等细微起伏效果立竿见影。法线贴图的压缩格式也值得留意。很多引擎对法线贴图用RG压缩或者BC5格式精度损失会体现在间接高光和光滑表面上。法线方向对精度极其敏感在金属、水这类高光集中的材质上压缩导致的法线偏移会被高光放大得非常明显往往会在物体边缘出现不自然的亮边。5. 阴影贴图原理深度值也是纹理阴影贴图Shadow Mapping思路和前面完全不同本质上是“从光源视角渲染一张深度图”。这张深度图存的是距离光源最近的表面深度。到了主相机渲染时把世界空间中的像素点重新投影到光源视角对比投影深度和深度图里存的深度如果投影深度更深说明这个点被遮挡了处于阴影中否则在光下。5.1 深度比较与硬件限制这里有个物理学上的误导像素点的“投影深度”和“深度图记录值”理论上应该相等因为它们是同一个点。但实际中因为深度图分辨率有限、计算精度有限两者总是存在数值偏差。这个偏差导致了一个经典问题——阴影毛刺Shadow Acne本不该有阴影的表面出现密密麻麻的条纹状噪点。解决办法几乎人人都会说一个深度偏移Depth Bias。偏移加得多毛刺消失但阴影和物体之间会产生脱离感出现一种叫“Peter Panning”的现象物体像飘在空中。所以偏移量是个精度平衡的艺术我在项目里通常配合斜率缩放偏移一起用让偏移量随着表面与光源方向的夹角增大而增大这样既避免斜面上的毛刺又不会过度脱离。阴影贴图的另一个痛点是分辨率不均。离光源近的物体投影面积大深图分辨率不够导致边缘锯齿严重。经典方案是级联阴影贴图CSM把视锥体分成多个近远层级每层单独渲染一张阴影贴图近处用高分辨率远处用低分辨率。这个方案虽然会带来多一次的深度渲染开销但几乎是大型场景的唯一可靠选择。5.2 软阴影与PCF滤波深度贴图存的是一张硬性判断的01信息所以原始阴影贴图产生的是边缘生硬的阴影。真实世界的阴影有半影区域越远离物体边缘越模糊。想要高质量软阴影工程上常用百分比渐近过滤Percentage Closer FilteringPCF。PCF的思路不复杂在阴影比较时不是只采样深度图的一个点而是采样周围一圈比如3x3或5x5每个采样点都做一次深度比较然后对结果求平均。平均值就代表“被遮挡的程度”数值介于0到1之间阴影边缘自然过渡。这个方案的开销与采样次数成正比大范围的PCF在移动端很可能成为性能杀手。踩过的一个实际坑是PCF的采样范围是固定于屏幕像素还是固定于光源纹理如果用错误的坐标空间阴影在远近距离变化时模糊度会不稳定。正确做法是让采样偏移量基于光源纹理像素大小并在计算时处理深度值的非线性问题。阴影贴图的深度通常存储在透视投影的非线性空间做PCF时直接比较非线性值会有偏差高精度做法是先还原到线性深度再比较。6. 三类纹理应用的综合对比与联合使用把法线贴图、凹凸贴图和阴影贴图放在一起看它们其实是纹理映射在不同信息维度上的表达应用类型存储数据核心原理主要作用典型代价凹凸贴图灰度高度偏导扰动法线低成本凹凸感细节有限、边缘穿帮法线贴图RGB法线方向切线空间法线替换高细节光照表现切线计算、压缩精度阴影贴图深度值光源视角深度比较阴影生成分辨率与精度平衡这三者在同一场景中常常同时出现。地面用凹凸贴图表达大尺度地形起伏墙体用细节法线贴图增加砖缝质感角色和场景的阴影则用阴影贴图统一生成。互不冲突因为它们在管线中的挂载阶段不同凹凸和法线贴图作用于光照模型输入阴影贴图作用于光照可见性判断。但联合使用时有一个优先级问题法线贴图影响的像素级别细节必须在光照计算之前完成法线的重定向阴影贴图的深度比较则在光照计算时进行。如果先做了阴影判断又修改法线阴影边缘不会跟随法线细节变化这在某些静态场景里看不出问题但在法线细节丰富的材质上阴影边缘与表面纹理错位会显得很违和。处理办法是让阴影计算使用几何法线几何表面实际朝向这样阴影形状与几何轮廓一致而法线贴图只影响光照明暗变化。这符合大多数引擎的处理方式。另外一个联合使用的注意点是纹理坐标的一致性问题。法线贴图和颜色贴图应该共用同一套UV才能保证细节对齐。大多数情况下美术导出模型时已经处理好但程序化生成的地形或动态合批的模型容易出现UV错位。排查这类问题最快的方式是输出一张UV可视化图把红色和绿色通道分别映射到u和v坐标上看各个纹理的UV是否完全重叠。7. 实操参数与流程参考说了这么多原理给一份我在真实项目中用过的参数和流程参考便于直接上手复现。7.1 法线贴图流程参数法线贴图烘焙使用高模与低模对齐设置一个cage包裹模型来控制烘焙范围避免高模法线溢出到低模错误区域。cage与低模的距离建议控制在低模自身尺寸的5%到10%太近细节丢失太远则低模背面也被烤入。细节法线贴图叠加时强度建议控制在0.3到0.8之间通过法线混合强度系数调整。强度过高会导致表面出现水波纹状的噪点尤其是高光反射的材质上。金属材质的法线强度通常比非金属低很多因为金属表面的镜面反射会把法线误差放大。7.2 阴影贴图关键参数速查阴影贴图分辨率的设置没有固定标准一个参考基准是阴影贴图分辨率不低于目标屏幕区域面积的4倍。例如阴影覆盖1280x720屏幕区域阴影贴图至少用2048x2048。CSM常用四层每层分辨率根据视锥距离分配近处占比最大。深度偏移的调参参考初始值设为0.005归一化线性深度下斜率缩放偏移设为2到4。每调整一次偏移注意观察两个问题阴影毛刺是否消失、阴影与物体根部是否脱离。两者同时观察找到一个兼顾的区间。PCF的采样半径初始值设为1.0个纹素按屏幕空间效果逐步增加。7.3 常见问题排查清单症状可能原因排查手段阴影出现条纹状噪点深度偏移过小增大偏移量同时检查斜率缩放阴影与物体脱离深度偏移过大减小偏移改用斜率缩放偏移法线贴图高光位置不对切线手性错误翻转绿色通道或修复顶点切线法线贴图表面剧烈闪烁Mipmap缺失或过滤方式错误开启三线性过滤确保Mipmap生成远处阴影边缘严重锯齿CSM层级分配不均调整各级分辨率和分界距离法线贴图在压缩后明显失真压缩格式精度不足改用BC5或RG格式保留法线分量凹凸贴图边缘出现硬边寻址模式错误检查Clamp/Repeat设置排除UV接缝排查法线类问题有一个通用技巧先在调试视图里把法线方向可视化出来看看每个像素的法线是否平滑连续。如果法线方向图看起来是对的问题基本在光照计算环节如果法线方向图本身就是花的那问题在贴图烘焙、采样或切线数据上。8. 一个完整的实际案例参考去年我做过一个模拟项目X的室内场景渲染模块里面把三类贴图都用上了过程中踩了一些值得记录的坑分享一下。8.1 地表材质整体方案地面用了一张大尺寸的漫反射贴图打底花纹是地砖样式。初始方案只用了漫反射和粗糙度贴图渲染出来地面毫无细节近看完全是平的。后来补了一张颜色合适的法线贴图地面砖缝有了起伏感但砖面还是太平滑。接着在上面叠加了一层细节法线贴图模拟细微的砂砾感叠加强度调到0.45左右效果一下真实了很多。这个过程中发现砖缝处有轻微的高光闪烁排查后发现是细节法线贴图的Mipmap没有正确生成远处采样时相邻像素法线方向抖动导致高光随机跳跃。8.2 阴影部分调优过程室内有多个光源初始给主光源用了阴影贴图2048分辨率次光源直接不开阴影结果整体层次感很差。后来把主光源改成CSM三层近处第一层分辨率2048覆盖视锥前段第二层1024覆盖中段第三层512覆盖远处。地面与墙壁交界处的阴影毛刺是第一个遇到的问题初始偏移0.003太小阴影在墙根处出现细条纹试着调大偏移到0.008条纹消失了但出现了Peter Panning现象物体边缘和阴影之间有一圈白边。最后搭配斜率缩放偏移4并保留偏移0.003作为基础值问题才彻底解决。PCF半径方面初始设了3个纹素阴影边缘很柔和但性能开销明显增大。后来发现室内场景光源方向单一其实1.5个纹素的PCF半径已经足够半影不会太宽而且因为阴影贴图的分辨率较高边缘质量依然可以接受。把半径调小后帧率提升了约8%肉眼几乎看不出画质变化。8.3 踩坑记录最耗时间的一个问题出现在法线贴图的坐标空间上。项目里模型是从某个离线工具导出的导出时切线数据用了OpenGL风格的右手系但渲染后端是DirectX风格把同一套数据直接丢进去渲染法线贴图的所有细节都反向了。排查过程花了大半天最初以为是贴图颜色空间问题后来用调试视图分别输出世界法线和切线向量才定位到手性问题。最后在模型导入阶段做了一个翻转操作把切线向量的Y分量取反问题一次性解决。这个坑说明一个道理纹理相关的bug很多时候不是“贴图本身”的问题而是数据约定和转换的问题。UV空间的手性、坐标系的差异、纹素存储顺序这些隐藏约定必须在引擎里统一处理好否则出了问题会非常难排查。9. 最后的实操心得我个人在这几个项目的实际运作中有一个深刻的体会学习这些技术最关键的不是背公式而是理解“每张贴图到底在替几何承担什么责任”。法线贴图承担的是几何细节的光照表现凹凸贴图承担的是低成本起伏感阴影贴图承担的是光照可见性的预计算。它们都以二维纹理作为数据的载体但解决的问题方向截然不同。如果刚入门我的建议是先手动实现一遍最简单的凹凸贴图渲染器和最朴素的阴影贴图渲染器不要用现成引擎的封装接口。全程控制每一个采样和矩阵运算比用引擎调一百次参数都管用。做完之后再去看引擎的实现你会突然看懂那些接口参数到底在调什么也才能在真正出问题时定位到点子上。纹理映射的应用远不止这三种。环境贴图、视差贴图、光照贴图本质上都在这条思路上延伸。把这一套“用纹理编码信息、在着色时解码使用”的思路理顺后面接触任何新的纹理技术都会快得多。