MDN 官网定义

通知显卡从以后绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据。

语法

void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);

参数

• index
  指定要批改的顶点属性的索引
• size
  指定每个顶点属性的组成数量，必须是 1，2，3 或 4。
• type
  指定数组中每个元素的数据类型
• normalized
  当转换为浮点数时是否应该将整数数值归一化到特定的范畴
• stride
  一个 GLsizei，以字节为单位指定间断顶点属性开始之间的偏移量(即数组中一行长度)。不能大于 255。如果 stride 为 0，则假设该属性是严密打包的，即不交织属性，每个属性在一个独自的块中，下一个顶点的属性紧跟以后顶点之后。
• offset
  GLintptr (en-US)指定顶点属性数组中第一局部的字节偏移量。必须是类型的字节长度的倍数

了解

为什么应用 vertexAttribPointer

如果须要批改顶点地位和色彩，那么须要创立两个缓冲区。而应用 vertexAttribPointer 能够存多种数据，不同数据间通过偏移来辨别，这样就能够只须要一个缓冲区数据了。

参数了解

• index
  通过 gl.getAttribLocation(gl.program, "a_Position") 办法能够返回 a_Position 属性的索引，这就是 index 须要的数据

• size
  你须要一次取几个数据。
  例如:

   const verties = new Float32Array([
      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.FLOAT
• normalized
  对于参数 gl.FLOAT 有效
• stride
  设置偏移量，首先拿到const FSIZE = 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.4

• offset
  须要配合上一个参数了解,
  例如: 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.8745098039215686