mat3x4 in webGL shaders

Question

I am porting the IQM bone animation format to Javascript and have run into a problem...

The vertex shader is failing to compile and the only error message I get out is 'mat3x4' : syntax error on the first occurance of mat3x4 in the file. Its the very data-type name itself that is unsupported, it seems.

This happens on all machines I have access to for testing, which have a variety of Intel and ATI cards and run Linux with Firefox. (Chrome is not available.)

If I change all mat3x4 to, say, mat3 then my shader compiles fine.

1. does webGL support mat3x4? (I can find nothing via Google)
2. how can I work around this? How can I package the bones into mat4, for example, and keep the code working correctly?

Answer 1

1- Unfortunately no, the WebGL standard references the GLSL ES 1.0 standard, which only has square matrices (section 4.1.6).

2- A mat3x4 holds 12 floats, so you may need to pass the information as a mat4 to the shader anyway (mat3 only holds 9). In that case you will need to use 4×4 matrices in the client code, too, and fill the last column with the values [0 0 0 1].

This will use 30% more uniform space, unfortunately, but then some parts of the shader can be simplified:

 vec4 mpos = vec4(gl_Vertex * m, gl_Vertex.w);

simply becomes:

vec4 mpos = gl_Vertex * m;

2bis- One other solution is to send the array of Matrix3x4 as an array of Vec4 and rebuild the matrix in the shader:

uniform vec4 bonemats[240];

[...]

vec4 c1 = bonemats[3*int(vbones.x)]   * vweights.x;
vec4 c2 = bonemats[3*int(vbones.x)+1] * vweights.x;
vec4 c3 = bonemats[3*int(vbones.x)+2] * vweights.x;
c1 += bonemats[3*int(vbones.y)]   * vweights.y;
c2 += bonemats[3*int(vbones.y)+1] * vweights.y;
c3 += bonemats[3*int(vbones.y)+2] * vweights.y;

[...]

m = mat4(c1, c2, c3, vec4(0.0, 0.0, 0.0, 1.0));

[...]

vec4 mpos = gl_Vertex * m;

If you do that, the client code needs not be modified if your Matrix3x4 array is stored column-major.