前言:前面写到了用 webgl绘制点的过程.在绘制多个的时候用了一个数组来保存点位信息,每次都循环该数组,并调用 gl.drawArrays()函数来绘制这个点,显然这种方式只能绘制点,对应图形来说,它拥有多个顶点,并且需要你一次性把所以的顶点传入到着色器中,然后才能把图形显示出来.
webgl 提供了一个很方便的机制,即缓冲对象,他可以一次性的想着色器传递多个顶点的数据.
缓冲对象
缓冲对象其实救赎 webgl 系统中开辟的一块内存区域,我们可以一次性的向这块内存区域填充大量的数据,然后将这些数据保存其中,供顶点着色器使用.使用缓冲区对象向着色器传入多个顶点的数据需要遵循以下五个步骤:
- 创建缓冲区对象(gl.createBuffer)
- 绑定缓冲对象(gl.bindBuffer)
- 将数据写入缓冲区对象(gl.bufferData)
- 将缓冲区对象分配给一个 attribute 对象(gl.vertexAttribPointer)
- 开启 attribute 变量(gl.enableVertexAttribArray)
创建缓冲对象
var vertexBuffer = gl.createBuffer()
执行完成之后,webgl 系统多一个新创建出来的缓冲区对象,创建出来的缓冲区对象也可以使用 gl.deleteBuffer函数来删除这个缓冲区
image.png
绑定缓冲区对象
创建缓冲区对象之后将缓冲区对象绑定到 webgl 系统已经存在的目标上面.绑定函数为 bindBuffer
bindBuffer(target,buffer)
- target:参数可以是以下几个 gl.ARRAY_BUFFER:表示对象中包含顶点数据 gl.ELEMENT_ARRAY_BUFFER 表示缓冲区包含顶点的索引值
- buffer:指定指点 createBuffer创建的 buffer
image.png
向缓冲区对象写入数据
使用gl.bufferData将顶点数据写入到开辟空间的缓冲区对象.
image.png
gl.bufferData(target,data,usage)
- target:gl.ARRAY_BUFFER或者 gl.ELEMENT_ARRAY_BUFFER
- data:写入缓冲对象的数据,类型是类型化数组
- usage:表示程序将如何使用存储在缓冲区中的数据.
gl.STATIC_DRAW:只会向缓冲区对象写入一次数据
gl.STREAM_DRAW:只会向缓冲区写入一次数据,然后绘制若干次
gl.DYNAMIC_DRAW:会向缓冲区多次写入数据,并绘制多次
类型化数组
webgl 通常需要处理大量的相同类型的数据.为了性能,webgl 为每种基本数据类型引入了一种特殊的数据(类型化数组),浏览器事先知道数据的类型,处理起来更加的有效率
webgl 类型数组如下表所示
image.png
类型数组和 Array 数组相似,但是也有一些不同,类型数组不支持 push,pop.类型数组同样拥有一些类的方法和属性
image.png
缓冲区对象数据分配给 attribute 变量
gl.vertexAttribp[1234]f 只能一次给 attribute 变量分配一个值,为了解决这个问题,使用 gl.vertexAttribPointer()可以将整个缓冲区对象分配给 attribute 变量
gl.vertexAttribPointer(location,size,type,normalized,stride,offset)
- location:指定待分配 attribute 变量的存储位置
- size:缓冲区给每个顶点分配的分量个数
- type:数据类型 gl.UNSIGNED_BYTE(Uint8Array),gl.SHORT(Int16Array),....
- steide:指定相邻两个顶点的字节数量
- offset:指定缓存的偏移量
开启变量
为了使顶点着色器可以访问缓冲区内的数据,需要使用 gl.enableVertexAttribArray()函数开启 attribute 变量.同样可以使用 disableVertexAttribArray()来关闭分配
gl.enableVertexAttribArray(locat)
- location:指定 attribute 变量的存储地址
网友评论