I've setup 3 different instances of the same shader code (e.g. I've compiled the code into 3 separate programs)
For each program, I've gone through the whole route of something like this:
//Setup
gl.useProgram(program);
const buffer = gl.createBuffer();
const location = gl.getAttribLocation(program, aName);
//Upload (each uses the buffer/location it created in Setup
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, usagePattern);
gl.vertexAttribPointer(location, nComponents, dataType, false, 0, 0);
gl.enableVertexAttribArray(location);
//Draw
gl.useProgram(program);
gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
However, no matter what I pass into data - e.g. different sized quads, all three are the same size.
Notably, changes to other uniforms/attributes like matrices and color do change per object
How do I change this so that the changes to data per instance will be drawn properly?
(I realize if they actually use the same shader I should maybe keep a reference to one program and use some sort of buffer pool- but I'm not there yet, just getting started with WebGL)