webgl2之VBO，VAO的 创建

1. 创建一个vbo，删除一个vbo

    //创建一个vbo
    const vbo  = gl.createBuffer();
    //删除一个vbo
    gl.deleteBuffers(vbo)

2. 创建一个vao，把vbo的描述信息添加到vbo

  let positions = new Float32Array([
        -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,
        0.0, 0.5, 0.0,
    ])

     // 创建vao
     const vao = gl.createVertexArray();
     // 绑定vao
     gl.bindVertexArray(vao)
     let FSIZE = positions.BYTES_PER_ELEMENT // Float32 Size = 4
     // 1.创建posVbo
     const posVbo = gl.createBuffer()
     // 2.绑定当前vbo，到状态机的当前vbo插槽上
     // gl.ARRAY_BUFFER：表示当前vbo这个插槽
     gl.bindBuffer(gl.ARRAY_BUFFER, posVbo)
     // 3.向当前vbo传输数据，也是在开辟显存
     gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
     // 4.将位置属性的描述信息加入vao当中
     gl.enableVertexAttribArray(0)
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, FSIZE * 3, 0)
     // 5.解绑vao
     gl.bindVertexArray(null)

3.vbo与多属性数据的存储

// SingleBuffer：每一个属性放在一个单独的vbo当中
function prepareSingleBuffer() {
	//1 准备顶点位置数据与颜色数据
    let positions = new Float32Array([
        -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,
        0.0, 0.5, 0.0,
    ])
	let colors = new Float32Array([
	   1.0, 0.0, 0.0,
	   0.0, 1.0, 0.0,
	   0.0,  0.0, 1.0
	])
    let FSIZE = positions.BYTES_PER_ELEMENT
    // 1.为位置&颜色数据各自生成一个vbo
     const posVbo = gl.createBuffer()
     const colorVbo = gl.createBuffer()
     // 2.给两个分开的vbo各自填充数据
     gl.bindBuffer(gl.ARRAY_BUFFER, posVbo)
     gl.bindBuffer(gl.ARRAY_BUFFER, colorVbo)
     // 3.向当前vbo传输数据，也是在开辟显存
     gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
     gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)

     //3 生成vao并且绑定
	// 创建vao
    const vao = gl.createVertexArray();
    // 绑定vao
    gl.bindVertexArray(vao)

	//4 分别将位置/颜色属性的描述信息加入vao当中
	//4.1描述位置属性
	gl.bindBuffer(gl.ARRAY_BUFFER, posVbo);//只有绑定了posVbo，下面的属性描述才会与此vbo相关
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, FSIZE * 3, 0)

	//4.2 描述颜色属性
	gl.bindBuffer(gl.ARRAY_BUFFER, colorVbo);
	gl.enableVertexAttribArray(1);
	gl.vertexAttribPointer(1, 3, gl.FLOAT, false, FSIZE * 3, 0);

    gl.bindVertexArray(null);
}