专栏
资源中心
模板库
首页
>
专栏
>
计算机图形学
> 文章详情
WebGL 矩阵和向量的乘法及衍生的旋转公式
发布于:2023-02-06 16:25:19 来源:
李伟的博客
查看:46 讨论:0
一,向量划分:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
在WebGL中有一维向量,二维向量,三维向量,四维向量。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
1维向量有1个数字,对应单轴坐标系的一个点;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
2维向量有2个数字,对应的是2维坐标系的点位;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
3维向量有3个数字,对应的是3维坐标系的点位;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
4维向量有4个数字,对应的也是3维坐标的点位,最后一个是附加数据,至于这个数字干什么,要看我们项目的需求。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
二,矩阵和向量的乘法:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
向量乘以矩阵时,向量时几维的,那矩阵中就应该有几个向量。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
如上图,向量v时二维的,那矩阵中就有两组向量,可以时横着的两组,也可以时竖着的两组。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
行业话术:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
横着的叫行主序的,即矩阵中的一行数据视为一个向量;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
竖着的叫列主序的,即矩阵中的一列数据视为一个向量。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
至于到底用哪个,要看规范,WebGL的矩阵排列,时列主序的。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
而数学中常用的时行主序的,下面以此为例。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
矩阵和向量相乘的规则就是让矩阵中每个向量和向量v相乘。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
向量和向量相乘,就是再求向量的点积,其结果时一个实数,不再是向量。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
例如上图,向量(a,b)乘以向量(x,y)的结果:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
a * x + b * y
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
因为a, b, x, y 都是实数,所以结果也是实数。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
上图中,矩阵m乘以向量v会得到两个结果, ax+by 和 ex+fy。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
这两个结果会构成一个新的向量v'(x', y')
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
x' = ax+by;
TZg易塔云建站-模板下载,web开发资源,技术博客
y' = ex+fy;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
此时,我们可以和旋转公式做一下比较:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
点A(ax, ay) 绕z轴旋转β度,则,其旋转后的点B的坐标为:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
bx = cosβ * ax - sinβ * ay;
TZg易塔云建站-模板下载,web开发资源,技术博客
by = sinβ * ax + cosβ * ay;
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
对比上面两组公司,向量v是否可以当成一个点呢?
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
答案时可以的。
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
满足以下条件即可:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
a=cosβ
TZg易塔云建站-模板下载,web开发资源,技术博客
b=-sinβ
TZg易塔云建站-模板下载,web开发资源,技术博客
e=sinβ
TZg易塔云建站-模板下载,web开发资源,技术博客
f=cosβ
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
这样,用矩阵乘以向量的结果,和我们用数学公式得到的结果时一样的,即:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
a*x+b*y=cosβ*ax-sinβ*ay
TZg易塔云建站-模板下载,web开发资源,技术博客
e*x+f*y=sinβ*ax+cosβ*ay
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
最终我们可以就用矩阵乘以向量的方式让点p旋转β度:
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
TZg易塔云建站-模板下载,web开发资源,技术博客
写的不错
返回栏目
上一篇:向量的相关概念
下一篇:WebGL 图形旋转的公式以及推导
评论
匿名
最新文章
热门笔记
理解:JS 的事件循环机制 Event Loop,微任务与宏任务
反问:JS 的原型链存在的意义是什么?为什么这样设计?
线性代数基础:求逆矩阵
总结:JS判断数据类型的四种方法
canvas 实例方法: save() 和 restore() 的理解
理解 js 构造函数
理解:js中 构造函数 与 原型的对应关系
正则表达式_概念_简介_起源
原生 js 获取 html 是一个 HTML Collection 集合,使用 let 方法可以获得块级作用域
js 对于地址栏中的 URI 的解析
可以直接扫码关注本站
微信扫码关注公众号
回复指定菜单关键词,即可获取相应功能或领取会员福利哦
微信扫一扫,添加好友
添加指定客服微信
咨询相关建站问题,还可获取领取会员福利哦