javascript七基础学习系列二千一百七十：缓冲区

在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);
错误
与JavaScript 多数情况下不同的是，在WebGL 操作中通常不会抛出错误。必须在调用可能失败的方
法后，调用gl.getError()方法。这个方法返回一个常量，表示发生的错误类型。下面列出了这些常量。
 gl.NO_ERROR：上一次操作没有发生错误（0 值）。
 gl.INVALID_ENUM：上一次操作没有传入WebGL 预定义的常量。
 gl.INVALID_VALUE：上一次操作需要无符号数值，但是传入了负数。
 gl.INVALID_OPERATION：上一次操作在当前状态下无法完成。
 gl.OUT_OF_MEMORY：上一次操作因内存不足而无法完成。
 gl.CONTEXT_LOST_WEBGL：上一次操作因外部事件（如设备掉电）而丢失了WebGL 上下文。
每次调用gl.getError()方法会返回一个错误值。第一次调用之后，再调用gl.getError()可
能会返回另一个错误值。如果有多个错误，则可以重复这个过程，直到gl.getError()返回
gl.NO_ERROR。如果执行了多次操作，那么可以通过循环调用getError()：
let errorCode = gl.getError();
while (errorCode) {
console.log("Error occurred: " + errorCode);
errorCode = gl.getError();
}
如果WebGL 代码没有产出想要的输出结果，那么可以调用几次getError()，这样有可能帮你找到问题所在。
着色器
着色器是OpenGL 中的另一个概念。WebGL 中有两种着色器：顶点着色器和片段（或像素）着色器。
顶点着色器用于把3D 顶点转换为可以渲染的2D 点。片段着色器用于计算绘制一个像素的正确颜色。
WebGL 着色器的独特之处在于，它们不是JavaScript 实现的，而是使用一种与C 或JavaScript 完全不同
的语言GLSL（OpenGL Shading Language）写的。