I am working on a project that requires several canvases to be on a page at the same time, each displaying their own Babylon scene.
I decided to try and and implement the new mutli canvas feature from 4.1 in an effort to reduce the overhead of having multiple engines and hopefully improve performance. After implementing it, framerates were consistent and smooth even when navigating across multiple pages, everything was working great on my desktop!
The major issue I am running into is on mobile. I’ve noticed that when a page originally loads, the FPS is what we would expect but as soon as you interact with a view/canvas that has input enabled, the framerate drops and animations become much less smooth. As soon as you touch outside of the active canvas, smooth framerates are returned.
I was able to reproduce this behavior by accessing this playground on my iPhone 12. Babylon.js Playground
Thank you for testing it out! There are no other types of input to test. I asked a few friends to try out the playground on their phone out of the 3 responses i’ve gotten so far:
iPhone 12 mini, iOS 15, safari: no drop in FPS
iPhone 12 Pro, iOS 15.1, safari: FPS dropped to 20 FPS.
iPhone X, iOS 15, safari: FPS dropped to 45 FPS.
I have tried on my iPhone 12, iOS 15 with safari, chrome, and firefox and I consistently experience a drop to 20FPS in each test. I am trying to gather more data to see if there is a pattern.
So far I’ve had 2 others (out of the 8 that I’ve asked) that had performance drop to 20ish FPS. All 3 instances (including my own) have been on iPhone 12s (mini, regular, pro), but its worth noting that another friend’s iPhone 12 mini ran perfectly fine with no dip in FPS as per my previous post. I understand this isn’t much to go off of and might not even be a bug with Babylon itself but I appreciate you taking the time to try it out!
Well, that took a while, but apparently this is because of the outline on the canvas element. If you remove the outline, then it’s just fine. This has nothing to do with Babylon
Sounds like @bghgary has solved this but just wanted to add that we encountered some performance challenges implementing multi-canvas views also.
It turns out using different sized canvases forces a resize on each view render so it’s important to use the same size canvases.
Also, @Evgeni_Popov kindly added the ability to disable a view for us, so we can use intersection observers to enable a multi-canvas view only when it’s visible.
We also use intersection observers to only load the 3D after it scrolls into view, but that was mostly for SEO/page rank/speed reasons.
This fixed it! Thank you so much for your time in looking into this! Do you by any chance know why the outline impacted performance? It surprised me that a CSS property would throttle the FPS in rare cases. No worries if not though!
@inteja Thank you for sharing your previous post. I had read it before in my previous research around render views and I learned a lot so I appreciate you asking those questions!
I can only guess that the layout code is interfering with the canvas rendering somehow. Even if you leave the outline on, but the outline is not visible, then it seems to be fine.
