elalish / manifold

Geometry library for topological robustness
Apache License 2.0
816 stars 87 forks source link

Suggestion: Simple Three.js robust Booleans example #75

Closed bhouston closed 2 years ago

bhouston commented 2 years ago

I think it would be cool once you have a JS interface and a WASM module to create a Three.js example of just simple CSG Booleans and submit it to Three.js as PR. It wouldn't even need all the other functionality that this library offers to start -- and that may help get it accepted as the WASM bundle will be smaller.

Robust CSG booleans have been missing from Three.js and other online WebGL/WebGPU library and this could fulfill that need. I think that just robust CSG booleans would be very interesting to the Three.js project.

elalish commented 2 years ago

CSG usually refers to a rendering trick that makes Boolean operations look right, but doesn't actually compute them. For graphics that is often much simpler. This library is for actually intersecting meshes, so more in the realm of a design tool than a rendering tool.

bhouston commented 2 years ago

CSG usually refers to a rendering trick that makes Boolean operations look right, but doesn't actually compute them.

I was refering to actually intersecting the meshes and calculating the mesh result live in the browser. Similar to what we did with Clara.io back in 2013 here - and this isn't a rendering trick, try it in the editor, it is live Boolean mesh result (and completely unreliable on complex meshes):

CSG Substraction Animation  (1)

https://clara.io/view/86e0579a-4dc8-4145-81a8-6ad9f765b30b

bhouston commented 2 years ago

Ah, I understand. CSG often refers to building from primitive shapes using Boolean operations. I guess I've seen CSG misused so many times (e.g. https://evanw.github.io/csg.js ) then I've conflated it with Boolean operations and continued the confusion.

I am interested in Boolean operations only. I've edited the title.

manthrax commented 2 years ago

imo Constructive solid geometry/CSG is a fine term for geometric boolean operations or for the visual only version. They are not mutually exclusive. There are already a number of visual/stencil buffer tricks available for rendering only. i.e. Goldfeather and ZBuffer. but they rely on having a well structured graph of operations that isn't always trivial to construct/implement.

Here's a demo of a CSG lib I maintain that is based on evanw's CSG but extended to preserve uvs/normals/colors and materials: https://manthrax.github.io/THREE-CSGMesh/demos/CSGShinyDemo.html (you can hit W to see wireframe.. and show that it's actual geometry and not a stencil effect.)

What would be lovely to find is something that can do this but faster! and for more complex objects! :)

Right now it's N squared with the number of polygons involved since there is no search acceleration/culling strategy.

Having something more optimal could unlock a whole host of runtime web procedural generation tools!

elalish commented 2 years ago

@manthrax Here here! And agreed that CSG and so many other terms in the CAD space tend to be overloaded and confusing. In any case, it sounds like this library is well-aligned with your desires. Of course it isn't JS, but there are a variety of ways we could look at making it web-accessible (WASM, REST API, ...).

pca006132 commented 2 years ago

@elalish is this considered finished? Or do we want to extend the three.js example?

elalish commented 2 years ago

I definitely want more, but agreed that we now have a simple three.js booleans example: https://elalish.github.io/manifold/bindings/wasm/examples/index.html