Optimizing performance in a scene with random generated structures in unknwon order

Questions
1

I have following scene:https://jsfiddle.net/Browork/u39dksf1/125/

renderer.info.render gives me:

{
  calls: 496,
  frame: 86,
  lines: 6720,
  points: 0,
  triangles: 8384
}

for 601 cubes/cylinders + edge drawing

I was wondering how I could increase the performance of the scene (e.g. reduce the draw calls).
I know that I can use MergedGeometries or Instanced Geometries for the big plate: https://jsfiddle.net/Browork/f6apns1c/3/
renderer.info.render gives me then:

{
  calls: 4,
  frame: 179,
  lines: 4812,
  points: 0,
  triangles: 6412
}

but I don’t know how I would adress the meshes, that are above the big plate.
In reality the structure of every mesh above the plate would be different. E.g. 3 Cylinders in a row etc, the structure is specifiedby a received json string.

Later I want to make it possible to change the size and position of the big brown plate, the smaller cubes and cylinders in the plate. The same applies to changing the size and position of the units of the meshes above the plate. Moving the top object should not change the relative position of the children objects.

At the end I aim to draw about 2000-3000 cubes and cylinders.

2

You could just have dynamic geometry. Think of it as 1 geometry, 1 soup of triangles. You pre-allocate enough space to fit all of the trinalges that you want and you just add your shapes into it. It’s different than using standard geometries, but you will always be able to have just 1 draw call that way.

To handle excess of the triangles - you can always use draw range parameter.

Alternatively, you can have several instanced meshes, one per type of shape/material. So instanced mesh for cylinders, instanced mesh for cubes etc.

1 Like
3

With dynamic geometry you mean I would have a simple BufferGeometry and add the seperate geometries to it? Would I use BufferGeometryUtills for this for merging?

How do I handle the point of z-fighting, which I solved via a polygonoffset. Or would I have one geometry für the meshes themself and a seperate one fpr the edges? (Like I did in my second example)

I forgot to add one thing: It should be possible to click on one cylinder or cube and turn it yellow for example and display properties of the mesh.
With instancing I can get the mesh via an index, but in a soup I don’t know the order of the meshes.