mercredi 9 août 2017

Ember + Three.js = Memory Leak

I'm using three.js in one of my ember projects. Unfortunately I'm doing something wrong with tearing down the three.js objects as the JS Heap is growing over time.

I created an Ember Twiddle: http://ift.tt/2uoRItF

(In this example there is just the bare minimum, no geometries, no materials and no meshes)

Open Chrome Dev Tools Performance Tab, select "Memory" and start recording. Hit "start" in the Ember Twiddle App and let it run for 2 minutes. Stop recording and have a look at the JS Heap, Nodes and Listeners.

Memory Record

Relevant Code:

didInsertElement() {
  this._super(...arguments);

  const container = this.$('.webgl-container');

  const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.setSize( container.width(), container.height() );

  container.append( renderer.domElement );
  this.set('webGLRenderer', renderer);

  const camera = new THREE.PerspectiveCamera();
  const scene = new THREE.Scene();

  renderer.render( scene, camera );

},

willDestroyElement() {

  const renderer = this.get('webGLRenderer');
  renderer.forceContextLoss();
  renderer.context = null;
  renderer.domElement = null;

  this._super(...arguments);
}

Does anyone know how to destroy three.js objects properly in Ember?




Aucun commentaire:

Enregistrer un commentaire