Performance largely suffers on the phone (Note 20 Ultra) compared to laptop and older Iphone

Questions
, ,
1

Hi all,

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
Reinstalling chrome
Updating everything
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

2

You should start by profiling the code with the chrome dev tools to see if it is gpu or cpu related and then we could try digging in the details.

3

Thank you i will try that and post the results

4

Here are the results:

Laptop:
laptop_fps.json.zip (2.8 MB)

Phone (Note 20):
phone_fps.json.zip (3.0 MB)

If you need anything more I’m more than welcome to share, I did not use dev tools performance tab before so sorry in advance and thank you

5

It looks like you are fully GPU bound

image
image1644×132 22.5 KB

which is pretty rare :frowning: Are you using adaptToDeviceRatio ? and I guess the screen is huge making it way to heavy to render ?

6

I’m not aware of that feature so I’m positive I’m not using that, yes the screen is bigger than the average phone, is it possible that i have some malware on the phone that causes gpu to be fully bound?

7

nope, I do not think so.

could you try to share the result of this page WebGL Report

8

I have a samsung A8 tablet i use purely for testing stuff and I can tell you it is the worst piece of junk on the face of the planet when it comes to rendering 3D in a browser. Simple scenes that run well on nearly any other potato. I didnt investigate that any further myself… Im posting here because maybe there is some pattern since your device is a samsung as well…

EDIT , here are the results from my tab8 in case it helps for comparisons :

Screenshot_20231103-201140_Chrome
Screenshot_20231103-201140_Chrome720×3120 145 KB

9

nothing suspicious there but @Corazone777 is the playground running fine for you or is it slow as well ?

on a similar scene lets say rendering a gltf model

10

The playground runs at ~43fps on my tab8 , again just posting to help with comparing on a weak samsung device.

1 Like
11

it feels like it runs on software mode

12

Here are the results of the webgl report

Laptop:

laptop_web_gl
laptop_web_gl1920×1053 435 KB

Note20:

note_20
note_20428×1280 90 KB

Iphone8:

iphone_8
iphone_8720×1280 148 KB

iphone_8_2
iphone_8_2720×1280 91.6 KB

Also playground is working fine 60 fps all times without any issues, it’s the project im working on, first time I’m seeing this issue, i tried multiple bigger babylon js examples and project and they worked just fine.

13

Thank you for sharing your results, unfortunately I’m very new to any kind of graphics programming and while I did heard about some of the things in the webgl report i cannot tell you what is better or worse compared to my device

14

so it might be specific to the shaders/textures you are using.

You could try little by little disabling features and or reduce the size of the textures. Also can you share with us the rendering size. (engine.getRenderingWidth() and …Height())

15

I did try to remove features from the page little by little and that did help, but i need them.
Here is rendering sizes
Phone: Width initial => 524 Height initial => 518

The issue could be related to resizing the canvas.
Also, if you could help me with something else, I don’t thing a new thread is needed
I get these warnings in the console on chrome:

DevTools failed to load source map: Could not load content for webpack:///node_modules/@babylonjs/core/index.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack:///node_modules/@babylonjs/core/abstractScene.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack:///node_modules/@babylonjs/core/Actions/index.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack:///node_modules/@babylonjs/core/Actions/abstractActionManager.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

I switched from cdns to webpack, everything on the page works but they are just annoying and make debugging harder since it’s a whole lot of them in the console.

16

I was able to pinpoint what causes the issue, it was a mistake on my part, there was an extra loop where it should not be. Thank you all for help. Also i was able to fix webpack problem as well.

1 Like