【webgl】 buffer的使用

什么是缓冲区对象

webgl提供一种很方便的机制 ，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。

为什么用缓冲区

如果没有用缓冲区，然后循环遍历 数组列表，位置传递到顶点着色器， 然后去绘制顶点 就像下面代码一样循环一次，绘制一次。

function render() {
      gl.clear(gl.COLOR_BUFFER_BIT);
      a_points.forEach(({ x, y }) => {
        gl.vertexAttrib2f(a_Position, x, y);
        gl.drawArrays(gl.POINTS, 0, 1);
      });
    }

使用缓冲区

1. 第一步：创建缓冲区对象（gl.createBuffer()）
   // 删除缓冲区对象gl.deleteBuffer(buffer)
2. 第二步：绑定缓冲区对象（gl.bindBuffer()）
3. 第三步：将数据写入缓冲区对象（gl.bufferData()）
4. 第四步：将缓冲区对象分配给一个attribute变量（gl.vertexAttribPointer()）
5. 第五步：开启attribute变量（gl.enableVertexAttribArray()）

//顶点数据
    const vertices = new Float32Array([
      0, 0.2,
      -0.2, -0.1,
      0.2, -0.1,
      0.4, 0.2
    ]);
    //缓冲对象
    const vertexBuffer = gl.createBuffer();
    //绑定缓冲对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
    //获取attribute 变量
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
    // 将缓冲区对象分配给这个变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    //赋能-批处理 链接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position)

将缓冲区的对象 分配给这个变量 ，我们看下这个api 「gl.vertexAttribPointer」
6. 第一个参数的话其实 指定要修改的顶点属性的索引， 而这个索引 就是我们通过上面在顶点着色器中去查找到的
7. 第二参数 的表示 指定每个顶点属性的组成数量，必须是1，2，3或4。这是为什么呢 ，因为顶点坐标 默认是（x,y,z,w）如果你选择是1 那么 程序会帮你把剩下的参数补充。2 3 设置为0 4 设置为 1 。因为我们这里 其实就是个二维坐标 ， 所以只用到了 x,y 这样的坐标 所以是2
8. 第三个 表示数据类型， 我们这里是浮点型
9. 第四个 表示归一化 ，就是把 非浮点型的数据 归一到 【0,1】 或者 是【-1，1】 区间
10. 第五个 表示相邻两个顶点之间的字节数
11. 最后一个 表示 我们获取的这个顶点索引 是在缓冲区 的何处 开始存储的 ， 我们缓冲区对象 存的都是顶点数据， 所以这里是0