webGL:|webGL: vertexAttribPointer 函数理解 webGL:vertexAttribPointer函数理解

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