Destroy three.js objects in the front-end

[jpanetta]

In my application, I frequently allocate and deallocate BufferGeometry/BufferAttribute instances, but I cannot seem to actually destroy the buffers on the Javascript side (leading to ever increasing memory consumption). Is there a way to ensure these objects are released? I am currently trying:

for oldMesh in meshes.children:
    meshes.remove(oldMesh)
    oldMesh.geometry.exec_three_obj_method('dispose')
    for k, attr in oldMesh.geometry.attributes.items():
        attr.close()
    oldMesh.geometry.close()
    oldMesh.material.close()
    oldMesh.close()

After this, I believe the Python objects are gone, but I still see associated ArrayBuffer objects taking up memory in my Chrome heap snapshots.

[sirbardo]

I am currently having the same problem. Anyone has a solution? This seems to be related to the actual data still being alive in the "mesh.widgets" dictionary, with apparently no way to delete it.

[vidartf]

@sirbardo To remove it from the widgets collection, you should close() the widget as @jpanetta outlines. In regards to the original issue, I added a PR to help ensure we call dispose() when the widget is destroyed (closed). Note that there are still some three.js issues related to renderers/cameras/scenes keeping references to some objects, so you might need to re-create those in addition to the fixes from the PR.

[vidartf]

PR mentioned is here: https://github.com/jupyter-widgets/pythreejs/pull/291

[sirbardo]

Thank you @vidartf , I had solved the problem anyway by directly changing the "array" property of the bufferattributes whenever I need to, but now I am incurring in another problem which probably requires another issue. I'm opening the issue now.