WebGL（四）三维世界的重要矩阵

三维世界与二维世界最大的区别就是有深度，也就是Z轴。但在计算机上，我们还是把三维世界场景绘制到二维的屏幕上。
本节矩阵相关的代码在链接的lib文件夹中的cuon-matrix.js。

如何将三维世界上的物体投影到二维屏幕？

这里的处理用到三个矩阵转换：

1. 模型矩阵：用来移动、旋转、拉伸物体。具体矩阵使用方式看这里。
2. 视图矩阵：获取在视点也就是相机位置观察到的场景。
3. 投影矩阵：将三维投影到二维平面，分为两种方式：正交投影、透视投影。

前置知识

1. 两向量点积也称内积为0，成为正交向量，可以理解为两向量互相垂直
2. 因为列（行）向量组为单位正交向量，就是都是单位向量且两两垂直，成为正交矩阵
3. 正交矩阵的逆矩阵为其转置矩阵（就是行向量换成列向量）
4. 向量a通过矩阵A转换为向量b，通过A的逆矩阵就可以把b转回a，也就是逆矩阵用来还原转换。
   $$A\overrightarrow{a}=\overrightarrow{b}=>A^{-1}\overrightarrow{b}=\overrightarrow{a}$$

视图矩阵

先说一个默认规定，相机的上方向是以相机为原点的坐标轴的Y轴，视线为-Z轴方向。

我们一般处理方法，先平移， 把观察者（或者说是相机）移至原点，在把相机的坐标轴旋转至与全局坐标轴重合。

书中的例子是先旋转至与X、Y、Z轴平行，再平移，作用也是一样的。

旋转矩阵A比较难求，但是把全局坐标轴旋转至与相机的坐标轴的矩阵比较好求，得到这个矩阵B，我们求一个逆矩阵，逆矩阵就是旋转矩阵B。

下面我们说下怎么求的矩阵B，我是按照这个视频–线性代数的本质—基变换里的内容理解的。简单概括就是，要把全局坐标系，转换成本地坐标系，只要把基向量（X、Y、Z轴方向的单位向量）转换成本地坐标系的基向量（i，j，k），也就左乘一个基向量构成的矩阵。

举个例子，全局坐标系的基向量固定是(1,0,0)、(0,1,0)、(0,0,1)。假设本地坐标系的基向量是下面这三个，有一个全局坐标系下的点P（X, Y, Z)想转成本地坐标系下O（x, y, z)
$$\overrightarrow{i}=\left(\begin{array}{c}\begin{array}{c}x1\\ y1\\ z1\end{array}\end{array}\right)\overrightarrow{j}=\left(\begin{array}{c}\begin{array}{c}x2\\ y2\\ z2\end{array}\end{array}\right)\overrightarrow{k}=\left(\begin{array}{c}\begin{array}{c}x3\\ y3\\ z3\end{array}\end{array}\right)$$

$$O=(\begin{array}{c}\begin{array}{cc}\overrightarrow{i}& \overrightarrow{j}\end{array}\end{array}$$