Is my three project an environmental mess ? Problem with animation speed

Questions
,
1

Hi everybody,

I’ve got a problem on my R3F animation (I assume) that seems to be too heavy although I’m not sure it’s not a normal situation.

The animation loads correctly on all computers - but seems to make them whistle:

It loads very poorly and badly on smartphones :

  • 5 fps at most on android, and it works since I tried different things :
  • Device Pixel Ratio
  • Removing effect composer (just gained 5 fps)
  • Trying to destroy the scene block by block to know which was involved
  • All the glb files (8 to 50kb and two to 300kb) are handmade with blender & very simple, i tried to remove them, things do not speed up

All my models are (mainly lightweight) and the file is created with GLTFJSX

Only one model loaded with draco (not my model and compressed - it works well), <100kb

Each file (ex: Fourviere.jsx) imports its glb (fourviere.glb), and is then imported in another file that itself is imported in my canvas

Each different parts are separated in the code.

Is there any way I can know which funtionnality consumes the most ?
Is my canvas too big ?
Could the problem come from my assets ?

Is there something shocking in there ?

Capture d’écran de 2022-05-24 16-23-19

Here are the scenes’ files :
https://drive.google.com/drive/folders/1QLIIsHC5YE9bCdYKXUhj0Ne6sc9-DEdb?usp=sharing

2

On my system (Core i9 macbook Pro with Vega 20, retina display) it’s using about 60% of my GPU and about 50% of one CPU core.

I’m no expert on this, but here is the approach I take:

  • open your site in Chrome
  • open the developer tools, go to the Performance tab, and take a recording for about 10 seconds
  • zoom into see a typical frame.

I see something like this:

image
image2680×954 281 KB

You should take a look at all the function calls showing up - are any of them taking longer than expected? Are any of them running when they shouldn’t be?

2 Likes
3

That’s a clean frame stack :slight_smile:

2 Likes
4

Should getProgram() and setProgram() be getting invoked multiple times on every animation frame? That doesn’t seem right, unless you are changing the GLSL shader every frame, which would be unusual…

2 Likes
5

Here’s a view using the Chrome Javascript Profiler:

image
image1582×1174 184 KB

notice how much time is being spent in getProgram() and getProgramCacheKey()

1 Like
6

My problems seem to be solved :

  • Canvas was too big and needed to be resized to match device’s screen width
  • I also deleted all the non visible faces of GLBs in the anim’ (60000 triangles to 40000 triangles)
  • Canvas reloaded three times, I cleaned the code to get it to load only once
  • I also had a routing problem which had nothing to do with three.js
    Thanks a lot.

More accurately, I was loading a canvas with a fixed width (2100px), which was a problem on mobile screen (It was obvious… but I did not see this).