Different performance on different browsers and devices

Questions
1

Hi there!
I’ve recreated littleworkshop’s showroom. But there are some performance issues which is varied on different devices and browsers. When I open it on Google Chrome version 79.0.3945.130 on my Acer Swift 3 15" with 8GB RAM, 1 TB Optane memory, Intel Core i5 8th gen processor, Intel UHD 620 graphics I get FPS around 10-20
Google chrome v79
But when I open it on Microsoft Edge the result is around 50FPS.
Microsoft Edge
In opera v62.0.3331.72, it’s around 30-40 FPS
image
In the Firefox browser, it’s not so good as well.

Then I asked my friends to test the project in different browsers. And the results are varied. In some people, the project is working at around 40-60 FPS on Chrome. In others, Firefox is working perfectly.

Here’s my console

image

Here’s my model

demo: https://teo0303.github.io/ARMode/

How can I boost performance?

*** EDIT ***
renderer info
image

2

When shrinking the browser window and thus lowering the resolution, the performance gets better on my iMac. This usually indicates that the app is fragment shader bound.

I’ve inspected your scene with three.js dev tools and noticed that many objects like the floor or the table are rendered with double-sided materials. Is there a special reason for this? For such objects, it should be totally sufficient to just render the front side.

3

Thank you for your suggestion. I’ll try to remove the back-side from some objects. Are there some other possible problems that might be affecting the performance? For example to many render calls or smth?

4

The amount of draw calls (27) seems to be okay. I’m not sure if your scene really needs almost 500.000 triangles. This is something you might want to optimize, too. Also reducing the amount of textures will produce a better performance on mobile devices because of the lower GPU bandwith and memory usage.

2 Likes