Way to reduce performance overhead of multi-canvas views?

Hi all. I have a multi-canvas view app embedded in a large WordPress site, which I can’t share publicly just yet. Some view’s animation is driven by user scroll. Other canvas views are interactive (drag to spin and clickable hotspots). Each individual view’s performance is reasonable across browsers and platforms but when there are multiple canvases/views on a heavy HTML page, performance suffers, especially in Firefox and Safari. I’ll certainly do some more profiling, but does anyone know how to prevent processing or rendering of a given view when it’s offscreen (i.e. further down the page) or not in focus (i.e. render once only then only enable the render loop again for that view on pointer over)?

Just trying to find ways of improving performance in this unique use case.

I may be able to share the application in private message.

You should make sure all your canvas are the same size, else there is a resizing of the master canvas each frame that can kill performances.

Also, I think we could add the possibility to enable/disable a view. When disabled, we would simply not manage that view (the render loop not called for it). Would that work for you?

Thanks @Evgeni_Popov

Yes having the option to enable/disable a view would be much appreciated!

I’ll also try setting a consistent canvas size. I wasn’t aware of that constraint. Our current site design has multiple responsive canvases on any given page so they can all be different sizes. I’ll ask if we can tweak the design to fixed canvas sizes

Here’s the PR:

Once it is merged, you will simply need to set enabled = false for the view you want to disable:

const view = engine.registerView(preview);
...
view.enabled = false;
2 Likes

Thanks a lot @Evgeni_Popov .