I’m currently working on some project that displays the globe that rotates.
Playground of the code is here: Babylon.js Playground
In the playground I’m using simple textures as a demo, in my project I’m using this files that are converted to jpg’s and png’s,
Files im using: Dropbox - NASA Earth Textures - Simplify your life
The issuse I’m having is that the globe lags and has FPS drops on my phone (Note 20 Ultra Exynos version).
On the same page I have one canvas that serves as a background for the page and one more canvas that has one body that uses matter js physics lib.
Performance on the laptop I’m developing on is always 60 fps, and the laptop is not strong at all, 4-core i3, and integrated gpu.
Globe is tested on Iphone 8 plus, and there the globe is also at 60 fps at all times, even with more matter-js bodies added.
I also tested the globe on lower-end phones and there it works not really great but that is to be expected since I’m using 3 canvases, but it was consistent, around 35 FPS at all times.
I tried the following:
Using lower res pictures,
Removing 2 canvases, only globe remaining, and that did solve the issuse, however I can’t do it that way.
Removing babylon cdns
Examining all js scripts i use on that page, i did not found anything that could cause that behaviour
Disabling power saving mode on my device
Removing ad blocker, i had some issuses with this before i so tried
I looked at the code and I really don’t know what could cause that.
If the performance was bad both on my phone and Iphone 8 Plus that would at least indicate something. But on my phone fps ranges from 40-60 fps, it’s higher when the model rotates without me touching it, but when i try to rotate it my self, fps drop significantly.
I can provide html files, rest of the scripts I’m using, any more info you would need. I’m super stuck on this issue, I can’t pinpoint what causes the issue in performance across devices.
Please help kind people of Babylon