WebGL学习系列-基础矩阵变换

Posted 2020-09-01 那个天真的人

前言

在图形学中，特别是涉及到3D的时候，矩阵变换起着非常重要的作用。在实际使用的过程当中，通常每一帧画面可能都会涉及到成千上万个顶点的坐标变换，如果没有矩阵变换计算，一个是计算复杂，一个是难以达到我们想要的计算效率。本小节将介绍通过矩阵计算来实现基本的图形变换。

矩阵

矩阵是一种多个数据集合的表示方式，定义为：由 m × n 个数$a_{ij}$排成的m行n列的数表称为m行n列的矩阵，简称m × n矩阵。记作：

矩阵的存在主要是由于它的运算，下面来简单看一下：

加法

$\\begin{bmatrix} 2& 3 & \\\\ 6& 7& \\end{bmatrix} + \\begin{bmatrix} 1& 2 & \\\\ 3& 4& \\end{bmatrix} =\\begin{bmatrix} 3& 5 & \\\\ 9& 11& \\end{bmatrix}$
可以看到，矩阵加法就是对应的位置的数值相加。

减法

$\\begin{bmatrix} 2& 3 & \\\\ 6& 7& \\end{bmatrix} -\\begin{bmatrix} 1& 2 & \\\\ 3& 4& \\end{bmatrix} =\\begin{bmatrix} 1& 1 & \\\\ 3& 3& \\end{bmatrix}$
可以看到，矩阵减法就是对应的位置的数值相减。

乘法

$\\begin{bmatrix} 1 & 0 &2 \\\\ -1 & 3 &1 \\end{bmatrix} *\\begin{bmatrix} 3 &1 \\\\ 2 &1 \\\\ 1 &0 \\end{bmatrix} =\\begin{bmatrix} (1*3+0*2+2*1) &(1*1+0*1+2*0) \\\\ (-1*3+3*2+1*1) &(-1*1+3*1+1*0) \\end{bmatrix} =\\begin{bmatrix} 5 & 1\\\\ 4 & 2 \\end{bmatrix}$

乘法规则示意图如下：

在矩阵乘法中，注意，左边矩阵的列数必须等于右边矩阵的行数。

转置

把矩阵的行和列位置进行互换的矩阵，称为矩阵的转置。
$例如： \\begin{bmatrix} 1 & 2 &3 \\\\ 4 & 5 &6 \\end{bmatrix}的转置矩阵为 \\begin{bmatrix} 1 & 4\\\\ 2 & 5\\\\ 3 & 6 \\end{bmatrix}$
通常写成：[142536]T=⎡⎣HTML5原生WebGL开发系列教程

HTML5原生WebGL开发系列教程

shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换（WebGL-Shader开发基础03）

shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换（WebGL-Shader开发基础03）

机器学习｜数学基础Mathematics for Machine Learning系列之矩阵理论：基变换与坐标变换

机器学习｜数学基础Mathematics for Machine Learning系列之矩阵理论（11）：线性变换的矩阵表示