WebGL 矩阵和向量的乘法及衍生的旋转公式 - 易塔云建站-模板下载,web开发资源,技术博客

WebGL 矩阵和向量的乘法及衍生的旋转公式发布于：2023-02-06 16:25:19 来源：李伟的博客查看：46 讨论：0

一，向量划分：

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

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

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

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

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

二，矩阵和向量的乘法：

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

如上图，向量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旋转β度：

上一篇：向量的相关概念下一篇：WebGL 图形旋转的公式以及推导

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友