1. 常量
如果你熟悉 OpenGL，应该对操作常量很熟悉。这些常量在 OpenGL 中的名字通常以 GL_ 开头。而在 WebGL 中，context 对象上的常量则去掉了这个前缀。例如，GL_COLOR_BUFFER_BIT 常量在 WebGL 中要这样访问：gl.COLOR_BUFFER_BIT。WebGL 以这种方式支持大部分 OpenGL 常量（少数常量不支持）。
2. 方法命名
OpenGL 和 WebGL 中的很多方法会包含相关的数据类型信息。接收不同类型和不同数量参数的方法，会通过方法名的后缀体现这些信息。表示参数数量的数字 (1~4) 在先，表示数据类型的字符串 ("f" 表示浮点数，"i" 表示整数) 在后。比如，gl.uniform4f() 的意思是需要 4 个浮点数值参数，而 gl.uniform3i() 表示需要 3 个整数值参数。
还有很多方法接收数组，这类方法用字母 "v" (vector) 来表示。因此，gl.uniform3iv() 就是要接收一个包含 3 个值的数组参数。在编写 WebGL 代码时，要记住这些约定。
3. 准备绘图
准备使用 WebGL 上下文之前，通常需要先指定一种实心颜色清除。为此，要调用 clearColor() 方法并传入 4 个参数，分别表示红、绿、蓝和透明度值。每个参数必须是 0~1 范围内的值，表示各个组件在最终颜色的强度。比如：
gl.clearColor(0, 0, 0, 1); // 黑色
gl.clear(gl.COLOR_BUFFER_BIT);
以上代码把清理颜色缓冲区的值设置为黑色，然后调用 clear() 方法，这个方法相当于 OpenGL 中的 glClear() 方法。参数 gl.COLOR_BUFFER_BIT 告诉 WebGL 使用之前定义的颜色填充画布。通常，所有绘图操作之前都需要先清除绘制区域。
4. 视口与坐标
绘图前还要定义 WebGL 视口。默认情况下，视口使用整个区域。要改变视口，可以调用 viewport() 方法并传入视口相对于元素的 x、y 坐标及宽度和高度。例如，以下代码表示要使用整个元素：
gl.viewport(0, 0, drawing.width, drawing.height);
这个视口的坐标系统与网页中通常的坐标系统不一样。视口的 x 和 y 坐标起点 (0, 0) 表示元素的左下角，向上、向右增长可以用点 (width–1, height–1) 定义。
知道如何定义视口就可以只使用元素的一部分来绘图。比如下面的例子：
// 视口是<canvas> 左下角四分之一区域
gl.viewport(0, 0, drawing.width/2, drawing.height/2);
// 视口是<canvas> 左上角四分之一区域
gl.viewport(0, drawing.height/2, drawing.width/2, drawing.height/2);
// 视口是<canvas> 右下角四分之一区域
gl.viewport(drawing.width/2, 0, drawing.width/2, drawing.height/2);
定义视口的坐标系统与视口中的坐标系统不一样。在视口中，坐标原点 (0, 0) 是视口的中心点。左下角是 (–1, –1)，右上角是 (1, 1)。
如果绘图时使用了视口外部的坐标，则绘制结果会被视口剪切。例如，要绘制的形状有一个顶点在 (1, 2)，则视口右侧的图形会被切掉。
5. 缓冲区
在 JavaScript 中，顶点信息保存在定型数组中。要使用这些信息，必须先把它们转换为 WebGL 缓冲区。创建缓冲区要调用 gl.createBuffer() 方法，并使用 gl.bindBuffer() 方法将缓冲区绑定到 WebGL 上下文。绑定之后，就可以用数据填充缓冲区了。比如：
let buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.5, 1]), gl.STATIC_DRAW);
调用 gl.bindBuffer() 将 buffer 设置为上下文的当前缓冲区。然后，所有缓冲区操作都在 buffer 上直接执行。因此，调用 gl.bufferData() 虽然没有包含对 buffer 的直接引用，但仍然是在它上面执行的。上面最后一行代码使用一个 Float32Array（通常把所有顶点信息保存在 Float32Array 中）初始化了 buffer。如果想输出缓冲区内容，那么可以调用 drawElements() 方法并传入 gl.ELEMENT_ARRAY_BUFFER。
gl.bufferData() 方法的最后一个参数表示如何使用缓冲区。这个参数可以是以下常量值：
gl.STATIC_DRAW: 数据加载一次，可以在多次绘制中使用。gl.STREAM_DRAW: 数据加载一次，只能在几次绘制中使用。gl.DYNAMIC_DRAW: 数据可以重复修改，在多次绘制中使用。
除非是很有经验的 OpenGL 程序员，否则我们会对大多数缓冲区使用 gl.STATIC_DRAW。
缓冲区会一直驻留在内存中，直到页面卸载。如果不再需要缓冲区，那么最好调用 gl.deleteBuffer() 方法释放其占用的内存：
gl.deleteBuffer(buffer);
