发帖
雷达卡
大家好，我是程序员贵哥。今天我们继续深入学习线性代数中的一个重要应用——“如何利用矩阵变换将三维图形投影到二维屏幕上”。
在之前的第八篇文章中，我们从二维直角坐标系出发，探讨了线性映射与变换矩阵的基本原理，并重点分析了图像处理中常见的拉伸、旋转等线性操作。第九篇则进一步引入了仿射空间的概念，介绍了3D空间中的平移、缩放和旋转变换所对应的矩阵形式。
而本篇内容将更加贴近实际应用场景，带你理解二维平面与三维空间之间的坐标转换机制，尤其是3D图形是如何最终呈现在我们二维屏幕上的。在整个过程中，矩阵运算起到了核心作用，特别是高维矩阵的连续变换。接下来我们就一步步揭开这一过程的数学本质。
[此处为图片1]三维空间中的坐标变换
我们知道，计算机显示设备本质上是二维的，但它却能呈现出逼真的三维视觉效果。那么，这些立体感十足的静态或动态场景究竟是如何实现的呢？关键就在于“三维到二维的投影技术”，而这背后离不开复杂的矩阵运算，尤其是大规模的4×4矩阵操作。
在三维图形处理中，通常使用4×4矩阵来进行空间变换，而不是直观的3×3矩阵。这是因为在四大基本几何操作中——平移、缩放、旋转和投影——只有平移无法通过3×3矩阵实现。为了统一所有变换的操作方式，系统便统一采用4×4矩阵来处理全部四种变换。
- 平移：无法由3×3矩阵完成，属于非线性变换；
- 缩放：可通过3×3矩阵实现；
- 旋转：同样可用3×3矩阵表示；
- 投影：需要扩展维度才能建模。
其中，平移之所以不能用3×3矩阵表达，是因为它不满足线性变换的基本性质：即 f(a + b) ≠ f(a) + f(b)。例如，原点经过平移后不再保持为原点，这就破坏了线性结构。因此，必须借助仿射空间的思想，通过引入齐次坐标来解决这个问题。
具体做法是将三维点 (x, y, z) 表示为四维齐次坐标 (x, y, z, 1)，这样就可以用矩阵乘法来统一描述包括平移在内的所有变换。这也正是为什么现代图形系统普遍采用4×4矩阵的原因。
四大关键变换详解
这四个变换构成了3D图形渲染的第一步——坐标系的逐级变换。比如，一个物体首先在其局部坐标系中定义，然后通过一系列矩阵运算被转换到世界坐标系，再进入摄像机视图，最后投影到屏幕。下面我们逐一介绍这四种变换的矩阵形式。
1. 平移变换
当我们沿着向量 v = (x, y, z) 对整个三维空间进行平移时，实际上是将每个点都加上该向量。在传统三维坐标下，这种操作无法写成矩阵乘法形式，但在齐次坐标体系中，可以通过以下4×4矩阵 T 实现：
[ \begin{bmatrix} 1 & 0 & 0 & x_0 \\ 0 & 1 & 0 & y_0 \\ 0 & 0 & 1 & z_0 \\ 0 & 0 & 0 & 1 \end{bmatrix} ]
值得注意的是，在计算机图形学中，通常采用行向量参与计算，也就是说，变换过程是“行向量 × 矩阵”，而非“矩阵 × 列向量”。例如，对点 (x, y, z) 先转换为齐次坐标 (x, y, z, 1)，再右乘变换矩阵 T，即可得到平移后的结果：
[ (x, y, z, 1) \times \begin{bmatrix} 1 & 0 & 0 & x_0 \\ 0 & 1 & 0 & y_0 \\ 0 & 0 & 1 & z_0 \\ 0 & 0 & 0 & 1 \end{bmatrix} = (x + x_0, y + y_0, z + z_0, 1) ]
最终结果仍是一个行向量，表示平移后的新位置。
2. 缩放变换
在前端开发中，我们经常需要调整图像尺寸以适应不同布局，比如将图片整体放大90%。在线性代数中，这相当于用0.9乘以单位矩阵。在二维空间中，缩放通常用2×2矩阵表示；在三维空间中则是3×3矩阵。但在齐次坐标系统中，为了与其他变换兼容，也需升维至4×4矩阵。
例如，在二维平面上将图像放大90%，其对应的变换矩阵为：
[ \begin{bmatrix} 0.9 & 0 & 0 \\ 0 & 0.9 & 0 \\ 0 & 0 & 1 \end{bmatrix} ]
而在三维空间中，若要实现相同的比例缩放，则使用如下4×4矩阵：
[ \begin{bmatrix} 0.9 & 0 & 0 & 0 \\ 0 & 0.9 & 0 & 0 \\ 0 & 0 & 0.9 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} ]
这样的设计使得缩放操作可以无缝集成到整体的变换流程中，与其他变换（如旋转和平移）组合使用。
[此处为图片2]在二维或三维空间中，缩放操作可以沿不同方向独立进行。例如，将一张二维图像从占据整页调整为仅占半页时，需要对坐标轴进行相应的缩放处理。在 y 方向上乘以 \( \frac{1}{2} \)，从而在页面上下各留下 \( \frac{1}{4} \) 的边距；而在 x 方向上则乘以 \( \frac{3}{4} \)，实现横向的适配。此时对应的缩放矩阵形式如下：
KaTeX parse error: Expected 'EOF', got '&' at position 48: … \\frac{3}{4} &?amp; 0 & 0 …
[此处为图片1]
当平移与缩放结合使用时，运算顺序会影响最终结果。若先执行平移再进行缩放，则变换表示为 vTS；反之，若先缩放后平移，则应写作 vST。需要注意的是，矩阵乘法不满足交换律，因此左乘与右乘会产生不同的效果，运算顺序必须严格按照变换流程来确定。
关于平移和缩放矩阵的具体形式，可参考第九篇中有关仿射空间的介绍，其中有更详细的推导与说明。
接下来讨论旋转操作。在二维和三维空间中，旋转由行列式为 +1 的正交矩阵 Q 实现。为了统一处理平移、缩放和旋转，通常采用齐次坐标系统，使得原本的 2×2 旋转矩阵扩展为 3×3 的形式 R，以便与其他仿射变换兼容。
二维平面绕原点旋转 \( \theta \) 角度的矩阵表达式如下：
KaTeX parse error: Expected 'EOF', got '&' at position 48: … \\cos \\theta &?amp; -\\sin \\t…
KaTeX parse error: Expected 'EOF', got '&' at position 49: … \\cos \\theta &?amp; -\\sin \\t…
然而，若旋转中心不是原点而是某一点（如 (4,5)），则不能直接应用该旋转矩阵。正确的做法是通过三步完成：
- 将点 (4,5) 平移到原点 (0,0)；
- 围绕原点旋转 \( \theta \) 角度；
- 再将坐标系平移回原位置 (4,5)。
整个复合变换过程可用如下数学公式表示：
KaTeX parse error: Expected 'EOF', got '&' at position 55: …rray}{lll} x &?amp; y & 1 …
[此处为图片2]
转向三维空间，旋转的本质发生了变化——它不再是围绕一个点，而是围绕某一固定轴进行“翻转”。从线性代数的角度看，这相当于沿着特征值 \( \lambda = 1 \) 对应的特征向量所定义的直线进行旋转。
下面我们分别列出绕 x、y、z 轴旋转的标准矩阵 R：
1. 绕 x 轴旋转：
KaTeX parse error: Expected 'EOF', got '&' at position 43: …ray}{cccc} 1 &?amp; 0 & 0 …
[此处为图片3]
2. 绕 y 轴旋转：
KaTeX parse error: Expected 'EOF', got '&' at position 55: … \\cos \\theta &?amp; 0 & \\…
[此处为图片4]
3. 绕 z 轴旋转：
KaTeX parse error: Expected 'EOF', got '&' at position 55: … \\cos \\theta &?amp; -\\sin \\t…
[此处为图片5]
观察这三个矩阵可以发现，它们之间的主要区别在于数值 1 所处的位置不同，且绕 y 轴旋转时，正弦项的符号出现了互换现象。
最后来看投影操作。为了让三维图形能够在二维屏幕上显示，我们需要将其投影到一个二维平面上。从数学角度来看，这就是将三维向量映射到某个二维平面的过程。
在线性代数中，大多数讨论的平面都经过原点，构成一个向量空间；但在实际应用中，投影平面往往并不穿过原点，这类平面属于仿射空间范畴。关于仿射空间的详细定义，可回顾第九篇的相关内容。
首先考虑投影平面通过原点的情形。设该平面的单位法向量为 n，则平面内任意向量 v 满足以下关系：
\( n^T v = 0 \)
此时，将向量投影到该平面的投影矩阵为：
\( I - n n^T \)
利用该矩阵进行投影验证可知：单位法向量 n 投影后变为零向量，而位于平面内的向量 v 在投影后保持不变，即：
\( (I - n n^T)n = n - n(n^T n) = 0 \)
在齐次坐标系下，我们来分析一个4×4的投影矩阵形式：
KaTeX parse error: Expected 'EOF', got '&' at position 35: …{array}{lll} &?amp; & &…
考虑一个不经过原点的平面，设 v 是该平面上的一点。若要将任意点 v 投影到此平面上，整个过程可分为三个步骤，类似于之前提到的围绕点 (4,5) 进行角度为 θ 的平面旋转操作：
- 先将点 v 平移至原点；
- 沿法向量 n 方向执行投影操作；
- 再将结果从原点平移回 v 的位置。
这一变换流程可用如下数学表达式表示：
KaTeX parse error: Expected 'EOF', got '&' at position 62: …array}{cc} I &?amp; 0 \\\\\\ …
[此处为图片1]计算机3D图形显示原理
在掌握一定的数学基础后，我们可以进一步理解三维物体如何被渲染并最终呈现在二维屏幕上。在3D图形系统中，从场景建模到屏幕成像，需经历一系列空间坐标变换，这些变换也被称为坐标系转换，目的是生成可在输出设备上显示的二维图像。
将一个三维对象成功显示出来通常包含以下三个关键阶段：
- 局部坐标到世界坐标：首先，将模型自身的局部坐标通过平移、旋转和缩放等变换映射到全局的世界坐标系中。
- 世界坐标到视图坐标：接着，使用视图矩阵（又称摄像机矩阵）将世界坐标系中的点转换为以观察者视角为中心的视图坐标系（或称相机坐标系）。
- 视图坐标到裁剪坐标：最后一步是应用投影矩阵，将视图坐标系下的点变换至裁剪坐标系（即投影空间），为后续的透视除法和屏幕映射做准备。
其中，从局部坐标系到世界坐标系的变换依赖于组合的变换矩阵，包括平移、旋转与缩放操作。而视图矩阵虽然推导较为复杂，但其作用在于建立观察者的视角位置与方向，本文未作深入展开。至于从视图空间到裁剪空间的映射，则由投影矩阵完成，它决定了最终画面的透视或正交效果。
[此处为图片2]延伸阅读推荐
对于希望深入学习计算机3D图形技术的读者，以下两本著作具有较高参考价值：
- TypeScript图形渲染实战：基于WebGL的3D架构与实现 —— 作者：步磊峰。本书不仅涵盖了3D图形处理所需的数学基础，更侧重于在WebGL框架下的实际开发与渲染实现，适合希望动手实践的开发者。
- Computer Graphics: Principles and Practice (3rd Edition) —— 作者：Hughes, Van Dam, McGuire, Skylar, Foley, Feiner, Akeley。这是一本经典权威的图形学教材，内容全面，理论体系完整，虽涉及部分实践案例，但整体偏向图形学原理与算法分析，适合追求理论深度的学习者。
本节总结
本节内容聚焦于三维空间中的几何变换机制。你需要重点掌握四种基本运算：平移、缩放、旋转与投影，以及它们对应的矩阵表达形式。这些构成了计算机3D图形处理的核心数学工具。
由于在3D图形管线中，物体从建模到屏幕显示必须经过多个层级的坐标变换，因此理解这些变换的本质，有助于你把握图形渲染的整体流程。未来在实际项目中，这种理解还可能帮助你优化渲染性能，提升图形系统的效率。
京公网安备 11010802022788号
