在WebGL中,图形是由一个个的三角形的顶点组成的,而图形的变换就意味着空间中顶点的变换。为了计算变换后顶点的位置,就需要掌握线性代数。线性代数是数学的一个分支,研究的是向量、向量空间、线性变换等,处理线性关系问题。
在图形学中,线性变换主要包括平移、旋转和缩放等操作。这些变换都可以通过矩阵运算来实现,矩阵是线性变换的映射,研究矩阵就达到了研究线性变换的目的。
平移变换是最简单的线性变换,它通过在三维空间中移动顶点来实现。平移矩阵很简单,假设空间中存在某个向量a(x0, y0, z0),我们需要分别沿x轴、y轴和z轴方向进行平移x1、y1和z1距离,可以得到以下的计算公式:
x=x0+x1y=y0+y1z=z0+z1
但是,平移无法写成M*X这样的线性表示,也就无法写出一个3X3的矩阵。为了让变换保持一致,我们添加了一个维度,使之变成了4X4的矩阵,把最后一个维度设置为1。这样,我们就可以改写上面的平移方法:
x=ax+by+cz+Tx;y=dx+ey+fz+Ty;z=gx+hy+iz+Tz;1=jx+ky+mz+p;
其中a、b、c、d、e、f、g、h、i都为0才可以,这样的话,就得到了最后的矩阵表示。这种添加了一个1的坐标就叫做齐次坐标,得到的矩阵就是齐次矩阵。
旋转和缩放也是通过矩阵来实现的。旋转矩阵可以表示为:
R=r(x)00r(y)r(z)00r(x)r(y)r(z)00r(x)r(y)r(z)0
其中r(x)、r(y)、r(z)是旋转角度的正弦值和余弦值。缩放矩阵可以表示为:
S=sx00sy00sz00s
其中s是缩放因子。