五、绘制多个点前面章节所述描述点的方式在绘制多个点时会显得繁琐冗余，本节介绍的方式可通过缓冲区对象同时绘制多个点。 We

一、介绍

前面章节所述描述点的方式在绘制多个点时会显得繁琐冗余，本节介绍的方式可通过缓冲区对象同时绘制多个点。
缓冲区对象是WebGL系统中的一块内存区域，可一次性向着色器传入多个顶点的数据； WebGL使用的是颜色缓冲区，WebGL系统中的绘制操作实际上是在颜色缓冲区中绘制的，绘制结束后，系统将缓冲区中的内容显示在屏幕上，然后颜色缓冲区充值，内容丢失，这是默认操作。

二、关键代码

function main() {
    ···
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }
    #设置点的坐标信息
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the positions of the vertices');
        return;
    }
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
    #录入三个点的坐标信息
    var vertices = new Float32Array([
        0.0, 0.5,   -0.5, -0.5,   0.5, -0.5
    ]);
    #顶点数量
    var n = 3; 

    #（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);
    
    #获取attribute变量的存储位置
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

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

    #（5）连接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    return n;
}

内置方法说明

1、 gl.createBuffer()

用于创建缓冲区对象

gl.deleteBuffer(buffer)
删除缓冲区对象

2、gl.bindBuffer(target, buffer)

用于将缓冲区对象绑定到WebGL系统中已存在的目标上
“目标”表示缓冲区对象的用途（此处为向顶点着色器提供传给attribute变量的数据）

参数：

1、target可选值：
（1）gl.ARRAY_BUFFER 缓冲区对象包含了顶点的数据
（2）gl.ELEMENT_ARRAY_BUFFER 缓冲区对象包含了顶点的索引值
2、buffer 如为null，禁用对target的绑定

3、 gl.bufferData(target, data, usage);

开辟存储空间，向绑定在target上的缓冲区对象中写入数据data

参数：

1、target可选值：
（1）gl.ARRAY_BUFFER 缓冲区对象包含了顶点的数据
（2）gl.ELEMENT_ARRAY_BUFFER 缓冲区对象包含了顶点的索引值
2、data 类型化数组
3、usage 表示程序如何使用存储在缓冲区对象中的数据
（1）gl.STATIC_DRAW 只向缓冲区对象中写入一次数据，绘制多次
（2）gl.STREAM_DRAW 只向缓冲区对象中写入一次数据，绘制若干次
（3）gl.DYNAMIC_DRAW 向缓冲区对象中多次写入数据，绘制多次

注

我们不能直接向缓冲区写入数据，只能向目标写入，所以要向缓冲区写数据，必须先绑定

4、 gl.vertexAttribPointer(location, size, type, normalize, stride, offset);

将缓冲区对象分配给attribute变量（缓冲区对象的引用/指针）
gl.vertexAttrib[1234]f一次只能分配一个值
gl.vertexAttribPointer()将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给有location指定的attribute变量

参数：

1、location：存储位置
2、size：指定缓冲区中每个顶点的分量个数（1-4）（自动补全）
3、type: 指定数据格式

类型	数据格式	符号
gl.UNSIGNED_BYTE	无符号字节	UInt8Array
gl.SHORT	短整型	Int16Array
gl.UNSIGNED_SHORT	无符号短整型	UInt16Array
gl.INT	整型	Int32Array
gl.UNSIGNED_INT	无符号整型	UInt32Array
gl.FLOAT	浮点数	Float32Array

4、normalize : true/false
是否将非浮点型数据归一到[0, 1]或[-1, 1]区间
5、stride :
指定相邻两顶点间的字节数，默认为0
4、normalize :
指定缓冲对象中的偏移量（字节为单位）即attribute变量从缓冲区中何处开始存储

5、 gl.enableVertexAttribArray(location);

开启location指定的attribute变量
处理的对象是缓冲区

注

开启attribute变量之后，就不能再用gl.vertexAttrib[1234]f()向它传递数据，除非显式关闭该attribute变量

三、类型化数组

1、为优化大量相同类型数据的数组，引入类型化数组

类型	每单元所占字节数	描述
Int8Array	1	8位整型数
UInt8Array	1	8位无符号整型数
Int16Array	2	16位整型数
UInt16Array	2	16位无符号整型数
Int32Array	4	32位整型数
UInt32Array	4	32位无符号整型数
Float32Array	4	单精度32位浮点数
Float64Array	8	双精度64位浮点数

2、类型化数组的方法属性和常量

get(Index)
set(Index, value)
set(array, offset)：从第offset个元素开始将array的值填进去
length
BYTES_PER_ELEMENT 数组中每个元素所占字节数\

3、创建类型化数组

使用new运算符
不能用[](普通数组)

var vertices = new Float32Array([
    0.0, 0.5,   -0.5, -0.5,   0.5, -0.5
]);

var vertices = new Float32Array(4);

五、绘制多个点