【零基础学WebGL】矩阵变换

矩阵变量

GLSL ES语言中，通过关键字mat2、mat3、mat4声明矩阵，并提供内置函数mat2()、mat3()、mat4()构造矩阵。

支持三种方式初始化矩阵：

1. 从第一列开始，逐列指定元素的值。这里与，高数中习惯按照逐行书写矩阵不同。
2. 只传入一个值，作为对角矩阵的对角线值；
3. 传入多个向量；

如下代码初始化2x2单位矩阵：

// 按照列优先，逐列指定每个元素
mat2 aMat = mat2(
  1.0, 0,  // 第一列
  0,   1.0 // 第二列
);

// 构造对角矩阵，值是对角线的值
mat bMat = mat2(1.0);

vec2 aVec = vec2(1.0, 0);
vec2 bVec = vec2(0, 1.0);
// 使用向量构建矩阵
mat cMat = mat2(aVec, bVec); 

可以向二维数组一样，使用索引下标访问元素。

mat2 aMat = mat2(
  1.0, 0,  // 第一列
  0,   1.0 // 第二列
);

vec2 aVec = mat2[0]; // 访问第一列的向量，[1.0, 0]
vec2 bVec = mat2[0][1]; // 访问第一列第二行，0
mat2[1] = vec2(1.0, 0); // 给第二列重新赋值 

矩阵运算

矩阵与数字加减

矩阵与数字的加减，也就是矩阵的每个元素与数字进行加减。示例如下：

mat2 aMat = mat2(
  1.0, 0,  // 第一列
  0,   1.0 // 第二列
);

// 矩阵aMat加1之后, 得到新的矩阵
// [
//   2.0, 1,  // 第一列
//   1,   2.0 // 第二列
// ]
//
mat2 bMat = aMat + 1; 

矩阵与数字相乘

与矩阵与数字加减类似，矩阵与数字相乘，就是矩阵每个元素与数字相乘。示例如下：

mat2 aMat = mat2(
  1.0, 0,  // 第一列
  0,   1.0 // 第二列
);

// 矩阵aMat乘以2之后, 得到新的矩阵
// [
//   2.0, 0,  // 第一列
//   0,   2.0 // 第二列
// ]
//
mat2 bMat = aMat*2; 

矩阵与矩阵相乘

回顾下线性代数关于矩阵相乘的知识。假设有A、B两个矩阵，有如下定义：

1. 相乘的前提条件是，A矩阵的列数需等于B矩阵的行数；
2. 矩阵相乘不遵守交换律，也就是说A⋅B ≠ B⋅A；
3. 矩阵相乘遵守结合律，A.B.C = A.(B.C)；
4. A⋅B 也是一个矩阵，乘积矩阵的行数等于A矩阵，结果矩阵的列数等于B矩阵；
5. 乘积矩阵的第n行，第m列的结果等于，A矩阵的第n行与B矩阵的第m列对应值的乘积之和。

具象地举例，A矩阵是3行3列，B矩阵是3行3列，乘积矩阵的第2行第2列的计算过程如下：

c5的