WebGL用单缓冲区传递复合顶点属性到Shader

总结一下通过一个缓冲区传递复杂的顶点属性到vertex shader。
通常顶点属性数组包含许多顶点属性，如位置，颜色，法向量等，如果每个属性都分散用不同的数组来存储，会浪费许多空间（VBO），而且，增加操作复杂度。那么在一个顶点属性数组中包含多种多种属性，创建一个顶点缓冲区，怎么将不同的属性传递给不同的shader变量呢？

这个例子中，顶点信息中包含坐标信息和顶点大小：a_Position和a_PointSize，存储于一个数组中：
顶点着色器代码：

attribute vec4 a_Position;
attribute float a_PointSize;
void main() {
    gl_Position = a_Position;
    gl_PointSize = a_PointSize;
}

JS代码

var verticesSizes = new Float32Array([
// Vertex coordinates and size of a point
    0.0, 0.5, 10.0, // The 1st vertex
    -0.5, -0.5, 20.0, // The 2nd vertex
    0.5, -0.5, 30.0 // The 3rd vertex
]);
// Create a buffer object
var vertexSizeBuffer = gl.createBuffer();
// Write vertex coords and point sizes to the buffer and enable it
gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);

var FSIZE = verticesSizes.BYTES_PER_ELEMENT;
// Get the storage location of a_Position, allocate buffer, & enable
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
...
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
gl.enableVertexAttribArray(a_Position); // Enable allocation

// Get the storage location of a_PointSize, allocate buffer, & enable
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
...
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);
gl.enableVertexAttribArray(a_PointSize); // Enable buffer allocation

代码中，顶点数组只有一个，包含了顶点坐标和大小，创建了一个缓冲区对象vertexSizeBuffer，然后绑定到gl.ARRAY_BUFFER同时赋值，这个过程只有一次。然后通过两次gl.vertexAttribPointer和gl.enableVertexAttribArray操作，为shader传递对应的属性值。