Improve BufferGeometry display time with large number of polygons

Questions
,
1

Hello there,

Please find on this codepen a part of my code responsible of showing a plate composed of subsheets.
It can receive by JSON up to a large number of subsheets (from 100 to 400).

I need this code to be the fastest possible to render each subsheet. I calculated the time of each function, and the problem seem to come from createSheet(triangles) line 115.

How can I optimize this code so it can run faster?

Here is an image of a plane composed of 20*20=400 subsheets (extreme case). The user can rotate this plane by scrolling to see a live result (rotations are computer by a backend), meaning the function createSheet is very sollicited.

image
image1174×567 45 KB

As you can see on the top right corner, the FPS went to 0 when I was moving the plate.

Thank you really much for helping!

2

As a quick fix, instead of creating a new geometry for each Mesh, use a single 1/1 PlaneGeometry, and set the mesh x and y scale instead of updating the geometry vertices.

As a better alternative, use InstancedMesh, this will require you to revise a good part of your logic, but the performance gain is worth it.

Here is a quick example using instanceMesh, with a 1000/100 grid, that’s 100.000 planes. (Zoom out to see the entire grid)

The same goes for the Lines, create a single Line and update its geometry vertices with data of each new plane.

1 Like