No mat2/3/4 attribute support in shader

Description of the problem

If I write attribute mat2/3/4 in shader and upload data like this

// glsl
attribute mat4 matrix;

// js
geometry.addAttribute( 'matrix', new THREE.BufferAttribute( data, 16 ) );

It fails because the second argument of gl.vertexAttribPointer() (= attribute.itemSize) takes only 1, 2, 3, or 4.

GL ERROR :GL_INVALID_VALUE : glVertexAttribPointer: size GL_INVALID_VALUE

I needed to break it up to columns to use them on Three.js.

// glsl
attribute vec4 column0;
attribute vec4 column1;
attribute vec4 column2;
attribute vec4 column3;

void main() {
    mat4 matrix = mat4( column0, column1, column2, column3 );
}

// js
geometry.addAttribute( 'column0', new THREE.BufferAttribute( data0, 4 ) );
geometry.addAttribute( 'column1', new THREE.BufferAttribute( data1, 4 ) );
geometry.addAttribute( 'column2', new THREE.BufferAttribute( data2, 4 ) );
geometry.addAttribute( 'column3', new THREE.BufferAttribute( data3, 4 ) );

So we can’t practically use mat2/3/4 attribute in shader on Three.js because renderer doesn’t handle them correctly. But I think allowing them may be useful.

To handle them we need to update WebGLRenderer to call enableAttribute and vertexAttribPointer multiple times for mat2/3/4.

https://stackoverflow.com/questions/38853096/webgl-how-to-bind-values-to-a-mat4-attribute

// glsl
attribute mat4 matrix;

// js
geometry.addAttribute( 'matrix', new THREE.BufferAttribute( data, 16 ) );

// js in renderer
state.enableAttribute( programAttribute.location );
state.enableAttribute( programAttribute.location + 1 );
state.enableAttribute( programAttribute.location + 2 );
state.enableAttribute( programAttribute.location + 3 );
_gl.vertexAttribPointer( programAttribute.location, 4, type, normalized, 64, 0 );
_gl.vertexAttribPointer( programAttribute.location + 1, 4, type, normalized, 64, 16 );
_gl.vertexAttribPointer( programAttribute.location + 2, 4, type, normalized, 64, 32 );
_gl.vertexAttribPointer( programAttribute.location + 3, 4, type, normalized, 64, 48 );

Three.js version

• Dev
• r103
• …

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[takahirox]

Yes, I think WebGL GLSL supports mat2/3/4 attributes. So @WestLangley could you explain what “WebGL doesn’t support mat2/3/4 attribues” means here for me?

[takahirox]

My use case is geometry instancing. I want to pass local model matrix for each instance.

https://github.com/takahirox/three.js/blob/PhysicsInstancing/examples/webgl_physics_instancing.html#L247