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

[caBattista]

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

[Chaser_Code]

Use instancing three.js examples

[Mugen87]

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?

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.

[Chaser_Code]

Also you can use InstancedBufferGeometry with custom shader

[caBattista]

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 .