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

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.

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

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

Use instancing three.js examples

1 Like

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

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

Also you can use InstancedBufferGeometry with custom shader

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 :sunglasses:.