SkinnedMesh texture leak

Questions
, ,
1

I’m in the midst of doing a bunch of optimization work on a product that we are launching in a week or so I discovered that we had a texture memory leak somewhere. I spent a bunch of time tracking it down and using various WebGL debugging tools to pinpoint what texture resources were in memory when they shouldn’t be and discovered the source of the leak!

The source of the texture leak is coming from our animated characters which are SkinnedMesh objects cloned from GLTF/GLB files using SkeletonUtils.clone().

The textures are generally quite small but vary in size (usually 4x4, 8x8, 16x16) and composition. Here are some examples that I found floating around in memory:

image (1) image (2) image

I went a grabbed one of the simple skinned meshes from the Khronos Group’s GLTF Sample Repository and threw it in to various WebGL tools like glTF Viewer and even Babylon Sandbox and discovered that both of those also generated version of these textures for virtually any skinned mesh I threw at it.

By using those tools to poke, prod, and modify these generated texture I discovered that doing so broke the model’s skinning.

I have put together a CodeSandbox that shows how these textures are being leaked by loading Skinned GLTF models but not normal textured GLTF models:

And so now my questions are these:

  1. What exactly are these textures used for in the skinning process at run-time in WebGL?
  2. Why are they not cleaned up when I call dispose() on ALL disposable objects of the skinned mesh’s hierarchy (SkinnedMesh, Material, and Texture)?
2

You’re seeing https://threejs.org/docs/#api/en/objects/Skeleton.boneTexture here. It’s a texture representing the pos/rot/scale of each bone in the skeleton, used to deform the mesh vertices.

Calling mesh.skeleton.dispose() should clean these up, but disposing of the SkinnedMesh alone does not.

2 Likes
3

Thank you so much, I banged my head on this one for awhile.