My goal is to restart a canvas on a website without reloading the page, making the restart dynamic. However, I've noticed that after multiple restarts, the animation slows down and memory usage increases.
The situation is complicated by my use of MeteorJS with IronRouter framework to load pages. Changing the URL only removes nodes from the DOM without completely refreshing the 'page'. Returning to the page with the canvas could be considered a dynamic canvas restart, but I haven't found a solution for that either.
I am addressing this issue from two perspectives:
- A simple page where a button triggers the canvas restart.
- Applying the solution to MeteorJS with IronRouter and repeatedly navigating back to my page with the canvas.
Note: My canvas content includes WebGL (in ThreeJS).
1. Deleting and re-initializing canvas dynamically.
In this scenario, I encounter the following issues:
- Animation not smooth
- Memory increase. Specifically:
https://i.sstatic.net/M41kO.png
(source: hostingpics.net)
- Page loaded, playing with canvas / 2. Restarting the canvas 30-40 times (I continuously restarted so I'm unsure why the increase isn't linear) / 3. Playing with canvas / 4. Closing the tab (reloading the page only frees a small fraction of what has been consumed)
There have been few questions asked on SO about solving these issues, and implementing partial solutions does improve the problem. Two main suggestions I've come across are:
- Clean up canvas-related parts (nodes, variables, functions) from the DOM (Meteor already does this, but in this case it's insufficient to prevent the issues).
- If
requestAnimationFramehas been called, assign it to a variable so thatcancelAnimationFrame(variable)can stop it. This seems to prevent frame rate drops, although memory consumption remains high, at least ensuring smooth movements.
Even with these solutions, the memory problem persists.
Here is an example: http://codepen.io/Astrak/pen/RNYLxd
2. In MeteorJS: struggling with the implementation.
This is what I tried in my app, declaring
id=requestAnimationFrame(myAnimation) Template.myTemplate.destroyed=function(){
cancelAnimationFrame(id);
document.body.removeChild(document.querySelector('canvas'));//useful in Meteor ?
};
Despite these instructions, the animation becomes sluggish much faster with MeteorJS compared to the previous example, becoming unresponsive after just 3-4 page changes. The same memory issue persists.
Thank you for any comments or answers, and happy coding :)
Related questions:
Performance drop on multiple restart of scene from threejs
Performance drops when trying to reset whole scene with Three.js
How do we handle webgl context lost event in Three.js
Pause, resume and restart Canvas animations with JS
How can I restart my function?
JavaScript restart canvas script