webgl 缓冲区

Posted 2023-03-10

参考技术A 前言:前面写到了用 webgl绘制点的过程.在绘制多个的时候用了一个数组来保存点位信息,每次都循环该数组,并调用 gl.drawArrays()函数来绘制这个点,显然这种方式只能绘制点,对应图形来说,它拥有多个顶点,并且需要你一次性把所以的顶点传入到着色器中,然后才能把图形显示出来.
webgl 提供了一个很方便的机制,即缓冲对象,他可以一次性的想着色器传递多个顶点的数据.

缓冲对象其实救赎 webgl 系统中开辟的一块内存区域,我们可以一次性的向这块内存区域填充大量的数据,然后将这些数据保存其中,供顶点着色器使用.使用缓冲区对象向着色器传入多个顶点的数据需要遵循以下五个步骤:

执行完成之后,webgl 系统多一个新创建出来的缓冲区对象,创建出来的缓冲区对象也可以使用 gl.deleteBuffer函数来删除这个缓冲区

创建缓冲区对象之后将缓冲区对象绑定到 webgl 系统已经存在的目标上面.绑定函数为 bindBuffer
bindBuffer(target,buffer)
- target:参数可以是以下几个 gl.ARRAY_BUFFER:表示对象中包含顶点数据 gl.ELEMENT_ARRAY_BUFFER 表示缓冲区包含顶点的索引值
- buffer:指定指点 createBuffer创建的 buffer

使用gl.bufferData将顶点数据写入到开辟空间的缓冲区对象.

webgl 通常需要处理大量的相同类型的数据.为了性能,webgl 为每种基本数据类型引入了一种特殊的数据(类型化数组),浏览器事先知道数据的类型,处理起来更加的有效率
webgl 类型数组如下表所示

类型数组和 Array 数组相似,但是也有一些不同,类型数组不支持 push,pop.类型数组同样拥有一些类的方法和属性

gl.vertexAttribp[1234]f 只能一次给 attribute 变量分配一个值,为了解决这个问题,使用 gl.vertexAttribPointer()可以将整个缓冲区对象分配给 attribute 变量

为了使顶点着色器可以访问缓冲区内的数据,需要使用 gl.enableVertexAttribArray()函数开启 attribute 变量.同样可以使用 disableVertexAttribArray()来关闭分配