【TA进阶】三平面映射：纹理拉伸的解决之道
版权声明
本文为“优梦创客”原创文章，您可以自由转载，但必须加入完整的版权声明
文章内容，不得删减、修改、演绎
相关学习资源见文末
各位同学大家好！我是雷蒙德，有十四年游戏开发经验，参与过多款上线项目的游戏引擎开发和架构设计。
今天要给大家分享的是 “三平面映射”技术。
那么什么是”三平面映射”技术呢？
大家看到的画面上右上角的这个地形渲染效果，也许你认为它是简单的在地形的网格模型上贴上一张地表纹理贴图实现的，但实际并不是这样！
大家知道，在一款室外场的游戏当中，地形是一个必不可少的元素，但是要渲染出正确的地形效果并不容易，因为它会涉及到高低起伏、远近层次、悬崖峭壁等因素，同时还要考虑到大地形的渲染性能开销。
这通常很难用简单的纹理贴图去表现。
这时我们就需要使用“程序化的方式”去渲染游戏当中的地形效果，也就是要写Shader来处理地形！
就比如大家画面上右上角的这个最基本的地形，它也是通过从地形上方投影到地形表面上渲染出来的，我们可以称之为“单平面映射”。
这对于起伏的山丘，这看起来很好，但是在陡峭的悬崖上，单一的投影方向看起来很糟糕，我们称之为“纹理拉伸”。
因此，我们需要用今天我要给大家分享的“三平面映射技术”，来实现屏幕右下角的地形渲染效果！
当然，三平面渲染用途很广泛，下面我们来看一看今天的议题：
首先，我会带着大家综合性的了解三平面映射的应用场景
接着，我们从一个最简单的球体渲染出发学习“三平面映射”的原理
最后，我会带着大家从技术的角度，学习三平面映射在Unity当中的技术实现、坑点以及进阶点
为什么要采用三平面映射
单平面映射
地形是一个受欢迎的用例，因为它通常具有难以纹理化的几何图形。
基本地形通常从上方有一个单独的UV投影。我们可以称之为“单平面”投影的UV。
对于起伏的山丘，这看起来很好，但是在陡峭的悬崖上，单一的投影方向看起来很糟糕。
在上述地形上，从单个UV投影延伸到近垂直悬崖上的纹理非常明显。
纹理拉伸
以地形为例，地形的UV坐标在网格中展开时，在X-Y平面上是均匀分布的，但我们的地面是高低起伏的，因此UV坐标和地面起伏不匹配，就产生了“纹理拉伸”
手工展UV
我们可以让负责建模的美术同学将UV坐标“小心的”展开到跟地形高低起伏匹配
但是，这将浪费大量的美术人力，并且不适用于以下情形：
顶点是流动的
贴图的UV坐标是流动的
地形是程序化生成的
此时，手工调整不能适应实时渲染要求，就需要我们通过实时渲染去解决问题！
解决之道
具体的做法是采用“三平面映射”——从三个方向去采样同一张贴图
它得到的效果是这样的：
三平面映射的应用
当然，三平面映射不仅可以用于普通网格地形，还适用于以下情形：
1、瀑布：
对于瀑布，如果采用单平面映射，那么瀑布将只在黄色“或者”红色箭头方向获得正确的纹理映射，而无法在两个方向同时获得正确的纹理映射
并且，由于瀑布的顶点是随着水流流动而变化的，所以也只能采用三平面映射来采样瀑布的噪点和法线图
2、程序化建模的地形
如图所示，程序化建模的地形，由于地形的起伏是动态的，因此无法人工调整UV坐标，也需要三平面映射
3、水池的焦散效果
水池焦散如果只对池底部分单平面采样，遇到的问题跟前面瀑布是一样的！
技术要领
😀友情提醒：文字版本可能无法表达全部思考过程，如有不明白之处，请移步文末观看视频版本
要实现“基本的三平面映射”，需要5个步骤：
Step 1：根据顶点的世界空间坐标计算对应的UV坐标
Step 2：从x/y/z三个方向对漫反射贴图进行采样
Step 3：调整三平面边界过渡的锐利度
Step 4：将混合权重值单位化
Step 5：按三个面的混合权重，将采样颜色混合在一起
Step 1：根据顶点的世界空间坐标计算对应的UV坐标
对于每个片元，先取其在三个方向的uv坐标
为了增加更多控制，我们要考虑纹理的缩放系数_TextureScale
Step 2：从x/y/z三个方向对漫反射贴图进行采样
Step 3：调整三平面边界过渡的锐利度
用法线方向作为从三个方向采样的权重值
法线可以为负，但权重值不能为负，因此需要先通过abs取绝对值
由于法线是连续过渡的，因此权重值在三个平面的边界上也是平滑过渡的，这样可以带来一个额外的好处：它解决了纹理接缝问题
Step 4：将混合权重值单位化
第三步使用pow来锐化三平面边界后，可能使计算后的法线值偏小，因此需要重新单位化
Step 5：根据混合系数，把三个面的采样颜色混合在一起
通过颜色混合，得到最终效果
以上效果也可以使用UE或ASE完成
三平面映射进阶
进阶1：三平面映射的物体如何表现细节？
大家看现在画面里的这个物体，它是采用了三平面映射技术渲染的一个包含了丰富物体表面细节的球体
这主要体现在两方面：
通过漫反射贴图，体现了物体的颜色细节
通过法线贴图，体现了物体的凹凸信息
我们为漫反射贴图应用了三平面映射，以解决纹理拉伸的问题，那么问题来了：
既然漫反射贴图需要用三平面映射来消除纹理拉伸，那么法线贴图是不是也要来这么一波？
答案是肯定的！
那么我们应该如何为法线贴图应用三平面映射呢？受到惯性思维的影响大家可能会想到这个方法1：
方法1是：跟漫反射贴图一样进行“三平面映射”
但是这样得到的效果是错误的（如左图所示）：
大家注意我的法线贴图，它要表现的物体表面细节是每个小圆点都是凸起的，结果渲染出来，有一部分小圆点是凹陷进去的
所以，我们不能简单的“惯性思维”
大家再看下面：
这里的右图才是正确渲染的球体，它的每一个小圆点都是凸起的！具体的实现过程，我会在我们的
里教给大家
所以，你还认为刚看到的效果是正确的吗？
进阶2：性能进阶
参考
更多学习资源请加 qq：1517069595 或 vx：alice17173 获取
点赞、关注、分享可免费获得配套学习资源
完整视频请点击下方链接观看
【TA进阶】三平面映射：纹理拉伸的解决之道
