前端进阶WebGL中数学知识——矩阵

Mingo233
1,021 阅读8分钟

概述

近来一直在学习web3D方面的内容,其中就涉及到很多图形学的知识和数学方面的知识和专有名词,例如转置 矩阵、逆矩阵、向量、点乘运算、叉乘运算等等,如果没有这方面的数学知识作为前置背景的话,学习3d方法的内容将是举步维艰.因此我将整理这些基础的数学知识点(之后也会整理图形学基础知识).

介绍内容将分为2个维度,一这个数学概念是什么,怎么用。二这个知识在3D场景下的实际意思。

本文将讲述矩阵的内容.

什么是矩阵

矩阵是线性代数中一个非常重要的概念，它在数学、物理学、计算机科学和工程等领域都有广泛的应用。

意义：

  1. 表示线性关系：矩阵可以用来表示线性方程组和线性变换。线性方程组的解可以通过矩阵运算来求解，而线性变换可以通过矩阵乘法来表示。
  2. 数据存储与处理：矩阵可以用来存储和处理数据。在计算机科学和数据分析中，矩阵被广泛用于表示和操作数据集合，例如图像处理、机器学习和人工智能等领域。
  3. 向量空间和坐标系：矩阵可以用来描述向量空间中的向量和坐标系。向量可以通过矩阵的列或行来表示，而矩阵乘法可以用来进行坐标变换。
  4. 线性变换和几何变换：矩阵可以用来表示各种几何变换，如旋转、缩放、平移等。通过矩阵乘法，可以将一个向量或一个点进行线性变换，从而实现各种几何操作。
  5. 特征分析和解析几何：矩阵在特征分析和解析几何中有重要的应用。例如，矩阵可以用来计算特征值和特征向量，从而揭示矩阵的性质和结构。

概念

矩阵是按照行列排列的一系列数值得的集合，一个矩阵通常是由 m 行 n 列组成，我们称之为

m×n矩阵，如果 m 和 n 相同，该矩阵代表一个方阵，我们就可称这个方阵为 m 阶矩阵(方阵)，矩阵一般用大写字母来表示。

M=[1234]M = \begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix}

这个矩阵由两行两列组成，也就是 2 阶矩阵。

可以看出，这个 2 阶矩阵还可以理解为 2 个行向量或者 2 个列向量的集合。

要注意，向量可以理解为一个特殊的矩阵，4 维向量既可以理解为一个 1 行 4 列矩阵，此时这个向量被称为行向量。

也可以理解为一个 4 行 1 列矩阵，此时这个向量被称为列向量。

空间意义

表示各种几何变换。

例如在一个3D场景中,我需要对一个模型沿x轴平移a距离,然后沿着z轴旋转90度,然后再沿x轴平移-a距离,也就是回到刚才那个点。这个操作，我可以通过加减模型的位置和旋转角度来实现，但是我同样可以使用矩阵去实现。这里我可以创建3个矩阵，2个位移矩阵，1个旋转矩阵，每次将模型应用这个矩阵，就能实现对应的位置移动。

怎么应用？什么是应用？ 一个模型实际上是有很多点组成的，每个点都一个坐标（x,y,z，w），可以用一个向量，同样这个向量可以参与矩阵运算，只要把这个坐标与变换矩阵相乘，就能得到变换后的坐标位置。

那么矩阵的好处是什么呢？ 上面的操作我要分三个步骤做，但是我用矩阵，刚才的三个矩阵我可以叠加，成为一个变换矩阵，那么此时我操作这个模型只要执行一步应用就行。这是单单我是个简单的操作，实际业务场景下，可能需要有数百次变换，那么此时使用矩阵的效率就大大提升。

// 代码案例
const rotationMatrix = new THREE.Matrix4().makeRotationFromQuaternion(rotationQua);
const inverseTranslationMatrix = new THREE.Matrix4().makeTranslation(center.x, center.y, center.z);
const finalMatrix = new THREE.Matrix4()
      .multiplyMatrices(inverseTranslationMatrix, rotationMatrix)
      .multiply(translationMatrix);

actionModel.applyMatrix4(rotationMatrix);

矩阵加减

两个矩阵相加或者相减需要满足一个条件，即两个矩阵必须同型，同型的意思是，行数和列数都必须一样。一个 m x n 矩阵 和一个 n x m 矩阵（m 不等于 n ）是不能进行加减的。

如果满足了以上条件，矩阵加法和减法的运算只需将两个矩阵对应位置上的元素相加或相减即可，得到的新矩阵和原矩阵同型：

 [12 34] + [12 34]= [24 68] \begin{bmatrix}1 & 2  \\ 3 & 4\end{bmatrix}  +  \begin{bmatrix}1 & 2  \\ 3 & 4\end{bmatrix} =  \begin{bmatrix}2 & 4  \\ 6 & 8\end{bmatrix}

矩阵乘法

矩阵既可以和标量相乘，也能和矩阵相乘，也能和向量相乘。在讲解乘法运算之前，我们必须先明确相乘的顺序，因为矩阵相乘不满足交换律。

左乘与右乘

所谓左/右乘，是指参与运算的两个因子（向量或者矩阵）在运算中的相对位置，A 左乘 B 即A×B，A 右乘 B即 B×A。

因此在说左乘或者右乘时，必须指定参与运算的两个因子。比如在 OpenGL 或者 WebGL 中对顶点进行矩阵变换，通常使用左乘，即矩阵 M 左乘向量 P，M×P。

比较容易的理解方式就是： 左乘就是从左边过来乘，右乘就是从右边过来乘。

之所以要明确左右乘，是因为矩阵和矩阵不满足交换律，左乘和右乘的结果不一定相同。

矩阵与标量相乘

[1234]∗2=[2468]\begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} * 2 = \begin{bmatrix}2 & 4 \\ 6 & 8\end{bmatrix}

矩阵与矩阵相乘

矩阵 P 第一行第一列位置的元素等于矩阵 M 第一行的各个分量分别乘以矩阵 N 的第一列的各个分量，然后相加。

矩阵 P 第二行第一列位置的元素等于矩阵 M 的第二行的各个分量分别乘以矩阵 N 第一列的各个分量，然后相加。

以此类推。。

运算规则直接看下面这个例子

image.png

矩阵相乘不满足交换律,但是满足结合率

[1234]∗[5678]=[19224350]\begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} * \begin{bmatrix}5 & 6 \\ 7 & 8\end{bmatrix} = \begin{bmatrix}19 &22 \\ 43 & 50\end{bmatrix}

[5678]∗[1234]=[23343146]\begin{bmatrix}5 & 6 \\ 7 & 8\end{bmatrix}* \begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} = \begin{bmatrix}23 &34 \\ 31 & 46\end{bmatrix}

矩阵与向量相乘

矩阵与向量相乘其实等价于矩阵与一阶矩阵相乘，其实质是将向量变换为另一个向量，但是要注意乘法的顺序。

假设有一个4 维向量 P 和一个4 阶方阵 M，当 P 左乘 M 时，P 一定要表示成行向量，即 1 * 4 矩阵。当 P 右乘 M 时，P要表示成列向量，即 4 * 1 矩阵。

单位矩阵

单位矩阵首先是一个方阵，其次方阵对角线上的元素都为 1，其余元素为 0，比如下面就是一个 3 阶单位矩阵。

[100010001]\begin{bmatrix}1 & 0 &0 \\ 0 & 1 &0 \\0 &0 &1\end{bmatrix}

转置矩阵

矩阵转置就是将原来矩阵的行向量转变为列向量，矩阵 M的转置矩阵用符号MTM^T

假设有一个矩阵M：

M=[a1a2a3a4]M = \begin{bmatrix}a1 & a2 \\ a3 & a4\end{bmatrix}

那么M的转置矩阵为

MT=[a1a3a2a4]M^T = \begin{bmatrix}a1 & a3 \\ a2 & a4\end{bmatrix}

逆矩阵

假设有一个 m 阶方阵 A ，如果存在一个n 阶方阵 B，使得A×B=B×A=I 其中 I 是单位矩阵，那么 B 是 A 的逆矩阵， A 矩阵就是可逆矩阵，也称非奇异矩阵，矩阵 A 的逆矩阵 用 A−1A^{-1}.

但并不是所有矩阵都存在逆矩阵，逆矩阵首先必须是方阵，其次存在另一个矩阵与之相乘，能够得到一个单位矩阵。

意义

逆矩阵在图形学中有着非常重要的作用，在图形学中，将一个变换矩阵左乘一个列向量（此处列向量代表顶点坐标），代表了对原始顶点执行了某种变换，比如旋转、缩放、平移等。逆矩阵的意义就是能够撤销这种变换，将变换后的坐标再还原回去。

假设一个变换矩阵（放大2倍的效果）左乘一个向量。如果要变换回去，则得到刚才变换矩阵的逆矩阵，现在的向量再乘回去刚才的逆矩阵。就能得到变换前的位置

正交矩阵

一个方阵M，当且仅当M和他的转置矩阵乘积为单位矩阵时，称其为正交矩阵。

所以可以得出，

Mt=M−1M^t = M^{-1}

判断一个矩阵 M 是否正交的重要条件是：M 的行向量是一个相互正交的单位向量组。

简单来说就是2个条件：

  1. 矩阵的每一行都是单位向量
  2. 矩阵的某一行和其他行向量相互垂直，点积为 0。

举例：下面这个矩阵就是正交矩阵(这是一个绕x轴旋转a角度的变换矩阵)

[10000cos(a)−sin(a)01sin(a)cos(a)00001]\begin{bmatrix}1 & 0 &0 &0 \\ 0 & cos(a) &-sin(a) &0 &\\1 &sin(a) &cos(a) &0 \\0 & 0 &0 &1 \end{bmatrix}

意义

正交矩阵的一个好处是，如果一个矩阵是正交矩阵，那么计算它的逆矩阵时，只需要对原矩阵转置即可，从而减少了计算量（逆矩阵的求解过程是很繁琐的），3D图形学中的最常见的旋转和镜像变换就都是正交的。

结尾

以上就是本次矩阵相关基础内容的介绍。

之后还会整理其他相关内容，大致的大纲如下：

  • 向量、点乘叉乘运算以及它们的空间意义
  • 四维向量、齐次坐标的意义和用法 （解释3D场景中一个坐标除了x,y,z，还有一个w）
  • FPVM，坐标系变换理论
  • 其他

更新时间随缘～ 看看浏览的人多不多吧 😂

avatar
文章
阅读
粉丝