求一个向量变换为另一个向量的矩阵_OpenGL里旋转等变换矩阵为什么是4x4的矩阵...

OpenGL ES 的很多教程里都会有这样一个例子来讲解纹理&＃xff1a;将一张图片作为纹理显示在屏幕上。

因为纹理坐标和实际屏幕显示的坐标不一样&＃xff0c;把图片渲染在屏幕上后&＃xff0c;图片是上下颠倒的。

一个解决方法是对当前的顶点坐标&＃xff0c;乘以绕 z 轴旋转180度的矩阵&＃xff0c;这样图片就能正确显示了。

那么如何理解这个旋转矩阵呢&＃xff1f;

影响我们理解这个矩阵的第一个问题是&＃xff1a;

为什么这个矩阵是 4x4 的&＃xff1f; 而且我们发现旋转&＃xff0c;缩放、平移等变换矩阵都是 4x4 的。

在直观上的认知里&＃xff0c;表达一个三维空间的坐标用 x,y,z 就足够了&＃xff0c;那在三维空间里进行矩阵变换&＃xff0c;用 3x3 的矩阵就够了&＃xff0c;为什么需要 4x4 呢&＃xff1f;

为了回答这个问题&＃xff0c;下面我们先在几何意义上理解**向量和矩阵之间的关系&＃xff0c;然后通过推导旋转矩阵**和平移矩阵&＃xff0c;一步步来解开这个疑惑。

向量和矩阵

在几何平面上&＃xff0c;我们可以把平面上任意一点&＃xff0c;当作与原点组成的一个 向量 来理解。

如图 &＃xff0c;A 点可以表示成向量    &＃xff1b;在 x 轴和 y 轴上各有 i 点(1&＃xff0c; 0)和  j 点(0&＃xff0c;1)&＃xff0c;同样的&＃xff0c;让它们与原点组成向量&＃xff0c;为了简化&＃xff0c;我们用    和 表示这两个向量。

因为 A 点的坐标为 (3, 2)&＃xff0c;如果我们要用    和  表示 &＃xff0c;那是这样的&＃xff1a;

这里的几何意义是 延展到  &＃xff0c; 延展到 &＃xff0c;然后把这两个向量相加即可得到

i  坐标是 (1&＃xff0c; 0)&＃xff0c;j 坐标是 (0&＃xff0c;1)&＃xff0c;我们把上面这个等式转换成竖列的形式&＃xff1a;

这里其实是向量的简单运算&＃xff0c;运算过程如下&＃xff1a;

看到运算过程是否有种似曾相识的感觉&＃xff1f;这不就是矩阵与向量的乘法计算吗&＃xff1f;这个运算其实就是将向量左乘一个矩阵 的计算&＃xff1a;

这里  其实就是单元矩阵&＃xff0c;左乘一个单元矩阵并不会改变原来的值。而这个单元矩阵以两个竖列来看&＃xff0c;正是 i 和 j 点的坐标&＃xff0c;也是向量    和   &＃xff0c;在数学上将    和    称为此坐标系的 基向量。

推导旋转矩阵

我们现在把整个坐标轴绕原点逆时针旋转   &＃xff1a;

旋转后  i 点和 j 点对应    和   位置。

通过简单的三角函数计算得到&＃xff1a; 坐标为 &＃xff0c; 坐标为

旋转后&＃xff0c;A 点的坐标是多少呢&＃xff1f;回顾上面的做法&＃xff0c; 延展到  &＃xff0c; 延展到 &＃xff0c;然后把这两个向量相加即可得到 。结合上面一节矩阵和向量的推演&＃xff0c;可以变成下面的形式&＃xff1a;

我们发现&＃xff0c;左边的矩阵不正是开头所看到的 旋转矩阵 吗&＃xff1f;只不过这是二维平面上的旋转矩阵:

结合图形和计算&＃xff0c;我们可以这样理解这个二维矩阵&＃xff1a;二维矩阵代表一个坐标系里的两个基向量&＃xff0c;而在这个坐标系里的点与原点组成的向量&＃xff0c;都可以用这两个基向量的变换来表示。那么旋转一个点&＃xff0c;可以转换成旋转这个点所在的坐标系&＃xff0c;从而通过变化的基向量求出旋转后的点的位置。

其实这种变换在数学上称作 线性变换 &＃xff0c;线性变换是通过 矩阵乘法 来实现

线性变换&＃xff1a;是在两个向量空间(包括由函数构成的抽象的向量空间)之间的一种保持向量加法和标量乘法的特殊映射

线性变换在几何直观上有如下特点&＃xff1a;

• 变换前后&＃xff0c;直线仍然保持是直线的状态

• 变换前后&＃xff0c;原点保持固定&＃xff0c;不会变化

我们从二维平面&＃xff0c;推导到三维坐标也是同理&＃xff0c;只不过是多了个 z 轴

竖着来看这个矩阵&＃xff0c;是 x&＃xff0c;y&＃xff0c;z轴上的三个基向量&＃xff0c;同时它又是一个单元矩阵。

同理上面二维平面的推导&＃xff0c;三维坐标绕 z 轴的旋转矩阵为&＃xff1a;

推导平移矩阵

那么平移操作&＃xff0c;能不能也用这种矩阵与向量相乘的形式呢&＃xff1f;我们再次回到二维平面&＃xff0c;看看将 A 点平移到 B 点的情况是怎样的。

要将 A 点(3&＃xff0c;2)平移到 B 点(4&＃xff0c;5)&＃xff0c;实际上就是先将 A 点往右移动 1 &＃xff0c;再往上移动 3&＃xff0c;即 x 坐标值增加 1&＃xff0c;y坐标值增加 3

从上面的运算来看&＃xff0c;平移这种操作实际上是 向量的加法&＃xff0c;即:

我们可以通过向量加法的 平行四边形法则 加深理解&＃xff0c;如下图&＃xff1a;

对于平移这种操作&＃xff0c;我们无法仅仅通过矩阵乘法来实现。

而实际上&＃xff0c;平移这种操作属于 仿射变换 。

仿射变换&＃xff0c;又称仿射映射&＃xff0c;是指在几何中&＃xff0c;对一个向量空间进行一次线性变换并接上一个平移&＃xff0c;变换为另一个向量空间。

仿射变换在几何直观上&＃xff0c;相比线性变换&＃xff0c;它不需要保证变换前后坐标原点不变。

如下图&＃xff0c;从 A 点平移到 B 点&＃xff0c;我们换一个角度思考&＃xff0c;这次不移动点&＃xff0c;而是移动整个坐标轴&＃xff0c;同样可以达到平移 A 点到 B 点的需求&＃xff0c;但是坐标原点移动到了 O&＃39; 点(1&＃xff0c;3)。

我们希望构造的是像下面这种矩阵乘法的等式&＃xff0c;这样才能用一个通用的计算模式来处理坐标点的变换。

到这里&＃xff0c;我们终于要请出 齐次坐标 了。

齐次坐标就是将一个原本是 n 维的向量用一个 n&＃43;1 维向量来表示&＃xff0c;是指一个用于投影几何里的坐标系统&＃xff0c;如同用于欧氏几何里的笛卡儿坐标一般。

用一个通俗的讲法是&＃xff0c;我们需要 升维 来处理这个问题。

通过增加一个维度&＃xff0c;我们可以在高维度上&＃xff0c;通过线性变换来处理低维度的仿射变换。

这句话咋一听感觉很有哲理&＃xff0c;但是通过下面的数学等式就能知道其中的奥妙&＃xff1a;

观察上面的运算过程&＃xff0c;结果 不正是我们上面所得的 吗&＃xff1f;只不过多了一个 z 轴的坐标值。

我们通过升级一个维度&＃xff0c;将在二维平面上的平移问题转换成了在三维坐标的矩阵和向量乘法。那么在二维平面上&＃xff0c;这个平移矩阵就为&＃xff1a;

tx 和 ty 就对应在 x 轴 和 y 轴上的移动距离。

同理推广到三维坐标系&＃xff0c;要实现三维坐标的平移操作&＃xff0c;同样需要通过升维&＃xff0c;引入齐次坐标来计算。那么三维坐标下的平移矩阵就为&＃xff1a;

总结

至此&＃xff0c;我们可以回答最开始的问题了&＃xff0c;为什么 OpenGL 里的矩阵变换是 4x4 的矩阵呢&＃xff1f;

我们来想象这样一个场景&＃xff1a;如果我要让顶点坐标旋转一定角度后&＃xff0c;再平移一段距离&＃xff0c;那么这里面的操作就涉及 3x3 矩阵的计算和 4x4 矩阵的计算&＃xff0c;如果不统一起来&＃xff0c;这种连续变换的计算操作将很复杂。

所以如果要用矩阵乘法来统一所有的平移、旋转等等变换计算&＃xff0c;为了照顾到平移这类仿射变换&＃xff0c;统一用 4x4 矩阵来计算既能满足场景又方便计算。