本来以为可以开始尝试3D效果了。查了资料，发现需要先了解矩阵。把相关的基础知识点收集在这里。Origin简介MyGitHub简单来说，矩阵（Matrix）就是数字按行和列排列的矩形。一般的描述是先行后列，比如下面的2×3矩阵：矩阵中的每个元素也可以按照行列来标记，比如a1,2表示第一行的第二列元素。在应用数学学科中，矩阵常用于统计分析。在物理学中，矩阵在电路、力学、光学和量子物理学中都有应用。在计算机科学中，3D动画需要使用矩阵。单位矩阵单位矩阵具有以下特点：行数和列数相等。对角线全为1，其他全为0。该符号是大写字母I。乘以任何矩阵都不会改变，例如A×I=A。下面是一个3×3的单位矩阵：负矩阵只是矩阵中每个元素的反转。例如矩阵A如下：对应的负矩阵为：transposeTranspose就是将矩阵的列和行互换。在右上角放一个T表示转置：转置满足如下运算法则：(AT)T=A(λA)T=λAT(AB)T=ATBT基本运算加法只有相同类型（数行数和列数对应相等）矩阵相加。添加时，添加相应的位置编号。举例如下：加法满足如下运算法则：A+B=B+A(A+B)+C=A+(B+C)减法减法实际上是对一个负矩阵进行加法。前提是两个矩阵的类型相同。一个例子如下：矩阵乘以一个数要将一个矩阵乘以一个数，矩阵中的每个元素都要乘以这个数。举例如下：乘法满足如下运算法则：λ(μA)=μ(λA)λ(μA)=(λμ)A(λ+μ)A=λA+λμλ(A+B)=λA+λB矩阵与矩阵两个矩阵相乘的前提是第一个矩阵的列数必须等于第二个矩阵的行数。m×n矩阵A乘以n×p矩阵B得到m×p矩阵C。矩阵C中各元素的计算方法如下：这里举例说明，下面是计算例子：c1,1=a1,1×b1,1+a1,2×b2,1+a1,3×b3,1=0×1+1×2+2×3=8c1,2=a1,1×b1,2+a1,2×b2,2+a1,3×b3,2=0×4+1×5+2×6=17c2,1=a2,1×b1,1+a2,2×b2,1+a2,3×b3,1=2×1+1×2+0×3=4c2,2=a2,1×b1,2+a2,2×b2,2+a2,3×b3,2=2×4+1×5+0×6=13矩阵乘法满足以下运算法则：（AB)C=A(BC)(A+B)C=AC+BCC(A+B)=CA+CB这里需要注意的是，矩阵乘法不满足交换律，即AB!=BA。逆矩阵的个数有倒数，矩阵也有类似的概念，称为逆矩阵，表达式为A-1。数与倒数的乘积为1。同理，矩阵与逆矩阵相乘的结果是单位矩阵：AA-1=I。行数和列数相等的矩阵可以有一个逆矩阵.有关更详细的说明，请参见此处。逆矩阵的计算方法是：使用带余因子的初等行运算、代数余因子和伴随矩阵，在后面的除法中会用到。矩阵到矩阵除法没有矩阵中除法的概念。乘以逆矩阵与除法具有相同的效果。假设已知矩阵A和B，A有逆矩阵，需要得到矩阵X：XA=B可以这样写：XAA-1=BA-1前面提到AA-1=I，所以：XI=BA-1单位矩阵相乘不会改变原矩阵，所以：X=BA-1矩阵与向量相乘矩阵与向量相乘是方程组的一种解释方式。具体解释见这里。有两个重要的规则：矩阵乘以右边的列向量可以看成是矩阵的列向量的线性组合，结果就是一个列向量。左边的行向量乘以矩阵可以看成是矩阵的行向量的线性组合，结果就是一个行向量。WebGL中的顶点坐标可以转化为向量的形式。在执行转换时，将向量和矩阵相乘是一种有效的方法。让我们从二维变换开始：位移、缩放和旋转。下面的二维变换是纯数学理论计算，与实际编程应用可能有些出入。先看位移不使用矩阵的实现。坐标(x,y)，分量对应位移Tx和Ty，则新坐标：newX=x+TxnewY=y+Ty单位矩阵通常是生成其他变换矩阵的起点，向量与单位矩阵不会改变向量：两种计算方式对比：非矩阵方式：newX=x+Tx矩阵方式：newX=x发现用2×2矩阵的变换是不行的，并且需要一个3×3的矩阵。vector还需要多乘一个分量，这里设置为z，再看计算：可以发现z=1时得到的结果是符合位移效果的。缩放量为Sx和Sy，一个2×2的矩阵就可以满足缩放的效果：首先我们看一下不用矩阵旋转的实现。为了描述旋转，需要指定：旋转轴旋转方向的旋转角度这里，旋转设置为绕Z轴旋转，旋转方向为逆时针方向，旋转角度为β。点(x,y)旋转β角后变成点(newX,newY)，结合三角函数：newX=xcos(β)-ysin(β)newY=xsin(β)+ycos(β)使用矩阵的实现如下：两种计算方法的比较：非矩阵法：newX=xcos(β)-ysin(β)矩阵法：newX=ax+byifa=cos(β),b=-sin(β),这两个方程是相同的。对y坐标进行类似的变换后，最终的矩阵为：在WebGL二维变换的数学约定中，行为横列为竖，矩阵就是以此为基础构建的。但在WebGL编程中，由于某种原因，程序会将可视化的行解析为列。位移这是数学意义上的位移矩阵形式：constm3=[1,0,tx,//row0,1,ty,//row0,0,1,//row]这在WebGL编程中是正确的已解析的位移矩阵：constm3=[1,0,0,//column0,1,0,//columntx,ty,1,//column]查看这两个位移矩阵的示例：programmingUsingWebGLAngleDisplacementMatrixSampleProgrammingUsingMathematicalAngleDisplacementMatrix示例程序使用了数学角度的矩阵形式，会导致计算结果在数学角度对应的Z分量上，Z分量在二维中不使用，将不会生成。任何变化，这个例子也是这个的结果。WebGL中的缩放比例矩阵：functiongetTransform(x,y){return[x,0,0,0,y,0,0,0,1,];}这是示例。RotationWebGL中的旋转矩阵：functiongetTransform(angle){constradian=(Math.PI*angle)/180;constcosA=Math.cos(弧度);constsinA=Math.sin(弧度);return[cosA,sinA,0,-sinA,cosA,0,0,0,1,];}这是一个例子，旋转方向可以用旋转角度的正负值来表示，在这个例子中，如果为正值，则表示逆时针旋转。旋转的中心默认为图形的中心。如果需要绕指定点旋转，需要乘以旋转后的位移矩阵。这是一个例子。更详细的解释可以参考以下两个链接：如何在WebGL中旋转单个形状WebGL二维矩阵参考资料矩阵百科矩阵WebGL二维矩阵
