webgl中的变换矩阵与矩阵顺序

几何证明

假设一个正方形，其4个顶点分别为： A(-1,1)、B(1,1)、C(1,-1)、D(-1,-1);

在webgl中，利用矩阵对图形进行变换，其本质是对图形的顶点坐标的变换，还有一个重要的性质，图形的旋转不会影响其直观的印象，即一个正方形旋转后他还是正方形，一个矩形旋转后还是矩形（这里不予证明）

假设先将上述正方形y轴方向放大2倍，其坐标变为A(-1,2)、B(1,2)、C(1,-2)、D(-1,-2)，其变成一个2*4的矩形，然后再绕原点旋转45度，这正是我们想要的效果。

可是我们如果先旋转，其顶点左边变为A(0,$\sqrt{8}$)、B($\sqrt{8}$,0)、C(0,-$\sqrt{8}$)、D(-$\sqrt{8}$,0),其还是我们的正方形，只不过旋转了45度，可是如果我们这时候进行缩放，其顶点的坐标变为A(0,$\sqrt{32}$)、B($\sqrt{8}$,0)、C(0,-$\sqrt{32}$)、D(-$\sqrt{8}$,0)，这时候图形变成了菱形，这其实就是因为上面说的对图形的变换其本质是对图形的顶点坐标的变换。

这里只是简单的证明下不同的变换顺序会影响变换的结果。

应用于矩阵变换

假设点的坐标为A(x,y,z) 假设旋转矩阵R 假设缩放矩阵S 假设平移矩阵T

如果我们想要达到我们想要的变换效果，我们需要对顶点按个应用变换矩阵：S*R*T

在行主序矩阵系统中这很简单，如果对点A进行M变换，可以表示为A*M，所以按序使用矩阵就行A*S*R*T

在列主序矩阵系统中，如果对点A进行M变换，可以表示为M*A，所以如果我们想要实现ASR*T的变换的话，需要反向的使用变换矩阵，即将变换矩阵变为T*R*S，这时候的变换公式为T*R*S*A