绘制多个顶点

使用缓冲区对象

1. 创建缓冲区对象

   var vertexBuffer = gl.createBuffer();if(!vertexBuffer) {console.log('Failed to create the buffer object ');return -1;
   }

2. 绑定缓冲区对象
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

3. 将数据写入缓冲区对象
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

4. 将缓冲区对象分配给一个attribute变量
   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

5. 开启attribute变量
   gl.enableVertexAttribArray(a_Position);

类型化数组

使用类型化数组存储大量相同类型的数据，比如顶点的坐标和颜色数据。

var vertices = new Float32Array{[0.0,0.5,-0.5,-0.5,0.5,-0.5]};

使用drawArrays()函数绘制图形

第一个参数是代表不同的绘制图形的方式。

以上顺序的绘制图形效果如下所示:

图形的移动

利用表达式实现移动

//顶点着色器
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'uniform vec4 u_Translation;\n' +'void main() {\n' +' gl_Position = a_Position + U_Translation;\n' +'}\n';
var Tx = 0.5,Ty = 0.5,Tz = 0.0;
...
function main()
{var u_Translation = gl.getUniformLocation(gl.program,'u_Translation');...gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);
}

即相同类型的变量之间的赋值操作，通过a_Position和u_Translation之间相加传给gl_Position;在gl.uniform4f最后一个分量为0.0的原因是这是一个平移矢量，不是一个点，因此在齐次坐标中最后一个分量是0.0；

通过以上代码后每次调用gl.drawArrays(gl.TRIANGLES,0,n)执行顶点着色器都会执行以下三步：

1. 将顶点坐标传给a_Position；
2. 向a_Position加上u_Translation；
3. 结果赋值给gl_Position；

利用旋转矩阵实现移动

图形的旋转

描述一个旋转需要指明

1. 旋转轴
2. 旋转方向
3. 旋转角度

利用表达式实现旋转

//顶点着色器
var VSHADER_SOURCE =
//x' = x cos b - y sin b
//y' = y sin b + y cos b
//z' = z'attribute vec4 a_Position;\n' +'uniform float u_CosB,u_SinB;\n' +'void main() {\n' +' gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n'+' gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+'}\n';var angle = 90.0;
...
function main()
{var radian = Math.PI * angle / 180.0;//转为弧度制var cosB = Math.cos(radian);var sinB = Math.sin(radian);var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');...gl.uniform1f(u_CosB,cosB);gl.uniform1f(u_SinB,sinB);
}

利用变换矩阵实现旋转

三阶矩阵实现

四阶矩阵（保持和移动阶数相同）

使用变换矩阵程序代码（旋转）

//顶点着色器
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'uniform mat4 u_xformMatrix;\n' +//变换矩阵的定义,使用mat4表示4阶'void main() {\n' +' gl_Position = u_xformMatrix * a_Position;\n' +'}\n';var angle = 90.0;
...
function main()
{var radian = Math.PI * angle / 180.0;//转为弧度制var cosB = Math.cos(radian);var sinB = Math.sin(radian);var xformMatrix = new Float32Array{[cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0]};...var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');...gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
}

WebGL中矩阵元素是按照列主序存储在数组中的。

如[a,e,i,m,b,f,i,n,c,g,k,o,d,n,l,p]排序：

平移的变换矩阵实现代码和旋转类似。

图形的缩放

利用变换矩阵实现

代码和上述旋转代码类似。