webGL第七课 —— 平移、旋转和缩放

在图形显示中，图形变换只有平移、旋转和缩放三种情况。他们都是通过矩阵运算获得的。

绘制和变换三角形

如果要绘制很多节点，需要使用缓冲区
使用缓冲区的步骤：
1. 创建缓冲区对象,createBuffer();
2. 绑定缓冲区对象,bindBuffer();
3. 将数据写入缓冲区对象,bindData();
4. 将缓冲区对象赋值给一个attribute变量,(vertexAttribPointer());
5. 开启attribute变量,enableVertexAtrribArray().

• gl_pointSize变量只有在绘制单个顶点时才有效.
• webGL只能绘制点、线段和三角形三种图形，其他所有图形都是在这基础上创建出来的。

移动、旋转和缩放

*webGL和OpenGL系统中，矩阵元素是按照列主序存储在数组中的。
通过矩阵操作实现webGL坐标系中图形的移动、旋转和平移功能

假设P点新坐标使用(x’,y’,z’)表示，旧坐标使用(x,y,z)表示，则旋转的以矩阵形式表示的转换算法如下所示（非webGL坐标系下）：

$$\left[ \begin{matrix} x' \\ y' \\ z' \\ 1 \\ \end{matrix} \right] \tag{1}$$

$$\left[ \begin{matrix} cos\theta & -sin\theta & 0 & 0 \\ sin\theta & cos\theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0& 0 & 0 & 0 \\ \end{matrix} \right] \tag{2}$$

$$\left[ \begin{matrix} x \\ y \\ z \\ 1 \\ \end{matrix} \right] \tag{3}$$

$$(1) = (2)*(3)$$

webGL系统中旋转矩阵为：

$$\left[ \begin{matrix} cos\theta & sin\theta & 0 & 0 \\ -sin\theta & cos\theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0& 0 & 0 & 0 \\ \end{matrix} \right] \tag{4}$$

webGL系统中平移矩阵为：

$$\left[ \begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1& 0 & 0 \\ 0 & 0 & 1 & 0\\ \Delta x & \Delta y & \Delta z & 1\\ \end{matrix} \right] \tag{5}$$

webGL系统中缩放矩阵为：

$$\left[ \begin{matrix} Sx & 0 & 0 & 0 \\ 0 & Sy & 0 & 0 \\ 0 & 0 & Sz & 0\\ 0 & 0 & 0 & 1\\ \end{matrix} \right] \tag{6}$$

**所以，对图形进行旋转、平移和缩放操作的矩阵计算为:
X’ = (6)((5)((4)*X))