VTF morph targeting with multiple meshes sharing same position/normal attributes

Describe the bug

Context: I’m a contributor of VRM, which is a humanoid-oriented glTF extension which is intended to be used as humanoid avatars.

I noticed vram consumptions of glTF models are increasing starting from Three.js r133, sometimes loading single humanoid glTF is enough to knock-off my WebGL context. I compared between r132 and r133 using greggman/webgl-memory and and I spotted an unforgivable difference at the texture memory consumption between them. (I can’t provide the model I used for the experiment since reasons, I’m sorry)

r133 has a big improvement on morph targeting part, enabling using 8 or more morph targets at the same time using VTF morph targeting (I mean, I appreciate this change a lot). https://github.com/mrdoob/three.js/pull/22293

I’ve looked into the code behind the VTF morph targeting, and I noticed that, despite the model shares a single position/normal attributes between meshes the morph target textures are generated for each meshes.

https://github.com/mrdoob/three.js/blob/1a241ef10048770d56e06d6cd6a64c76cc720f95/src/renderers/webgl/WebGLMorphtargets.js#L53-L156

I can blame the structure of model itself of course, since it should have only necessary part of VBOs for each meshes plus morph targets should only be applied to necessary parts, but since the issue does not happen in r132 or prior, I want to fix this from Three.js side.

I think I can try to fix this part.

Tangential issues

I also noticed I can’t free these textures when I unload the model. Is there any way to unload the morph target textures?

Live example

https://glitch.com/edit/#!/three-r133-vtf-morph-memory-leak

Platform

• Device: Desktop
• OS: Windows
• Browser: Chrome
• Three.js version: r133, r135
  • DOES NOT REPRODUCE in WebGL1Renderer. Only happens with WebGL2.

[donmccurdy]

I’m afraid we can’t support this use case in WebGLMorphtargets. Consider to split up you buffers so each geometry has its unique set of (smaller) attributes.

For the reasons described in https://github.com/mrdoob/three.js/issues/17089, having one buffer for every BufferGeometry is not as efficient as sharing buffers. I don’t think we need to solve that now, but it’s a pretty common layout for glTF files and if there are problems with using morph targets we’ll eventually run into that again. Perhaps we can discuss it in #17089.

[0b5vr]

fyi, I’ve added a utility function to three-vrm, that makes morph textures compact against such models

https://github.com/pixiv/three-vrm/pull/880