Missing head in a specific VRM model in specific Android devices

[jiaxiong8169]

I encounter a strange issue with a VRM model. The VRM model that loads fine in desktop browsers. However, in some specific mobile devices (Android), the head of the VRM model went missing. I faced the issue in my ReactJS application. This issue does not happen on other VRM models.

Attached with a sample VRM model that has this issue: https://we.tl/t-XxxsvIAK1c

I tried reducing texture size, deleting everything except the head, but the head still doesn't load.

Any ideas what's the problem here?

[yue4u]

@jiaxiong8169

Hi, thank you for the report.

For your model it has 415 morphs and 276 bones so there are troubles to display the model on particular devices.

To verify the issue:

1. Check if there are errors logged to dev console like following:

THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

ERROR: too many uniforms

2. Visit https://webglreport.com/?v=2 from the device and look for Max Vertex Uniform Vectors

On some Android devices the limit might be 256, which is not enough to handle this model.

On code wise, inside three.js's ShaderChunk morphTargetInfluences is passed as a float per morph that leads to this issue.
It's not easy to fix it on our side only.

https://github.com/mrdoob/three.js/blob/74d7dc8a5fb92e40758ec6b8fd08502c5ca019b3/src/renderers/shaders/ShaderChunk/morphtarget_pars_vertex.glsl.js#L14

If WebGL1 is ok to you, you can try pass morphs data from CPU.

https://github.com/mrdoob/three.js/blob/r160/src/renderers/webgl/WebGLProgram.js#L619

To mitigate the issue

1. Try reducing morphs and bones if it's possible.
2. Try VRMUtils.removeUnnecessaryVertices and VRMUtils.removeUnnecessaryJoints to improves the performance at runtime. https://github.com/pixiv/three-vrm/blob/dev/packages/three-vrm/examples/basic.html#L87-L89

[jiaxiong8169]

Thank you for the insights! My device that does not have issue has 1024 max vertex uniform vectors while the other two that have issues have 256 max vertex uniform vectors.

May I know how to count "vertex uniform vectors" for a VRM model in any 3d tool such as blender to make sure the count is below 256? Is it equivalent to morphs + bone counts?

[yue4u]

How many vertex uniform vectors will be use is not a model factor but a renderer one, which means it can vary for the same model between different versions and implementations (e.g three.js / Babylon.js / Unity etc).

AFAIK models have this issue mostly due to their morphs counts so it's good to look into morphs first.
Bones and other things like textures may cause similar issues for some devices once they exceed target device's capabilities (which you can find at https://webglreport.com).

[jiaxiong8169]

Thanks a lot! It works after reducing morph count