WebGL第十七课：直角坐标系中的拉伸详解｜ 8月更文挑战

本文标题：WebGL第十七课：直角坐标系中的拉伸详解｜ 8月更文挑战
复制代码

引子

我们在搞图形学的时候，经常有这种需求，将一个物体拉伸，这又可以分成三个方向。
x y z 方向都可以分别独立进行拉伸操作。

这没问题。问题就是，我们如何实现拉伸？拉伸的本质到底是什么？

拉伸这个说法不好

为什么说拉伸这个说法不好，因为他太业务性了。其实我们做的是什么呢？我们用x方向的拉伸来做例子：

我们现在只考虑二维的情况，也就是只有 x y 轴。

我们要画一百个点，也就是说，我们已经事先准备好了一百个点的坐标，然后我们在x方向进行拉伸，拉伸系数是2。

这句话的意思就是说：
所有的点坐标，将里面的 x 变成原来的 2 倍。

诸位细想一下这个效果，如果你的一百个点都分布在原点周围，不怎么有太大的偏向，那么我们最后的结果，就会是我们想象中的拉伸效果；

但是，如果这一百个点，都分布在原点的某一边，或者都分布在某一个象限里，那么最后的结果，可能很奇怪，不符合我们想象中的拉伸效果。

看下面这个图：

我们传入WebGL的正方形的所有的点，都在第一象限，当我们拉伸x方向时，除了会有一个拉伸的效果，还给我们另外一个假象：
就是整个正方形都在往右移动，这显然不是我们想象中的拉伸效果。

所以当我们提到拉伸的时候，我们要以计算的过程为主要的思维：

那就是，某个轴的坐标，乘以了一个系数，仅此而已。

用向量数乘来表达拉伸

这个也很简单：

$\left(\begin{array}{cc} 1\\ 2\end{array}\right) * 2 = \left(\begin{array}{cc} 2\\ 4\end{array}\right)$

上面这个式子，就是说，一个点 (1, 2), x坐标和y坐标都变成原来的2倍，得到了 点(2, 4)。

这里就有一个问题了，如果我只想搞一个方向的拉伸，能用向量数乘来表达吗？

答案是否定的。

真正的拉伸，必须要用向量的线性组合，也就是让一个矩阵乘以一个向量。不理解这句话的请翻到前面的课程，看一下向量的线性组合和矩阵的关系。

至于具体的矩阵怎么写，后面的课程再详细介绍，这里先不提。

一个实际例子

小明家A(1,2)点
学校B(5,6)点
小刚说，小明啊，我家正好在你家和学校之间的连线上，我家到你家的距离刚好是我家到学校距离的2倍。

请问，小刚家的坐标能算出来吗？

解答: 设小刚家坐标是C点，坐标是
$\left(\begin{array}{cc} x\\ y\end{array}\right)$
小明到小刚家的位移算出：
$\left(\begin{array}{cc} x-1\\ y-2\end{array}\right)$
小刚到学校的位移算出：
$\left(\begin{array}{cc} 5-x\\ 6-y\end{array}\right)$

根据小刚的描述：

$\left(\begin{array}{cc} 5-x\\ 6-y\end{array}\right) * 2 = \left(\begin{array}{cc} x-1\\ y-2\end{array}\right)$

小学学过，这个方程组解得：
x = $\frac{11}{3}$
y = $\frac{14}{3}$

如下图：

正文结束，下面是答疑
复制代码

小丫丫问到，为什么我们在游戏引擎里，拉伸就是我们想象中的拉伸呢？

• 答：因为建模的人，给出的模型的点的坐标，基本上不会太偏，基本上都在原点周围，比较均匀。