WebGL第十四课:从向量到矩阵

1,435 阅读4分钟
本文标题:WebGL第十四课:从向量到矩阵

我们小学的时候就学过

我们第十一次课,引进了向量: 一堆数,放在一块,竖着写

那么这次课再次给出一个十分简单的新玩意:矩阵

  • 矩阵: 一堆向量,从左到右,排好了,就是矩阵

如下图所示:

14-1.png

矩阵定义的讲解

从上图可以看出,矩阵是由向量组成的,组成矩阵的向量,从左到右依次排开,最终形成一个矩阵
这是不是有点类似于我们军训时候,站方队:

  1. 一个一个的人是基本元素:
  2. 一溜人站成一列:向量
  3. 多列人,搞到一块变成方队:矩阵
矩阵定义的注意点
  1. 向量长度(维度)可以任意,但是每一个向量必须是一样的长度,就是说,不能哪一个短了或哪一个长了,那样不好看,对吧。
  2. 向量的个数不限,也就是从左到右,可以一直排下去,向量ABCDEFG......等等,都行。
  3. 我们看矩阵的时候,一定不要用单个数的眼光去看,一定要一列一列的去看,将矩阵看着向量的数组,最好。如下图:

14-2.png

一般人这么看矩阵,下图就是给出一个最常见的反面典型

14-3.png

矩阵的加减法

加减法: 同型矩阵之间可以进行这个加减法同型指的就是,两个矩阵拥有的向量个数相同,向量的维度也相同。加减法,就是将其中的向量,依次按照对应位置进行向量加减法,得到的结果,排成一排,形成了一个新的矩阵。如下图所示:

14-4.png

14-5.png

实质就是,将组成矩阵向量,进行加减法

矩阵乘法
  • 上上次课讲了向量的线性组合
  • 上次课讲了个例子,就是小明小红糖果和饼干分给小刚的事情。

我们给出上次课的算式:

14-6.png

我们知道,上述就是对两个向量进行线性组合。

那么我们能不用给矩阵定义一个算法,让矩阵可以进行这种运算,进而来代表线性组合呢?

  • 那就是矩阵乘法了: 先不给出文字描述,先看图,一图胜千言:

14-6.png

描述一下上图:

  • 我们看到,左右两个矩阵相乘的结果,还是一个矩阵,只不过这个矩阵向量个数是1个。
  • 加减法不同,左右两个矩阵,不是同型的。
  • 左边矩阵的两个向量,分别上了一个系数,然后结果相加
  • 这两个系数,是从右边矩阵里拿出来的。
  • 总结,矩阵的乘法,实质就是,将右边的矩阵中的向量,看成系数,然后对左边矩阵的向量,进行线性组合。如果不懂线性组合,那么建议先去看第十二次课

再给一个例子,进行观察,如图:

14-7.png

  • 右边矩阵红色的向量,对左边矩阵的向量进行一次线性组合,变成最终结果的第一个向量
  • 右边矩阵黄色的向量,对左边矩阵的向量进行一次线性组合,变成最终结果的第二个向量
  • 其实就是,右边矩阵每加一个向量最终的矩阵,就会多一个向量,一一对应。
  • js 的概念讲,是不是类似于 map 方法
// 这是伪码:
var 左边矩阵;
function 线性组合操作(系数数组) {
    var 结果向量 = 左边矩阵.向量 与 系数数组 进行线性组合;
}
var 右边向量数组 = 右边矩阵.向量;
var 最终矩阵 = 右边向量数组.map(线性组合操作);

仔细观察上图,然后将这种算法,去网上随便找一个矩阵乘法例子,试一试,看我上面的算法是不是更简单。




正文结束,下面是答疑
小瓜瓜表示需要仔细看一下这一次课的内容
  • 答:可以找小能能帮你解惑。