WebGL 图形变换理论篇

齐次坐标

简介

说到图形的几何变换，就离不开“齐次坐标”这个神奇的东西，所谓“齐次坐标”，就是将一个原本n维的向量用一个n+1维的向量来表示。比如向量：$(x_1,x_2,...,x_n)$ 的齐次坐标可表示为： $(h{x}_1,h{x}_2,...,h{x}_n,h)$。

其中h是一个实数。显然一个向量的齐次坐标的表示是不唯一的，齐次坐标中的h取不同的值都表示的是同一个点，例如齐次坐标[8, 4, 2], [4, 2, 1]表示的都是二维点(2, 1)。

优势

1. “齐次坐标”提供了用矩阵运算把二维、三维甚至更高维空间中的一个点集从一个坐标变换到另一个坐标系的有效方法；
2. 其次还可以表示无穷远的点，n+1维的“齐次坐标”中如果h=0，实际上就表示了n维空间的一个无穷远的点。对于“齐次坐标”[a, b, h]，保持a和b不变，h -> 0的过程就表示了二维坐标系中的一个点沿着直线ax + by = 0逐渐走向无穷远处的过程。

解释一下：在笛卡尔坐标中无穷远处的点表示为(∞, ∞)，而一个实数除以0是趋向于∞的，所以在“齐次坐标”中(1/h, 2/h, h )当h -> 0时，齐次坐标表示的点也趋向于无穷。

二维图形的几何变换

图形的几何变换主要包括：平移、缩放、旋转三种最基本的变换形式；其中有比较特殊的如对称变换、错切变换、复合变换等。下面将会对以上的变换方式进行逐一的介绍。

在介绍之前要先说一下“二维齐次坐标变换”的矩阵形式：

$$\left[\begin{array}{cccc}a& b& |& c\\ d& e& |& f\\ -& -& |& -\\ g& h& |& i\end{array}\right]$$

将矩阵分为4部分，第一部分[a, b, d, e]可以控制图形的缩放、旋转、对称和错切的变换；[c, f]是对图形进行平移变换；[g, h]是对图形作投影变换；[i]则是控制图形整体的缩放变换。

以下几何变换都会采用齐次坐标进行运算。

平移变换

平移变换是将坐标的[x, y]进行加法运算，平移由[c, f]进行控制：

$$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\\ 1\end{array}\right]=\left[\begin{array}{c}1,0,t_x\\ 0,1,t_y\\ 0,0,1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}x+t_x,\\ y+t_y,\\ 1\end{array}\right]=T(t_x,t_y)\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

如图：

缩放变换

缩放变换是对坐标进行一定比例的缩放，由[a, b, d, e]控制：

$$\left[\begin{array}{c}{x}^{\prime }\\ y^{\prime }\\ 1\end{array}\right]=\left[\begin{array}{c}{s}_x,0,0\\ 0,s_y,0\\ 0,0,1\end{array}\right]\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]=\left[\begin{array}{c}{s}_x\ast x\\ s_y\ast y\\ 1\end{array}\right]=S(s_x,s_y)\left[\begin{array}{c}x\\ y\\ 1\end{array}\right]$$

如图：

旋转变换

在直角坐标平面中，将二维图形绕原点旋转θ角的变换形式如下：

[ x ′ y ′ 1 ] = [ c o s θ , − s i n θ , 0 s i n θ , c o s θ , 0 0 , 0 , 1 ] [ x y 1 ] = [ x c o s θ − y s i n θ x s i n θ + y c o s θ 1 ] = R ( θ ) [ x