# Rendering thousands of objects results in low FPS but also low GPU usage

**URL:** <https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142>\
**Category:** Questions\
**Tags:** instanced-mesh, performance\
**Created:** [July 9, 2022, 9:02am UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142 "2022-07-09T09:02:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![caBattista](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cabattista/32/26293_2.png) [@caBattista](https://discourse.threejs.org/u/caBattista)\
**Post date:** [July 9, 2022, 9:02am UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142/1 "2022-07-09T09:02:45Z")

</div>

Hi everyone,

im trying to make three js render **4000** of these simple Boxes.

`let mesh = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial({ color: THREE.MathUtils.randInt(0, 0xffffff), wireframe: false }) );`

The problem is I get about **25** fps but my gpu usage is very low. I have a gtx 1070. I can get **120** fps at **1000** Boxes. The fps gets better when I look away from them.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/b/6bda1a0c41b0e8073d8f6ae041b8c3132702abcc.png)

I am using requestAnimationframe fame for rendering, but i’ve also tried setIntervall without much difference.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/1/01f02aaeb3b1631e33fa78fc12ce37e31e652ca7.png)

Does anyone where the bottleneck could be? My chrome process cpu usage is also pretty low.  
I suspect it has something to do with the internals of three js or even web gl itself.

I’m pretty new to all this so please bear with me 🙂

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 9, 2022, 9:38am UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142/2 "2022-07-09T09:38:49Z")

</div>

Use instancing [three.js examples](https://threejs.org/examples/?q=instanc)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 9, 2022, 9:48am UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142/3 "2022-07-09T09:48:53Z")

</div>

Just for clarification: The performance of your application is bad since the number of draw calls is too high. There are several existing topics in this forum about draw call reduction e.g.:

> [@Best Way to Reduce Draw Calls?](https://discourse.threejs.org/t/best-way-to-reduce-draw-calls/25186):
>
> Hey! So, I’m trying to reduce draw calls in my project. But here’s the catch: I’m using TransformControls in order to move objects. The approaches I can envision are as follows: Create an InstancedMesh for each type of object, and when I select and instance via raycaster do the following: Set the instance as invisible in the instanced mesh, or something similar, then create a mesh with the same geometry and material in its location to be moved by TransformControls. Then reverse it when selec…

Using instanced rendering e.g. via `THREE.InstancedMesh` is one possible approach to improve performance.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 9, 2022, 12:18pm UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142/4 "2022-07-09T12:18:56Z")

</div>

Also you can use InstancedBufferGeometry with custom shader

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/1/d120b0472b354af5ca7a1ce2ab9687a63a83e8d3.jpeg)

---

<div class="post-metadata">

**Author:** ![caBattista](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cabattista/32/26293_2.png) [@caBattista](https://discourse.threejs.org/u/caBattista)\
**Post date:** [July 9, 2022, 3:17pm UTC](https://discourse.threejs.org/t/rendering-thousands-of-objects-results-in-low-fps-but-also-low-gpu-usage/40142/5 "2022-07-09T15:17:08Z")

</div>

Thanks a lot for your replies. I can render 1 million cubes as instanced meshes at 120fps now and my gpu ist 100%.  
That’s more like it 🕶.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/67626f4882d67cbf7b1fa0d4b0d76de4157373f1.png)