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坐标系下）：

⎡⎣⎢⎢⎢x′y′z′1⎤⎦⎥⎥⎥(1)

⎡⎣⎢⎢⎢cosθsinθ00−sinθcosθ0000100000⎤⎦⎥⎥⎥(2)

⎡⎣⎢⎢⎢xyz1⎤⎦⎥⎥⎥(3)

(1)=(2)∗(3)

webGL系统中旋转矩阵为： ⎡⎣⎢⎢⎢cosθ−sinθ00sinθcosθ0000100000⎤⎦⎥⎥⎥(4)

webGL系统中平移矩阵为：
⎡⎣⎢⎢⎢100Δx010Δy001Δz0001⎤⎦⎥⎥⎥(5)

webGL系统中缩放矩阵为：
⎡⎣⎢⎢⎢Sx0000Sy0000Sz00001⎤⎦⎥⎥⎥(6)

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