当前位置: 首页 > Web前端 > JavaScript

webGL:vertexAttribPointer函数理解

时间:2023-03-27 00:20:12 JavaScript

MDN官方定义告诉显卡从当前绑定的buffer(bindBuffer()指定的buffer)读取顶点数据。语法voidgl.vertexAttribPointer(index,size,type,normalized,stride,offset);参数index指定要修改的顶点属性的索引size指定每个顶点属性的分量个数,必须为1、2、3或4。type指定数组中每个元素的数据类型归一化是否为整数值转换为浮点数时应该归一化到一个特定的范围内不能大于255。如果stride为0,属性被认为是紧密打包的,即属性没有交错,每个属性在一个单独的块中,下一个顶点的属性紧跟在当前顶点之后。offsetGLintptr(en-US)指定顶点属性数组第一部分的字节偏移量。它必须是类型字节长度的倍数。理解为什么使用vertexAttribPointer如果需要修改顶点位置和颜色,需要创建两个缓冲区。但是使用vertexAttribPointer可以存储多种数据,不同的数据通过偏移来区分,这样只需要一个buffer数据。参数理解index通过gl.getAttribLocation(gl.program,"a_Position")方法可以返回a_Position属性的索引,也就是索引需要的数据大小。您需要获取多个数据。例如:constverties=newFloat32Array([[0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.87445098039215686,0.8431372549608,0.8431372549608,0.843139215686,0.8431372549608,0.5,0.4,-0.2,1.0,0.4,0.4,-0.5,0.4,-0.2,1.0,1.0,0.4,0.0,-0.6,-0.2,1.0,1.0,0.4,0.0,0.5,0.0,0.4,0.4,1.0,-0.5,-0.5,0.0,0.4,0.4,1.0,0.5,-0.5,0.0,1.0,0.4,0.4,]);如果参数设置为3,则表示需要3条数据。type指定数据类型,gl.FLOAT、gl.BYTE等数据类型,一般为gl.FLOATnormalized,为参数gl.FLOATinvalidstride设置偏移量,首先获取constFSIZE=verties.BYTES_PER_ELEMENT,即数组的bytelength,偏移量必须是字节长度的倍数。关键一步是设置每次取数据的间隔,或者以上面的数据为例,设置为1*FSIZE,则取数据为:`0.0,0.5,-0.4`,`0.5,-0.4,0.19607843137254902`,`-0.4,0.19607843137254902,0.8431372549019608,`如果设置为3*FSIZE,则取的数据为:0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.8745098039215686,-0.5,-0.5,-0.4offset需要配合上一个参考数据解析,例如:gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*6,3*FSIZE);首先,一次取6条数据,需要的是数据偏移3个单位,加上size等于3,所以可以确认拿到的数据是最后3条。比如你第一次获取6个单位数据:0.0、0.5,-0.4、0.19607843137254902、0.8431372549019608、0.8745098039215686这个时间