After developing a ThreeJS app using the canvas renderer to meet project requirements, I encountered a memory and garbage collection issue.
As part of the application logic, numerous meshes are created for animations on sections of a flat 2D donut or ring. Every animation pass involves removing all previous meshes and generating new ones.
However, when objects are removed from the scene, they are not deleted from memory but rather stored in an array named __objectsRemoved. This array remains indefinitely, likely waiting for some form of garbage collection to clean up everything. Unfortunately, this leads to continuous increase in memory usage until the browser crashes within around 30-40 seconds.
We have tried various solutions without success and urgently need guidance. The launch deadline for this project is approaching rapidly, so any immediate help would be highly appreciated.
For reference, here is a JSFiddle demonstrating the problem: http://jsfiddle.net/729sv/
var camera, scene, renderer;
var base = 0;
init();
animate();
function init() {
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 100;
document.addEventListener('mousedown', update, false);
update();
}
function update() {
if (base) scene.remove(base);
base = new THREE.Object3D();
scene.add(base);
for (var j = 0; j < 10; ++j) {
var geometry = new THREE.IcosahedronGeometry(50, 3);
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh(geometry, material);
base.add(mesh);
}
}
function animate() {
requestAnimationFrame(animate);
console.log(scene.__objectsRemoved.length);
renderer.render(scene, camera);
}
The version of ThreeJS we are using is R62
Thank you!