Morph targets broken on some mobile devices using WebGL 2

Describe the bug When I load a glTF model with more than a certain number of shape keys (Morph Targets), the mesh is not visible in the cell phone browser

This is a question I posted in the forum and could not resolve. https://discourse.threejs.org/t/gltf-morph-animation-retention-limits/41762/3

Steps to reproduce the behavior:

1. export a mesh with more than a certain number of shape keys (more than 241 in my environment) to glTF in Blender.

2. browse it in any glTF viewer.

3. the mesh will no longer be visible in the mobile web browser. (However, it will be visible in the desktop web browser.)

The cell phones I am checking are as follows ViVO iQOO neo3 5G (Android 10 / Chrome 104.0.5112.97 ) ASUS ZenFone 3 ( Android 8 / Chrome 104.0.5112.97 ) AQUOS SHV38 ( Android 8 / Chrome 98.0.4758.101 )

If you have any other additional requests, please let me know.

Code

	const loader = new GLTFLoader();
	loader.load( 'test2.glb', function ( gltf ) {

		mesh = gltf.scene.children[ 0 ];
		console.log("mesh.children.length:" + mesh.children.length)

		scene.add( mesh );
		mixer = new THREE.AnimationMixer( mesh );
		for (let i = 0; i < gltf.animations.length; i++ ) {
			mixer.clipAction( gltf.animations[ i ] ).play();
		};

	} );

Live example http://niu.re/t/test2.html

Screenshots https://user-images.githubusercontent.com/868060/187014170-e26b4130-1adf-485e-b1c6-7dc989ca234c.mp4

ViVO iQOO Neo3 5G

Platform:

• Device: [Desktop, Mobile]
• OS: [Windows, Android]
• Browser: [Chrome, Firefox, Safari, Edge]
• Three.js version: [r144, r142, r88]

[Mugen87]

When using WebGL 2, the implementation supports unlimited morph targets. unlimited means in this context whatever your device supports.

I suppose the problem on your devices is the maximum number of uniform vectors of 256. Since morphTargetInfluences are passed to the shader as an array of floats, you hit a device limitation with such a complex morph target model. Desktop devices have a higher maximum number of uniform vectors e.g. 1024.

For now, you probably have to reduce the morph target count by simplifying the model. Alternatively, we could consider to make morphTargetInfluences to a data texture (but only for the WebGL 2 code path), and sample it in the shader.

[niuin]

Thank you for your reply.

I have checked by connecting my cell phone with debugging. It seems that I am getting the following error.

Program Info Log: invalid shaders 
ERROR: too many uniforms

WebGLRenderer ( test2.html )

WebGL1Renderer ( test3.html )

I will upload the console log as well. niu.re-1661863509115.log

I sincerely hope this helps!