伪 3D 中的贴图纹理的透视矫正

导语

伪 3D 效果一般是在二维平面上对贴图纹理进行拉伸变形制造出透视效果，从而模拟 3D 的视觉效果。但通过 OpenGL 直接渲染不规则四边形时，不进行透视纹理矫正，就会出现纹理缝隙裂痕等问题。本文将分析透视矫正原理并给出解决方案。

问题概述

一般要实现近大远小的透视景深效果，都是通过透视投影的方式在 OpenGL 渲染得到的。如果在 OpenGL 中不开启透视投影，使用简单四边形面片来达到 3D 效果则需要对四边形面片进行旋转或者进行拉伸变形。但不经过透视投影矩阵的计算，得到的纹理渲染结果就会有缝隙裂痕的情况。

下面将分两种情况讨论如何使用透视矫正来解决缝隙裂痕的情况。

示例：

1. 常规情况：在三维空间渲染的面片，非正对观察点；

由于纹理映射基于的线性关系在屏幕空间上是错误的，从相机空间到屏幕空间，是通过线性关系转换的，但由于带有形变的平面的线性关系不能互相转换。

2. 非常规情况：纯二维渲染不规则四边形，通过不规则的效果制造透视景深效果。如下图所示，当出现没有正确处理透视问题时，所渲染的贴图会出现呈对角线的缝隙折痕（左图没有进行透视矫正的渲染结果，右图进行了透视矫正的渲染结果）；

空间坐标系

在讨论并解决上述问题时，我们需要先建立一个坐标系，基于该空间坐标系来讨论透视矫正问题：

以视点 E 为原点建立三维坐标系，近截面为投影面。

常规情况的透视纹理映射

透视纹理映射需要做的事情就是，将非线性转换为线型，并且让 GPU 自动完成光栅化过程，渲染出具有透视效果的贴图纹理。

1.  三维空间的透视原理

首先我们先举一个简单的例子来说明出现缝隙折痕的根本原因：

如下图所示（俯视角观察三维空间），屏幕空间上相等的空间步长 L 与 R，它们在三角形面上对应的步长会随着离摄像机的距离的增加而变长，即 L’> R’。因此对于处于 L 与 R 之间的那个像素点，虽然在投影面上其坐标处于 P1 与 P2 之间的 1/4 处，但是其在眼空间中的对应点并非处于 X1 与 X2 之间的 1/4 处，而顶点的属性信息却又都是在投影变换前的空间中指定的。

所以如果不对顶点坐标做任何处理，让 GPU 进行线性插值，会出现下述错误的结果：在渲染时贴图就会出现缝隙折痕的效果；

2. 非线性关系与线性关系的转化

从俯视角度观察三维坐标系，可以得到下图； 原点为视点（eye），np 和 fp 分别为近平面和远平面，N 和 F 分别为两个平面到原点距离；q，p 为三维面片模型上的两个点，p' 为屏幕空间上 p 的投影。

由于投影前后的坐标的相似关系，得以下式子：

由于 x，y，z 共面，得以下式子：

经过 (1) (2)，可得：

则我们通过这个式子推出了投影之后的 x’ 和原始 z 之间的关系 —— x’ 和 1/z 是线性关系，y’ 和 1/z 也是线形关系。所以，因为 x’ 、 y’ 和 1/z 是线形关系，因此我们可以在投影面上通过 x’ 和 y’ 对 1/z 进行线性插值。至此我们可以得到这样的透视纹理映射思路：在投影平面上通过 x’ 和 y’ 对 1/z 线性插值，计算出 1/z 后，通过上面的（1）式计算出原始的 x 和 y ，然后在3D空间中通过 x 和 y 计算出 s 和 t（x、y 和 s、t 都是在 3D 空间中的三角形上定义的，是线性关系）。这样就找到了投影面上一个点所对应的纹理坐标的正确值了。

通过上述计算可知，为了解决由于线性插值错误导致的透视错误问题，只要三维空间的模型带有必要的 z 轴参数就可以完成在屏幕空间的正确插值。

1. 将 u，v 参数转化为(u, v) -> (u/z, v/z, 1/z)，根据线性相关的原理，在视口空间中，将会被线性插值计算；

2. 在 fragment shader 中，获取对应的像素时，使用经过线性插值的坐标点，并且除以 1/z，来获取正确的 uv 坐标，((u/z)/(1/z), (v/z)/(1/z)) 

通常来说，现代的渲染器都自动完成了这样的步骤；但如果是一个纯二维信息的面片，不带有 z 轴信息，同时有带有复杂的形变呢？即开头所说的非常规形变情况，其渲染结果同样也会出现缝隙，那又需要怎么解决？

非常规情况 - 纯二维渲染不规则四边形

这里讨论的非常规情况是指在平面渲染非规则四边形，将四点渲染为两个三角形并进行纹理贴图，没有处理三角形邻边之间的纹理贴图关系，导致出现呈对角线的纹理贴图缝隙情况的问题。

理论上，这也是因为渲染绘制过程中出现线性插值错误的问题。解决方案与上述提到的常规情况的解决方案一致，但目前没有 z 轴信息，需要先通过已有的坐标信息来计算 z 轴信息，再进行后续的顶点坐标处理；

1. 原理

首先，我们假设在三维空间中存在一个四边形面片 S，在近截面投影形成了下图的不规则四边形 S’（实际情况是下图的不规则四边形 S' 在近截面投影得到相同的图形）；

四边形面片正对观察点（四点共面，并垂直于 z 轴）

从俯视角度观察三维坐标轴，可得到下图；

P1P2 为三维空间四边形的某一条对角线，L1L2 为屏幕空间四边形的对角线；F 为近平面距离视点平面的长度；z1 和 z2 分别为 P1 和 P2 距离视点平面的长度；P 为三维空间四边形对角线交点； 同时，屏幕空间中的四边形面片对角线交点，三维空间四边形对角线交点和视点，三点成一直线；

所以，可得到下述式子：

故，可以得到：

假设常数k，可以得出：

从上述式子，我们可以通过已知的四边形 S' 的对角线比例关系来计算四边形 S 的四个顶点坐标的 z 轴信息；

得到 z 轴信息后，可以使用上一小节推导得到的 1/z 的线性关系，进行纹理透视矫正的处理。

2. 计算方法

以下开始使用 q 来代替 1/z 进行计算，避免混淆三维向量中的 z；

由两个三角形组成的不规则四边形 S'：

最终 q 的值可以转化为对角线交点之间的比例关系；

由于计算对角线交点以及交点长度比较繁琐，所以可以通过面积快速计算交点比例关系； 获取面积关系后，再通过三角形高与底的关系，求得对角线之间的比例关系。

3. 对角线关系的便捷计算

向量 a，b，c

*后续的计算直接忽略常数 1/2；

求得面积之后，可以通过高 h1 和 h2 的比例关系求得对角线的比例关系。

代码实现

通过上文的证明，我们已经得到了纹理映射透视矫正的解决方案，下文将给出代码实现。

代码实现中，直接忽略了四边形和三角形面积计算时 1/2 的系数，也忽略了面积与高 h 的转换关系；

结语

通过上文的推导和计算，使用简单的四边形面片渲染伪 3D 的透视景深效果时，只要有 z 轴信息或者计算 z 轴的比例关系就可以在不开启透视投影的情况下，正确地使用透视矫正的方法来解决贴图纹理的透视映射问题。

如果上文有遗漏或错误的地方，还请指教，也欢迎大家多多交流讨论，谢谢。

参考文献

• https://en.wikipedia.org/wiki/Texture_mapping
• http://www.reedbeta.com/blog/quadrilateral-interpolation-part-1
• https://bitlush.com/blog/arbitrary-quadrilaterals-in-opengl-es-2-0
• https://blog.csdn.net/popy007/article/details/5556639
• https://blog.csdn.net/popy007/article/details/5570803

作者简介：zebiao，天天P图iOS工程师

文章后记 天天P图是由腾讯公司开发的业内领先的图像处理，相机美拍的APP。欢迎扫码或搜索关注我们的微信公众号：“天天P图攻城狮”，那上面将陆续公开分享我们的技术实践，期待一起交流学习！

加入我们 天天P图技术团队长期招聘： (1) 深度学习（图像处理）研发工程师（上海） 工作职责

• 开展图像/视频的深度学习相关领域研究和开发工作；
• 负责图像/视频深度学习算法方案的设计与实现；
• 支持社交平台部产品前沿深度学习相关研究。

工作要求

• 计算机等相关专业硕士及以上学历，计算机视觉等方向优先；
• 掌握主流计算机视觉和机器学习/深度学习等相关知识,有相关的研究经历或开发经验；
• 具有较强的编程能力,熟悉C/C++、python；
• 在人脸识别，背景分割，体态跟踪等技术方向上有研究经历者优先，熟悉主流和前沿的技术方案优先；
• 宽泛的技术视野，创造性思维，富有想象力；
• 思维活跃，能快速学习新知识，对技术研发富有激情。

(2) AND / iOS 开发工程师  (3) 图像处理算法工程师 期待对我们感兴趣或者有推荐的技术牛人加入我们（base 上海）！联系方式：ttpic_dev@qq.com