对应《WebGL编程指南》代码:16-MultiAttributeSize、17-MultiAttributeSize_Interleaved
要点:绘制三个不同size的点、交错组织
知识点
一、回顾—将顶点坐标传入着色器步骤
1.创建缓冲区对象
4.将缓冲区对象分配给a_Postion变量(attribute变量)
5.连接a_Postion变量与分配给它的缓冲区对象(开启attribute变量)
二、交错组织
一般思维,通过创建多个缓冲区对象,可以实现传入顶点不同数据,但是当顶点数量庞大起来时,代码冗余增大。
WebGL允许我们把顶点坐标和尺寸数据打包到同一个缓冲区对象中,并通过某种机制分别访问缓冲区对象中不同种类的数据。比如,可以将顶点的坐标和尺寸数据按照如下方式交错组织:
1 | var verticesSizes = new Float32Array( |
可见,一旦将几种顶点数据交叉存储在一个数组中,WebGL就需要有差别的从缓冲区对象中获取某种特定的数据,即使用gl.vertexAttribPointer函数的第5个参数stride和第6个参数offset。
三、步进参数
gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
1.将缓冲区对象分配给a_Postion变量
1 | ... |
参数stride表示:在缓冲区对象中,单个顶点的所有数据(坐标和大小)的字节数,也就是相邻两个顶点间的距离,即步进参数。之前的缓冲区只含有一种数据即坐标,将其设置为0即可。
stride和offset如图:
如图所示,每个顶点有3个数据值(两个坐标一个尺寸数据),因此stride应该设置为每项数据大小的三倍,即3 x FSIZE
(Float32Array中每个元素所占的字节数)。
参数offset表示当前考虑的数据项距离首个元素的距离,即偏移参数。在verticesSizes数组中,顶点的坐标数据是放在最前面的,所有offset为0。
2.将缓冲区对象分配给a_Postion变量
接下来对顶点尺寸数据采取同样操作:将缓冲区对象分配给a_PointSize变量。缓冲区对象还是原来的那一个,改变的是关注的数据不同,需要将offset参数设置为顶点尺寸数据在缓冲区对象中的初始位置。由前面可以知道,前两个数据是顶点坐标,后一个是顶点尺寸,因此offset设置为FSIZE * 2
1 | var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); |
实例
1 |
|
方法一、创建多个缓冲区对象
1 | //MultiAttributeSize.js |
方法二、使用交错组织配合gl.vertexAttribPointer的步进和偏移量
1 | /** |
效果
Tips: Please indicate the source and original author when reprinting or quoting this article.