mat3 attribute in WebGL

Question

I'm attempting to use the ANGLE_instanced_arrays extension in WebGL to render multiple instances of an object with different mat3 transformation matrices. This is the code related to the buffer for my matrices:

//setup
this.shaderProgram.transformAttribute = gl.getAttribLocation(this.shaderProgram, "transform");
ext.vertexAttribDivisorANGLE(this.shaderProgram.transformAttribute, 1);
this.transformBuffer = gl.createBuffer();

//each render
gl.enableVertexAttribArray(this.shaderProgram.transformAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, this.transformBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([/*9 floats per instance*/]), gl.STREAM_DRAW);
gl.vertexAttribPointer(this.shaderProgram.transformAttribute, 9, gl.FLOAT, false, 0, 0);

And in my vertex shader, I just have 'attribute mat3 transform;' instead of 'uniform mat3 transform'.

When I execute the code above, I get an error on vertexAttribPointer: "vertexAttribPointer: bad size or stride".

This error persists if I set the stride to 36 (9 * 4-byte float) or 0 (auto?).

(As an aside, why do you have to specify the count, the type, and also the stride? Under what circumstances will the stride not be just the product of the count and the size of the type?)

Wynd

That's not how a mat3 vertex attribute works. Each vertex attribute is 4 components, a mat3 has to be spread across 3 different vertex attribute locations (each of which is sequential). This related answer I wrote may help you. – Fagen

if it is pure rotation then you can create the equivalent quaternion instead and then you just need 1 attribute. – Fenske