WebGL 矩阵和向量的乘法及衍生的旋转公式

一,向量划分:

在WebGL中有一维向量,二维向量,三维向量,四维向量。

1维向量有1个数字,对应单轴坐标系的一个点;

2维向量有2个数字,对应的是2维坐标系的点位;

3维向量有3个数字,对应的是3维坐标系的点位;

4维向量有4个数字,对应的也是3维坐标的点位,最后一个是附加数据,至于这个数字干什么,要看我们项目的需求。

二,矩阵和向量的乘法:

image-20210107184337749

向量乘以矩阵时,向量时几维的,那矩阵中就应该有几个向量。

如上图,向量v时二维的,那矩阵中就有两组向量,可以时横着的两组,也可以时竖着的两组。

行业话术:

横着的叫行主序的,即矩阵中的一行数据视为一个向量;

竖着的叫列主序的,即矩阵中的一列数据视为一个向量。

至于到底用哪个,要看规范,WebGL的矩阵排列,时列主序的。

而数学中常用的时行主序的,下面以此为例。

矩阵和向量相乘的规则就是让矩阵中每个向量和向量v相乘。

向量和向量相乘,就是再求向量的点积,其结果时一个实数,不再是向量。

例如上图,向量(a,b)乘以向量(x,y)的结果:

a * x + b * y

因为a, b, x, y 都是实数,所以结果也是实数。

上图中,矩阵m乘以向量v会得到两个结果, ax+by 和 ex+fy。

这两个结果会构成一个新的向量v'(x', y')

x' = ax+by;
y' = ex+fy;

此时,我们可以和旋转公式做一下比较:

点A(ax, ay) 绕z轴旋转β度,则,其旋转后的点B的坐标为:

bx = cosβ * ax - sinβ * ay;
by = sinβ * ax + cosβ * ay;

对比上面两组公司,向量v是否可以当成一个点呢?

答案时可以的。

满足以下条件即可:

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

这样,用矩阵乘以向量的结果,和我们用数学公式得到的结果时一样的,即:

a*x+b*y=cosβ*ax-sinβ*ay
e*x+f*y=sinβ*ax+cosβ*ay

最终我们可以就用矩阵乘以向量的方式让点p旋转β度:

image-20210108120112541