Enable mat2/3/4 attribute in shader

[takahirox]

#16140

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

Suggested API.

// glsl
attribute mat4 matrix;

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

Change

• Keeping not only attribute location but also attribute type in WebGLProgram.
• If attribute type is mat2/3/4 renderer calls enableAttribute() and vertexAttribPointer() multiple times.

var locationsNum = 1;
if ( programAttribute.type === _gl.FLOAT_MAT2 ) locationsNum = 2;
if ( programAttribute.type === _gl.FLOAT_MAT3 ) locationsNum = 3;
if ( programAttribute.type === _gl.FLOAT_MAT4 ) locationsNum = 4;

....

for ( var i = 0; i < locationsNum; i ++ ) {

	state.enableAttribute( programAttribute.location + i );

}

....

for ( var i = 0; i < locationsNum; i ++ ) {

	_gl.vertexAttribPointer(
		programAttribute.location + i,
		size / locationsNum,
		type,
		normalized,
		size * bytesPerElement,
		( size / locationsNum ) * i * bytesPerElement
	);

}

[Shimmen]

What is the status on this? Any chance of a merge in the near future? Thanks!

[yhdjyyzk]

what's the status now ? thanks !

[mrdoob]

I guess this will need to be rebased?

[Mugen87]

As far as I remember, this code was originally added for an instanced mesh implementation. However, @mrdoob implemented it differently:

three.js/src/renderers/webgl/WebGLBindingStates.js

Lines 392 to 415 in ae1098e

	} else if ( name === 'instanceMatrix' ) {
	const attribute = attributes.get( object.instanceMatrix );
	// TODO Attribute may not be available on context restore
	if ( attribute === undefined ) continue;
	const buffer = attribute.buffer;
	const type = attribute.type;
	enableAttributeAndDivisor( programAttribute + 0, 1 );
	enableAttributeAndDivisor( programAttribute + 1, 1 );
	enableAttributeAndDivisor( programAttribute + 2, 1 );
	enableAttributeAndDivisor( programAttribute + 3, 1 );
	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
	gl.vertexAttribPointer( programAttribute + 0, 4, type, false, 64, 0 );
	gl.vertexAttribPointer( programAttribute + 1, 4, type, false, 64, 16 );
	gl.vertexAttribPointer( programAttribute + 2, 4, type, false, 64, 32 );
	gl.vertexAttribPointer( programAttribute + 3, 4, type, false, 64, 48 );
	} else if ( name === 'instanceColor' ) {

[takahirox]

From #16140 (comment)

I'm willing to rebase to resolve the conflicts if anyone is still interested in this addition although Three.js API supports instancing now.

[mrdoob]

@takahirox Sounds good to me! I think now it's a good time for it 👍

[takahirox]

Updated.

[mrdoob]

Thanks!