Potential memory leak in my animation engine

Questions
,
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 Likes
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.

2 Likes
5

awesome! will do!

7

Hey. I’ve fixed that memory leak that you mentioned as best as I can, but am still getting 40mb sec memory leak. I have no idea why that is.

8

As i mentioned before, your animation loop is still not correct. Can you please fix this in order to ensure that it is not the source of your problem? It should be:

function animate() {

   requestAnimationFrame( animate );

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

}
9

just changed the code with your changes. Thanks for looking at this btw. Still receiving some intense memory leaks.

10

Can you please use the unminified version of three.js? You are currently using three.min.js. I’d like to debug the library.

Besides, you should generally avoid code sections like this:

setAnimUV(	
	anim, i,
	{ 'x':r , 'y':b },
	{ 'x':r , 'y':t }, 
	{ 'x':l , 'y':b }, 
	{ 'x':l , 'y':t }
);

With each call you effectively create four new JS objects via {}.

11

I made it reference three.js as apposed to min.js. I’ll look into removing the {}. thanks for letting me know I didn’t know that new object gets created. Every single time . that may be a huge issue

12

I’ve found an other thing that is problematic. You have the following statement in setAnimUV():

anim.meshGroup.children[spriteIndex].geometry.elementsNeedUpdate = true;

It’s important to know that objects of type Geometry are internally converted to BufferGeometry. The mentioned line of code will trigger a conversion each frame which is of course unfavorable. If you only update uv coordinates, you can remove this line. uvsNeedUpdate should be sufficient.

Also consider to develop directly with BufferGeometry to avoid any conversion overhead.

13

That did it! Thanks you! “elementsNeedUpdate = true” was taking up way too much mem.

14

Cool! I’m glad that your performance problem is solved :+1: