使用WebGL的方便之处在于，无需搭建开发环境，只要有一个支持WebGL的浏览器就可以了。
着色器
用WebGL绘图必须使用着色器。分为两种：
顶点着色器
顶点是指二维或三维空间中的一个点，例如二维或三维图形的端点或交点。顶点着色器就是用来描述顶点特性（如：位置、颜色）的程序。
示例如下：
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标
gl_PointSize = 10.0; // 设置点的尺寸
}片元着色器
片元是显示在屏幕上的一个像素，严格说来，片元包括这个像素的位置、颜色和其它信息。片元着色器就是进行逐片元处理的程序。示例如下：
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
}总结，顶点着色器控制点的位置和大小，片元着色器控制点的颜色。
数据传输
将数据从应用程序传给着色器有两种方式：attribute和uniform。
attribute传输与顶点相关的数据，只能在顶点着色器中使用；uniform传输对于所有顶点都相同(或者说与顶点无关)的数据，适用于顶点着色器和片元着色器。
顶点坐标适合用attribute传输，因为不同的顶点具有不同的坐标。
WebGL常用方法
- gl.clearColor(r,g,b,a) 指定绘图区域的背景色。
- gl.clear(gl.COLOR_BUFFER_BIT) 用之前指定的背景色清空绘图区域，实际上就是清空颜色缓冲区。
- gl.drawArrays(mode,first,count) 按指定参数绘制图形。mode参数有：gl.POINTS，gl.LINES，gl.TRIANGLES等。
- gl.getAttribLocation 获取
attribute变量的存储位置。 - gl.vertexAttribXX 将数据传输给
attribute变量。 - gl.getUniformLocation 获取
uniform变量的存储位置。 - gl.uniformXX 将数据传输给
uniform变量。
缓冲区对象（buffer object）
是WebGL系统中的一块内存区域，前面所说的vertexAttribXX方法一次只能传输一个点，而通过缓冲区对象，可以一次性填充大量顶点数据，保存其中，供着色器使用。
var vertices = new Float32Array([0.0, 0.5, -0.5, ...]);
// 创建缓冲区对象
var vertexBuffer = gl.createBuffer();
// 将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓冲区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 将缓冲区对象分配给一个 attribute 变量（a_Position）
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 开启 attribute 变量（连接a_Position变量与分配给它的缓冲区对象）
gl.enableVertexAttribArray(a_Position);类型化数组
JS通用的数组Array是弱类型，既可以存储数字也可以存储字符串。为了优化性能，WebGL引入了一种类型化数组，Float32Array就是其中之一，这样WebGL事先知道数组中的数据类型，存取起来就会更有效率。
WebGL很多操作都使用类型化数组，比如 gl.bufferData 的第2个参数 data。通常用来存储顶点的坐标或颜色数据。