Performance problem with CSG too Slow

Hi everybody,

I’m trying to use Threejs to visualize an 3D object created from a 2D SVG.
Here is an example (Please wait full load almost 20s) :

As you can see in Codepen I use an SVG from which I extract the paths to “engraved” a box. The “engravement” have a different material from the surface.

1/ CodePen :
The result I have on the codepen is almost what I want to achieve but it’s so slow to calculate the CSG.subtract(box, inside ). Almost 20s on my computer…

=> I would appreciate to get some idea on how to do it faster ? I thought perhaps I need to make a Shader script or something ?

2/ My Dream :
In fact the way I make the engravement is not exactly what I wanted to achieve at first.
If possible I would like to make something that seems more complicated to me : The engravement depth should vary with the width of the path like on this drawing

=> Do someone have an idea how to make it ?
(Pls don’t tell me to use Blender, the idea is to be able to make all these dynamically online…)

have you tried with three-bvh-csg this would be the fastest and most performant way of creating csg meshes on the fly i think…

Would it be possible for you to have a negative SVG? In this way you can make the grooves without CSG - just load the SVG and then extrude it. The face from your code need 1-2 seconds to show up.

Another option is to make visual grooves that react on shading, but with a flat surface – by using bump map and/or normal map.

Hi, yes I tried but not better in fact…

Yes I could try to do that. Perhaps with PaperJs I can handle to create the negative quickly.

I thought about making something with shader but I’m not 3D expert so I don’t really know how to handle that and if I could really work cause I need to create the map with code also.
It seems to me I would need to to generate a picture like this one in the middle for the normal mapping and I didn’t have any idea how I could generate this from my SVG…seems difficult !

While traveling in the subway, I got an idea. The source is an image, the geometry is a THREE.RingGeometry and the positions of the vertices depend on the color of the image pixels. I hope you do not mind a portrait of Che Guevara. Here is an online demo with closeup snapshots from the front and from the back:


I’m kind of happy. I will add this into Computer Graphics Études.


Whaou what an idea ! I have to test on my side if I can use something like that but I have to say it looks like I could make something like this…I keep you inform !

No I don’t ! This photo is one of the most use in the world I think :wink: and always better than a cat indeed.