平移
平移一个三角形，你需要对顶点坐标的每个分量(x和y)，加上三角形在对应轴（如X轴或Y轴）上平移的距离。比如，将点p(x, y, z)平移到p’(x’, y’, z’)，在X轴、Y轴、Z轴三个方向上平移的距离分别为Tx，Ty，Tz，其中Tz为0，如下图所示。
那么在坐标的对应分量上，直接加上这些T值，就可以确定p’的坐标了，如下所示。
x’= x +Tx
y’ = y + Ty
z’=z+Tz

我们只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现上面的等式。显然，这是一个逐顶点操作，上述修改应当发生在顶点着色器，而不是片元着色器中。
修改代码时，将平移距离Tx、Ty、Tz的值传入顶点着色器，然后分别加在顶点坐标的对应分量上，再赋值给gl_Position。下面看看修改后的示例程序。


旋转
旋转比平移稍微复杂一些，为了描述一个旋转,你必须指明:
●旋转轴(图形将围绕旋转轴旋转)。
●旋转方向(方向:顺时针或逆时针)。
●旋转角度(图形旋转经过的角度)。
设点p(x， y, z)旋转β角度之后变为了点p ‘(x ’ , y ‘,z’):首先旋转是绕Z轴进行的，所以z坐标不会变，可以直接忽略﹔然后，x坐标和y坐标的情况有一些复杂，如下图：
在图3.22中，r是从原点到点p的距离，而α是X轴旋转到点p的角度。用这两个变量计算出点p的坐标，如下所示：
x = rcosα
y = rsinα
类似地，你可以使用r、α、β来表示点p’的坐标,再经过一系列装换得到最终等式，如下所示:
x’= r cos (α +β)
y’= r sin (α +β)
===>
x’ = r (cosα cos β - sinα sin β)
y’ = r (sinα cos β + cosα sin β)
===>
x’= x cos β - y sin β
y’= x sin β + y cos β
z’=z
同样，对于旋转操作来讲，也是在顶点着色器上操作，修改程序如下：

如上，在定义变量u_cosB和u_sinB时，之所以使用uniform变量，是因为这两个变量的值与顶点无关。

变换矩阵:旋转
如果图形经过旋转在平移这种复杂操作后，我们如果按上面所示计算，就会很复杂，所以我们就引入变换矩阵，他也是后续对于图形变换操作的基础。
假设有一个如下的矩阵，同矢量(x,y,z)，经过相乘后得到一个新的矢量（x’,y’,z’）：(注意：矩阵和矢量相乘不符合乘法的分配率，AxB不等于BxA的)

在本例中，矩阵与矢量相乘得到的新矢量，其三个分量为x’、y’、z，其值如下所示。注意，只有在矩阵的列数与矢量的行数相等时，才可以将两者相乘。
x’ = ax + by + cz
y’ = dx + ey + fz
z’ = gx + hy + iz
现在，为了理解矩阵是如何代替数学表达式的，下面将矩阵等式与数学表达式进行比较。

将结果带入，可得新的矢量（x’,y’,z’)如下：

这个矩阵就被称为变换矩阵,因为它将右侧的矢量(x, y,z)“变换”为了左侧的矢量(x ', y ‘, z’)。上面这个变换矩阵进行的变换是一次旋转，所以这个矩阵又可以被称为旋转矩阵。

4*4的旋转矩阵


变换矩阵:平移


变换矩阵:缩放


我们在数组中存储矩阵的每个元素，但问题是:矩阵是二维的，其元素按照行和列进行排列，而数组是一维的，其元素只是排成一行。这里，我们可以按照两种方式在数组中存储矩阵元素:按行主序和按列主序，webGL和OpenGL一样，矩阵元素是按列主序存储在数组中的。如下图：

看到这里大家应该对图形的变化有了一定的了解，那就用这些变化去实现复杂的变换效果吧。