Memory Deallocation of Dynamically Added Mesh Not Working

Question

I have a Mesh instance which uses a TubeGeometry for it's path. When I make changes to the underlying curve which the TubeGeometry instance is based on, I am removing the mesh from the scene and then creating a new one.

The scene updates fine, but the memory is exploding, which tells me I'm not deallocating the removed mesh correctly once it's off the scene.

Here's the code I'm trying to use to deallocate:

$.each(parent.children, function (idx, obj) {
  parent.remove(obj);
  renderer.deallocateObject(obj);
  obj.deallocate();
});

where parent is an Object3D that I place the Mesh in, and renderer is an instance of WebGLRenderer.

Can anyone tell me what I'm doing wrong and how to do this correctly?

Here's a Plunk with my currently example. Relevant code is in the scene.js file, lines 76-86. Take note that the example is using r53.

Answer 1

You don't deallocate the used geometry

$.each(parent.children, function (idx, obj) {
  parent.remove(obj);
  renderer.deallocateGeometry(obj.geometry);
  renderer.deallocateObject(obj);
  obj.geometry.deallocate();
  obj.deallocate();
});