WebGL中缓冲区对象的使用方法

 使用缓冲区对象向顶点着色器传入多个顶点数据，需要遵循以下五个步骤。

• 1. 创建缓冲区对象 gl.createBuffer() -- 删除缓冲区对象 gl.deleteBuffer()

gl.createBuffer() 创建缓冲区对象，返回创建成功的对象或者 null
gl.deleteBuffer(buffer) 传入缓冲区对象buffer，意为删除缓冲区对象

• 2. 绑定缓冲区对象 gl.bindBuffer()

gl.bindBuffer(target, buffer);
    target 参数可以是下面中的一个
        gl.ARRAY_BUFFER 表示缓冲区对象中包含了顶点的数据
        gl.ELEMENT_ARRAY_BUFFER 表示缓冲区对象中包含了顶点的索引值
    buffer 指定之前由gl.createBuffer返回的待绑定的缓冲区对象
该方法将缓冲区对象绑定到ARRAY_BUFFER 上或者 ELEMENT_ARRAY_BUFFER 上，两种择其一，规定后面读缓冲器中数据的方式

• 3. 将数据写入缓冲区对象 gl.bufferData()

gl.bufferData(target, data, useage)
    target, gl.ARRAY_BUFFER 或 gl.ELEMENT_ARRAY_BUFFER 中的一个，意思与上文相同
    data, 要写入的数据
    useage, 表示程序将如何使用缓冲区对象中的数据，该参数将帮助WebGL优化操作，但是及时传入错误的值也不影响程序，只是会降低程序效率，取以下值
        gl.STATIC_DRAW, 只会向缓冲区对象写入一次数据，但需要绘制很多次
        gl.STREM_DRAW, 只会向缓冲区对象写入一次数据，然后绘制若干次
        gl.DYNAMIC_DRAW, 会向缓冲区对象多次写入数据，并绘制很多次

• 4. 将缓冲区对象分配给一个 attribute 变量 gl.vertexAttribPointer()

gl.vertexAttribPointer(location, size, type, normalized, stride, offset)
    location, 指定待分配给attribute 变量的存储位置
    size, 指定缓冲区中每隔顶点的分量个数（1到4），缺失按照gl.vertexAttrib[1234]f() 方法自动补齐
    type, 用以下类型之一来指定数据格式：
        gl.UNSIGNED_BYTE, 无符号字节 UInt8Array
        gl.SHORT, 短整型， Int16Array
        gl.UNSIGNED_SHORT, 无符号短整型, UInt16Array
        gl.INT, 整型, Int32Array
        gl.UNSINGED_INT, 无符号整型，UInt32Array
        gl.FLOAT, 浮点型，Float32Array
    normalize, 传入true 或者 false 表明是否将非浮点型的数据归一化到 [0, 1] 或 [-1, 1] 区间
    stride, 指定相邻两个顶点间的字节数，默认为0 
    offset, 指定缓冲区对象中的偏移量（以字节为单位），即attribute 变量从缓冲区中的何处开始存储，如果是从起始位置则传入0
这个方法与 gl.vertexAttrib[1234]f() 方法差不多，都是向变量中存入数据，只是该方法可以指定缓冲区对象的地址存入到指定的 attribute 变量中。

• 5. 开启attribute 变量 gl.enableVertexAttribArray()

gl.enableVertexAttribArray(location)
    location, 指定attribute 变量的存储位置
该方法开启 attribute 变量，使WebGL（准确的说是顶点着色器）可以使用缓冲区的的数据
gl.diableVertexArray(location)
    location, 同上，指定要关闭的 attribute 变量