CSG operations without using libraries

Is there any way to mimic boolean operations (intersection,subtraction..) in three js without using libraries? the problem is poor performance of those libraries (e.g. three-bvh-csg) in real time use cases with complex meshes.

Desktop 3D professional apps can’t do this either.
It may be possible inside shaders. But this is outside the scope of meshes (triangles-based shapes/computation ) and limited to formula-based geometry like NURBS

1 Like

There could be shortcuts if you can constrain the problem further. For example, only dealing with spheres or boxes, or only doing 2D subtraction using the stencil buffer. But supporting arbitrary boolean operations on arbitrary meshes, well …there’s a reason these libraries are complex, and that CSG is considered out of scope for the core three.js library. :slight_smile:

Another you could try is manifold-3d .

3 Likes

You can mimic quite limited specific cases. There are some official demos with clipping:

For some other specific cases you can modify the shader to discard unwanted parts.

If you can define your objects with SDFs, you might mimic CSG operations too.

But for a general case, CSG has no fast and librariless alternative, as far as I know.

2 Likes

You can do visual only csg via stencil operations: 3.7 Constructive Solid Geometry with the Stencil Buffer

( but it is not trivial ! but can be good if you can get it working, for truly realtime preview without thrashing your CPU )

2 Likes

Your question is a bit X/Y, if the performance is the actual issue, maybe try using a solution like manifold (manifold-3d on npm) like donmccurdy mentioned. For my use case (CSG operations between text and box geometry), I found it to be basically instant. Check out how I use it: gh-skyline/packages/app/src/manifold at master · battlesquid/gh-skyline · GitHub and gh-skyline/packages/app/src/three/skyline_base.tsx at 1aa977ceac6e285e68e7b20828624162a7215351 · battlesquid/gh-skyline · GitHub, and also this manifold-3d example.

IIRC, BabylonJS also uses manifold under the hood for CSG operations.