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?
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