Revisiting VAO support

[greggman]

I'm torn how best to support Vertex Array Objects in twgl

The issue is, to really use VAOs effectively you have to manually specify attribute locations so that your attributes will match location across programs (positions always attribute 0, normals always attribute 1, texcoords always attribute 2, etc...)

Right now you can specify that by passing stuff to twgl.createProgramInfo and twgl.createProgram. I'm wondering if I should let you some how pass in the same data to all the buffer/attribute functions like twgl.createBufferInfoFromArrays. Or maybe a new twgl.createVAOFromArrays that requires you to pass in location info.

As it is now you first create a BufferInfo and then separately you create a VAO passing both a ProgramInfo and a BufferInfo to twgl.createVertexArrayInfo. I did it this way because (1) the locations are specified on the ProgramInfo and (2) if you don't manually choose locations then you need different VAOs per program.

If I added the new stuff effectively you'd something like

const options = {
    attribLocations: {
        position: 0,
        normal: 1,
        texcoord: 2,
        binormal: 3,
        tangent: 4,
        vertexColor: 5,
   },
};

Then

const programInfo = twgl.createProgramInfo(gl, [vs, fs], options);
const vaInfo = twgl.createVertexInfoFromArrays(gl, arrays, options);

I could also maybe make some kind of default so you wouldn't have to pass them everywhere like

twgl.setDefaults(options);    

Mostly thinking out loud. I've wanted to add this for a while. I'm not 100% sure what kind of extra info is needed though. For example in WebGL2 I need to know if the attribute is a float, int, or unsigned. That info is available on a ProgramInfo but not currently available anywhere else. I can't look at buffer types since you can pass int and unsigned data to a float attribute. I guess I'd have to extend the attribute location spec so you could add that info

const options = {
    attribLocations: {
        position: { loc: 0, },
        normal: { loc: 1, },
        texcoord: { loc: 2, },
        binormal: { loc: 3, },
        tangent: { loc: 4, },
        vertexColor: { loc: 5, type: gl.INTEGER },
   },
};

or to the FullArraySpec. It seems like it belongs on attrib locations though since it's program specific not BufferInfo specific.