webGL: vertexAttribPointer 函数理解- SegmentFault 思否

void gl.vertexAttribPointer(index, size, type, normalized, stride, offset); 注册登录问答专栏课程招聘活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录首页专栏chendm的专栏文章详情0webGL:vertexAttribPointer函数理解undefined发布于3月7日EnglishMDN官方定义告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据。

语法voidgl.vertexAttribPointer(index,size,type,normalized,stride,offset);参数index指定要修改的顶点属性的索引size指定每个顶点属性的组成数量，必须是1，2，3或4。

type指定数组中每个元素的数据类型normalized当转换为浮点数时是否应该将整数数值归一化到特定的范围stride一个GLsizei，以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。

不能大于255。

如果stride为0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。

offsetGLintptr(en-US)指定顶点属性数组中第一部分的字节偏移量。

必须是类型的字节长度的倍数理解为什么使用vertexAttribPointer如果需要修改顶点位置和颜色，那么需要创建两个缓冲区。

而使用vertexAttribPointer可以存多种数据，不同数据间通过偏移来区分，这样就可以只需要一个缓冲区数据了。

参数理解index通过gl.getAttribLocation(gl.program,"a_Position")方法可以返回a_Position属性的索引，这就是index需要的数据size你需要取几个数据。

例如:constverties=newFloat32Array([ 0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.8745098039215686,-0.5,-0.5,-0.4,0.4,1.0,0.4,0.5, -0.5,-0.4,1.0,0.4,0.4,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.FLOAT无效stride设置偏移量，首先拿到constFSIZE=verties.BYTES_PER_ELEMENT,也就是数组的字节长度，偏移量必须是字节长的的倍数。

关键步骤，设置每次拿数据时的间隔，还是拿上面的数据为例，设置为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这次正真拿到的则是0.19607843137254902,0.8431372549019608,0.8745098039215686webgljavascript前端three.js阅读740更新于3月7日赞收藏分享本作品系原创，采用《署名-非商业性使用-禁止演绎4.0国际》许可协议chendm的专栏关注专栏undefined坚持自我纯粹的技术1.8k声望255粉丝关注作者0条评论得票最新提交评论undefined坚持自我纯粹的技术1.8k声望255粉丝关注作者文章目录跟随宣传栏▲