阅读 293

WebGL第十二课:向量的线性组合

本文标题:WebGL第十二课:向量的线性组合
复制代码

上次课中,我们讲述了向量的定义,和两个针对向量的操作:

  • 加法
  • 数乘

我们根据这两个操作,延伸出一个新的操作: 向量的线性组合

根据向量就是一堆数,竖着写出来,这句话,可以得知,只要我们把平面上的点的坐标,竖着写,就是向量:
A点(-0.5, 0.5), B点(0.5, 0.5) 用向量表示法就是:

12-1.png

我们将这两个向量进行加法操作,会得到一个新的向量C:
C = A + B ,如下图:

12-2.png

那么C点的意义是什么呢,我们观察一下三个坐标在图中的情况:

12-3.png

😯,我们完全观察不到什么有用的意义,对于C点。
但是向量加法一定是有他的含义的,我们一定要找出来。


我们假设A和B是两个地点,A代表家的位置,B代表公司的位置。

然后小明要从A到B,假设小明已经走到了D点。如下图:

12-4.png

然后小明又走到了E点。如下图:

12-5.png

那很显然,我们需要一个算式来表示D或者E的坐标,换一句更通用的话:
我们需要一个算式来表示,AB中间任意一点 F 的坐标。
基于最自然的想法,这个算式,肯定和A B两点都有关系。

不绕圈子了,现给出下面的式子:

F = A * (1-t) + B * t; // 0 <= t <= 1

不妨来分析一下上面的式子:

  • 第一部分 A * (1-t) , 其实就是 A 这个向量和一个数字1-t数乘操作。
  • 第二部分 B * t , 其实 就是 B 这个向量和一个数字t数乘操作。
  • 然后,将两部分 使用 加法操作, 合并成最终的向量F

再大白话一点,就是A乘以一个数,加B乘以一个数
我们先不分析 F 为什么就一定在 AB 之间。我们先给出线性组合的定义:

  • 向量的线性组合: 一堆向量放在一起,每一个向量乘以一个数,然后将所有的向量加起来,就叫做这一堆向量的线性组合。
1. 每一个向量乘以的数字,不用相同,完全独立。
2. 不能所有数字都是0,如果都是0,最后结果肯定是 0 向量,没啥意思。
3. 一堆向量的线性组合,结果还是一个向量。
4. 所有的乘数,统称为系数。
复制代码
分析一下系数对于线性组合结果的影响

现在再次列出刚才的F算式:

F = A * (1-t) + B * t; // 0 <= t <= 1

在这个例子里,系数依次是 1-tt,并且t的范围限制在[0,1]之间。
我们不妨让 t = 0,看看结果是什么,如下图:

12-6.png
我们发现刚好就是 A 点本身。

我们再让 t = 1,看看会发生什么:

12-7.png
刚好就是 B 点。

我们由此可以大胆猜测: 如果让 t 0 1 ,慢慢改变,那么 F 点就是从 A B,慢慢移动过去。自然的,F点肯定会在 A B 之间的线段上。

上面的结果很有意思,一般的,我们把 F 这个式子,称之为 线性插值公式
大概就是在说,AB,中间插一脚,的意思吧。。。

插值公式本身,就是一个特殊的线性组合而已,特殊性在于系数的选取和范围的固定。
但是千万不要认为,线性组合就一定要把系数搞到一种特定的范围里,这是错的。
系数可以随便取, 谨记~
复制代码

上面说了,并不一定所有的线性组合都有什么特殊含义。 只有某些线性组合才有实际用处,例如插值公式

再来看两个向量的加法,我们一开始 A + B = C,得到 C 之后,就把 C 晾在那里,没分析这个到底有什么用,对吧。

我们重写这个式子如下:
C = 1 * A + 1 * B
根据线性组合的概念来讲,向量相加,本身就是一种线性组合,怎么组合呢,就是系数都取1
从这个角度来讲,其实已经讲到头了,那么 C 点本身的含义,不在此节课范围,后面的课程会接着说。

最后出一个思考题,请简述下面的线性组合,会得出什么样的结果:

G = x * A + y * B; // x ∈ [0, 1] , y ∈ [0, 1]

注意,x和y没什么关联性,可以独立变化,不过都在[0, 1] 范围内。
复制代码



正文结束,下面是答疑
复制代码
小能能说,我已经看穿了最后一个公式的效果了,如下图:
  • 答:

12-8.png

G 的坐标应该坐落在这个涂色区域内部,对吧,嘎嘎嘎。

文章分类
前端
文章标签