webgl的矩阵变换

矩阵变换一般是用来在webgl中，实现旋转、移动和缩放功能的。

旋转

我们来看一下如何实现？

const maxirts = [
    1, 1
    1, 1
];

这是二维矩阵，现在我们在这个矩阵下创建一个二维向量。

const vect2 = [0, 0];

我们希望这个二维向量，能从[0,0]的位置移动到[1,1]的位置。

我们知道，在矩阵变换中，公式如下：

[x2,y2] = [a,b,e,f] * [x,y]
x2  = ax + by
y2 = ex + fy

而在三角函数的变换中，我们知道变换的函数是这样的

x2 = x*cosβ - y*sinβ
y2 = x*sinβ + y*cosβ

于是我们能得出映射关系

a = cosβ; b = -sinβ; e = sinβ; f = cosβ;

于是我们可以得出，要使得向量vect2 旋转a°，我们就要这样写

const maxirts = [
   cosβ, sinβ 
   -sinβ, cosβ
];

平移

在向量中，平移的公式：

x2 = ax + T

让我们再看下旋转公式:

x2  = ax + by

我们使用四维向量一下就能对比出来

x2 = ax + by + cz + d

于是我们能看得出来，其实平移是一种特殊形式的旋转，其中b = 0 ,c = 0, d = T = 需要旋转的距离。

同理，我们推测y的平移如下

y2 = 0*x + by + 0*c + T 

于是我们如此构建一个矩阵

const maxtris = [1,0,0,T,  0,1,0,T,  0,0,0,0,  0,0,0,0 ]

缩放

缩放，则是一种特殊的平移，只不过，平移的量T = 0,表示原地平移

于是X的缩放就是

X2 = a * x + 0 * y + 0 * c + T

其中,a = 缩放的大小

于是，我们可以这样组建矩阵

const maxtris = [s, 0 ,0 ,0 ,  0,s,0,0,  0,0,0,0,  0,0,0,0]

以上便是矩阵实现旋转，平移和缩放