Potential memory leak in my animation engine. Can't figure out why. Please help!


#1

I’m working on a 2D animation system. You can find an example of it in action over at http://artisanimation.com/UnimHTML/TapTitans2Web.html
Every frame there is UV manipulation and vertex matrix manipulation. I’m not sure why, but this example may crash or slow down devices.

I’m new to javascript so any help deciphering the issue would be much appriciated!!!


#2

At first sight, i see at least two things you can improve:

  1. Your animation loop is not correct. There is no need to use setTimeout(). This should be sufficient:
function animate() {

   requestAnimationFrame( animate );

   updateAnim( swordMasterAnim );
   updateAnim( monsterAnim );
   renderer.render( scene, camera );

}
  1. Besides, you allocate way to many objects in each update step. Try to reuse objects and avoid instantiation via the new operator or object literals. If you use Chrome, you can easily monitor the resource consumption of your app with the built-in task manager.

#3

Thanks for the reply, much appreciated!! I thought I was reusing objects? Are you saying I need to use fewer objects just in general? also how do i specify the frame rate with your solution?


#4

One example: Each time you create unnecessary array objects with this code in setAnimUV().

anim.meshGroup.children[spriteIndex].geometry.faceVertexUvs[0] = []; 
				
// TL , BL , TR
anim.meshGroup.children[spriteIndex].geometry.faceVertexUvs[0].push([
	anim.UVList[spriteIndex][0],
	anim.UVList[spriteIndex][2],
	anim.UVList[spriteIndex][1]
]);

Try to avoid this. Instead, reuse the arrays and just change their content. Your app will allocate less memory and the garbage collection has less work to do.


#5

awesome! will do!