WebGL 第 14 课：从向量到矩阵

引言

在 WebGL 的世界中，向量和矩阵扮演着至关重要的角色，使我们能够操控 3D 场景中的对象。从基本的坐标变换到复杂的着色运算，这些数学结构构成了 WebGL 的基础。在这第 14 课中，我们将深入探索向量和矩阵，从它们的本质到高级操作，为构建交互式 3D 场景奠定坚实的基础。

向量：数值的集合

向量本质上是一组有序排列的数字，称为分量。它们代表一个方向或点在空间中的位置。在 WebGL 中，向量通常由三个分量组成，表示 X、Y 和 Z 轴上的值。向量可以使用尖括号或方括号表示：

<1.0, 2.0, 3.0>
[1.0, 2.0, 3.0]

矩阵：向量之阵

矩阵是一种二维数组，由多个向量组成。它们用于表示一组线性变换，例如平移、旋转和缩放。矩阵通常用方括号表示：

[1.0, 0.0, 0.0]
[0.0, 1.0, 0.0]
[0.0, 0.0, 1.0]

这个矩阵表示一个单位矩阵，不执行任何变换。

向量运算

向量的基本运算包括加法、减法和标量乘法。这些运算按分量执行：

<1.0, 2.0, 3.0> + <4.0, 5.0, 6.0> = <5.0, 7.0, 9.0>
<1.0, 2.0, 3.0> - <4.0, 5.0, 6.0> = <-3.0, -3.0, -3.0>
2.0 * <1.0, 2.0, 3.0> = <2.0, 4.0, 6.0>

矩阵运算

矩阵运算主要涉及矩阵乘法和逆矩阵。矩阵乘法执行一系列线性变换，如下所示：

[1.0, 0.0, 0.0] [1.0, 2.0, 3.0] = [1.0, 2.0, 3.0]
[0.0, 1.0, 0.0] [4.0, 5.0, 6.0]   [4.0, 5.0, 6.0]
[0.0, 0.0, 1.0] [7.0, 8.0, 9.0]   [7.0, 8.0, 9.0]

逆矩阵表示矩阵的相反变换：

[1.0, 0.0, 0.0] ^ -1 = [1.0, 0.0, 0.0]
[0.0, 1.0, 0.0] ^ -1 = [0.0, 1.0, 0.0]
[0.0, 0.0, 1.0] ^ -1 = [0.0, 0.0, 1.0]

在 WebGL 中应用向量和矩阵

向量和矩阵在 WebGL 中无处不在。它们用于：

• 转换对象： 使用平移、旋转和缩放矩阵将对象移动、旋转或缩放。
• 应用变形： 使用法线矩阵和切线空间矩阵应用扭曲、弯曲和变形。
• 计算光照： 使用世界矩阵和视图矩阵计算光照方向和位置。
• 设置视口： 使用视口矩阵定义视口的大小和位置。

结论

WebGL 中的向量和矩阵是构建交互式 3D 场景的基础。通过理解这些数学结构及其操作，我们可以精确地控制对象在虚拟世界中的位置和变换。继续探索 WebGL 的向量和矩阵世界，掌握创建引人入胜和身临其境的三维体验所需的关键知识和技能。