Performance CSG

Questions
1

Can someone give some examples when the existing three.js CSG libraries (for example) perform porly, and in which cases their peformances are good (fps, cpu-heavy?, gpu-heavy?).

My use case is making a round hole in a box. I’m considering if it’s worth using a white cylinder to simulate the hole to improve performance instead of making an actual hole with csg:

141962539-8be775d0-c271-4872-baf8-c5e79c91b1bf

Which option would be best if I only create the box and the hole once?

Which option would be best if I need to edit box parameters? With the white cylinder simulation I can just re-scale and re-position the mesh, with csg I would have to recreate it.

2

I cannot tell you much about performance of CSG, but I guess if you only have one hole to demonstrate, there should be no problem with performance at all. It all depends of the complexity of your geometries. Check out the actual demos of three-csg to get an impression. GitHub - manthrax/THREE-CSGMesh: Conversion of a CSG library for use with modern THREE.js

If you can fake it with a white cylinder and it looks fine to you, use the cylinder.

3

My last experiment with CSG is that it took a large of memory to intersect 2 meshes which crashed my browser ( roughly 4 GB limitation) when I had 551610 vertices merged with 138 vertices.
With 2 geometries of 22176 vertices and 108 vertices, the browser hanged for 8s.

So if you have the same things, my thinking is to pass it to a web worker or to process on the server side.

4

For a simple shape like this I would probably use an extrusion instead of CSG. See this example:

https://threejs.org/examples/?q=shape#webgl_geometry_shapes

5

Thank you for sharing this example!

image
image414×511 8.03 KB

Do you know using shapes/extrude geometries is more performant than using CSG?

6

I would say pretty much always.

7

Thank you very much:)

8

Creating a hole in box is not that hard and it is the best way to go. But you can always cheat.
C&C.html (3.5 KB)