深入浅出WEBGL - 02 - 线性变换

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

本文发布在专栏深入浅出webgl 中, 点击查看目录

如没有看过上一章: 深入浅出WEBGL - 01 - 点、向量、矩阵建议查看

点的运动 - 向量

首先我们来说明一下点的运动这件事情。

在某坐标系下的点和向量都可以用一个竖着写的 $[\begin{matrix} x \\ y \\ z \end{matrix}] \left[ \begin{matrix}x \\ y \\ z\end{matrix} \right]$ ⎣⎢⎡xyz⎦⎥⎤ 去表示，当然二维点或向量是 $[\begin{matrix} x \\ y \end{matrix}] \left[ \begin{matrix}x \\ y \end{matrix} \right]$ [xy] 去表示的。向量表示的是一个点的运动方向的，所以一个向量是具有长度和方向的。而点的坐标仅仅表示在某个坐标系下一个具体的位置。

怎么理解向量是点的运动呢？这里我们回顾一下上篇文章中的一些运算:

$\tilde{p} \tilde p$ p~ + $\vec{v} \vec v$ v

这代表这个点沿着这个向量的方向移动, 移动距离为向量的长度, 例如:

点 $[\begin{matrix} 1 \\ 1 \end{matrix}] \left[ \begin{matrix}1 \\ 1 \end{matrix} \right]$ [11] + 向量 $[\begin{matrix} 2 \\ 1 \end{matrix}] \left[ \begin{matrix}2 \\ 1 \end{matrix} \right]$ [21] 得到的是点 $[\begin{matrix} 3 \\ 2 \end{matrix}] \left[ \begin{matrix}3 \\ 2 \end{matrix} \right]$ [32]

深入浅出WEBGL - 02 - 线性变换

${\tilde{p}}_{1} \tilde p_1$ p~1 - ${\tilde{p}}_{2} \tilde p_2$ p~2

这个结果得到的是一个向量, 向量的方向是从 $点_{2} 点_2$ 点2指向 $点_{1} 点_1$ 点1

${\vec{v}}_{1} \vec v_1$ v1 + ${\vec{v}}_{2} \vec v_2$ v2

得到的结果是一个新的向量, 即两个代表点运动的向量相加得到了全新的一个代表点运动的向量, 新向量的运动结果跟之前两个向量代表的运动结果的叠加是相同的:

深入浅出WEBGL - 02 - 线性变换

向量的点积

向量的点积公式:

{\vec{v}}_{1} \cdot {\vec{v}}_{2} = ∣ ∣ {\vec{v}}_{1} ∣ ∣ * ∣ ∣ {\vec{v}}_{2} ∣ ∣ * c o s (θ) \vec v_1·\vec v_2 = ||\vec v_1|| * ||\vec v_2|| * cos(\theta)

v1⋅v2=∣∣v1∣∣∗∣∣v2∣∣∗cos(θ)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。