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

**URL:** <https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483>\
**Category:** Questions\
**Tags:** react, react-three-fiber\
**Created:** [May 24, 2022, 1:53pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483 "2022-05-24T13:53:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobertBeric42](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robertberic42/32/10608_2.png) [@RobertBeric42](https://discourse.threejs.org/u/RobertBeric42)\
**Post date:** [May 24, 2022, 1:53pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/1 "2022-05-24T13:53:02Z")

</div>

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:**

- [https://site-iyzmct496-vil-silicofr.vercel.app/](https://site-iyzmct496-vil-silicofr.vercel.app/) (play with step 2 and step 1 to test)
- On brave old computer it goes up to 35-40fps ans on my computer (32go ram, rtx-3060) 55-60fps

**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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/4/a49b383c5568739aaae4447f772c5cf07bdf50ff.png)

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

---

<div class="post-metadata">

**Author:** ![Mike\_D](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mike\_D](https://discourse.threejs.org/u/Mike_D)\
**Post date:** [May 24, 2022, 8:50pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/2 "2022-05-24T20:50:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/6/c63e46bd223eb047d24485a2a0da8141784c2f56.png)

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?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 24, 2022, 9:14pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/3 "2022-05-24T21:14:46Z")

</div>

That’s a clean frame stack 🙂

---

<div class="post-metadata">

**Author:** ![Mike\_D](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mike\_D](https://discourse.threejs.org/u/Mike_D)\
**Post date:** [May 24, 2022, 9:18pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/4 "2022-05-24T21:18:17Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Mike\_D](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Mike\_D](https://discourse.threejs.org/u/Mike_D)\
**Post date:** [May 24, 2022, 9:22pm UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/5 "2022-05-24T21:22:43Z")

</div>

Here’s a view using the Chrome Javascript Profiler:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/1/512d60616812ccc87338188107011bb38c2e505d.png)

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

---

<div class="post-metadata">

**Author:** ![RobertBeric42](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robertberic42/32/10608_2.png) [@RobertBeric42](https://discourse.threejs.org/u/RobertBeric42)\
**Post date:** [May 30, 2022, 9:51am UTC](https://discourse.threejs.org/t/is-my-three-project-an-environmental-mess-problem-with-animation-speed/38483/6 "2022-05-30T09:51:04Z")

</div>

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).