glTF Morph animation retention limits

Hello.

I am suffering from a puzzling phenomenon.

The problem is that the Morph animation in glTF does not show the mesh in a mobile environment.

What I am trying to do is almost the same as this sample.
https://threejs.org/examples/webgl_morphtargets_horse.html

The only difference is that my glTF has a Morph Target (Shape Key) of 240+.
If I have more than 241 shape keys in my environment, the mesh will not be displayed in the mobile environment.
(If it is on a desktop PC, it will be displayed)

This glTF has a mesh that is not displayed in a mobile environment.
241.glb (1.8 MB)

This glTF has the number of shape keys thinned down to half so that it can be played.
241half.glb (925.8 KB)

These are glTFs that were created to find the cause of the problem.
The actual number of shapekeys I want to use is over 500.

Is this a glitch?

If I recall correctly, three.js uses floating-point textures to support unlimited morph targets (up to device texture limitations) on any devices where this is possible, requiring WebGL 2.0. If the device does not have WebGL 2.0 then we fall back to vertex attributes, and there are a limited number of those, so you can only have 4–8 active morph targets in WebGL 1.0. Any morph targets that are not currently in use (i.e. have influence=0) do not count toward the total.

(/cc @Mugen87 in case I’ve gotten this wrong!)

2 Likes

Thanks for the reply.

My mobile playback environment supports WEBGL 2.0.
Android 10
Chrome 104.0.5112.97

I had a strange encounter while researching.
Some glTF viewers seem to be able to display it.

r142

r88

Older versions seem to be able to display the file even in mobile environments.
Please let me know if there is a solution.

I’m not aware of any reason this example shouldn’t work – it does work on my mobile phone. I would recommend filing a bug with more details about your device (e.g. full https://webglreport.com/ info), perhaps we can narrow down why it doesn’t work.

One possible workaround would be to use a WebGL 1.0 renderer instead of WebGL 2.0, that might fix it but isn’t ideal. I suspect this is just broken in newer versions of three.js that include support for unlimited morph targets and rely on WebGL 2.0 for that support.

Thanks for the reply.

I have tested on 3 different phones and the results were all the same.

My main phones are
ViVO iQOO Neo3 5G
This is the model that I am using. (Snapdragon 865)

I hope this will be of some help.



Linking to GitHub thread for future readers: