CODEWITHSUNDEEP
javascriptmemory-leaksthree.js
twisted
twisted

Reputation: 802

Cannot dispose of unwanted geometry in three.js application

In this minimal example, I'm adding a THREE.SphereGeometry to a THREE.Group and then adding the group to the scene. Once I've rendered the scene, I want to remove the group from the scene & dispose of the geometry.

<html>
<head>
  <title>memory-leak-demo-01</title>
  <script type='module'>

    import * as THREE from '../lib/three-js-129/build/three.module.js';

    let canvas = document.createElement('canvas');
    let renderer = new THREE.WebGLRenderer({ canvas:canvas, antialias: true });
    let camera = new THREE.PerspectiveCamera();
    let scene = new THREE.Scene();
    scene.add(camera);

    function getGroup(){
      let group = new THREE.Group();
      const geometry = new THREE.SphereGeometry( 5, 8, 8 );
      const material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
      group.add(new THREE.Mesh( geometry, material ));
      return group;
    }

    for(let i=0; i<1000; i++){
      let myGroup = getGroup();
      scene.add(myGroup);
      renderer.render(scene, camera);
      scene.remove(myGroup);
      console.log(`${i} renderer.info.memory: ${JSON.stringify(renderer.info.memory)}`);          
    }

  </script>
</head>
</html>

The problem is that even though myGroup has been removed from the scene, console logging shows the geometries are not being removed from memory.

992 renderer.info.memory: {"geometries":993,"textures":0} 
993 renderer.info.memory: {"geometries":994,"textures":0} 
994 renderer.info.memory: {"geometries":995,"textures":0} 
995 renderer.info.memory: {"geometries":996,"textures":0} 
996 renderer.info.memory: {"geometries":997,"textures":0}
997 renderer.info.memory: {"geometries":998,"textures":0} 
998 renderer.info.memory: {"geometries":999,"textures":0} 
999 renderer.info.memory: {"geometries":1000,"textures":0}

How to do .dispose() on them? I only want to dispose geometries in the group. The scene contains other objects that I want to keep.

In the actual application I'm working on, there are many geometries in the group and the group is getting added and removed from the scene on every requestAnimationFrame. Memory gets consumed until my system freezes.

I've put a page with the above code here: https://mytestpages.com/three/memory-leak-demo-01.html

This page illustrates the same problem, but with spheres visibly being drawn: https://mytestpages.com/three/memory-leak-demo-02.html

Upvotes: 3

Views: 1231

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Ideally, your cleanup should look like this:

for(let i=0; i<1000; i++){
      let myGroup = getGroup();
      scene.add(myGroup);
      renderer.render(scene, camera);
      scene.remove(myGroup);
      const mesh = myGroup.children[ 0 ];
      mesh.geometry.dispose(); // FIX
      mesh.material.dispose(); // FIX
      console.log(`${i} renderer.info.memory: ${JSON.stringify(renderer.info.memory)}`);          
    }

Upvotes: 2

Related Questions