CSG with BufferGeometry (three >= r125)

Resources
#1

As part of my project enable3d, I maintain a CGS version that works with BufferGeometries.

It uses Geometry, DirectGeometry, Face3 and the old BufferGeometry().fromGeometry under the hood. But it works great!

You can install it from npm and use it in any three.js (>=0.125.2) project.

// for now, install the latest dev version
npm install @enable3d/three-graphics@0.22.0-dev.1

import { CSG } from '@enable3d/three-graphics/jsm/csg'

const meshC = CSG.intersect(meshA, meshB)
const meshD = CSG.subtract(meshA, meshB)
const meshE = CSG.union(meshA, meshB)

scene.add(meshC, meshD, meshE)

To see it in action, check out the threejs-ammojs-webpack-example.

127.0.0.1_8080_(Pixel 2 XL)
127.0.0.1_8080_(Pixel 2 XL)2881Ă—1438 120 KB

11 Likes
#2

Hi Yannick,

Does this work with custom made geometries (irregular geometries) with thousands of vertices of both meshes ?

Looks great !

#3

Thanks :slight_smile:

I don’t know if there is a limit. But in this post, I have subtracted two boxes from Suzanne and it works great!

1 Like
#4

There isn’t a built in limit, but CSG operations are slow when both geometries are high poly… you can work around this by using a lower poly intermediate object…

Instead of having complex object A subtracting from complex object B, instead make a single box “C” and subtract C from B, and subtract A from the result of that, then merge the results back together.

Then if you need to make adjustments, you only need to repeat the last step, and that goes quicker. Here’s some screenshots of embossing text on some complex geometries:

image
image2560Ă—1440 885 KB

image
image2560Ă—1440 1.11 MB

3 Likes
#5

There are various acceleration structures that can be used beyond the BSP tree to optimize CSG, but they each have their own caveats and bring along their own set of tradeoffs, but with clever structuring of the operations you can work around the slow NxN2 operations.

2 Likes
#6

This is great.
Is there an online in-browser example?
Can the Boolean operations perform per-frame? Ie: animateable?

#7

http://vectorslave.com/csg/demos/CSGDemo.html

http://vectorslave.com/csg/demos/CSGShinyDemo.html

and a more complex experiment:

http://vectorslave.com/csg/v2/index.html

1 Like
#8

Whoops… to be clear… this isn’t OP’s library… this is my library that OPs was forked from, and I have recently updated for latest threejs. The functionality may vary so caveat emptor. :slight_smile: You can check it out here: GitHub - manthrax/THREE-CSGMesh: Conversion of a CSG library for use with modern THREE.js

2 Likes
#9

Wow.
Some unexpectedly yet seriously performant things going on there.

Definetely following this, as it’s right up my ally.
Thanks for sharing!

1 Like
#11

Doesn’t work for subtracting Mesh with ShapeGeometry.

#12

Hi,can you add a new feature that maybe allow us to apply another material to the intersection parts?