3

I´m trying to merge two geometries/meshes (red and blue) into a unique one. But after creating a new geometry and applying geometry.merge() I found that all the inner vertices and faces are still there (the green area).

I would like to remove all that extra information, as it generates visual glitches on the rendered faces and also I cannot calculate the merged volume correctly.. I need something like on the last picture, a single mesh that only includes the minimal external/outer faces and vertices, removing the inner ones.

enter image description here

I tried applying ThreeCSG to subtract meshes but I´m founding that it crashes constantly when trying to load big models. I also tried to apply a raycaster to detect the common faces, but this also has great impact on performance on big models.

Is ThreeCSG the only good option here? But as I cannot use it on every model, I should discard it. I would like to apply something fast that doesn´t depend so much on the number of triangles of the mesh.

Wilt
  • 41,477
  • 12
  • 152
  • 203
spacorum
  • 495
  • 6
  • 16
  • 1
    You can convert the ThreeCSG code into a generator and add yields to it so the browser doesnt dump you out. See my description at http://stackoverflow.com/questions/34631657/for-loops-are-disturbing-rendering/34820834#34820834. – fluffybunny Feb 12 '16 at 07:37
  • @spacorum I updated my answer with an example... – Wilt Feb 12 '16 at 13:56
  • @fluffybunny I´m still trying to get this yield concept. This are only a few code lines but extremely advanced for me. I simply cannot understand what this does and how to apply it to my current problem... – spacorum Feb 12 '16 at 16:17
  • Compared to what you are trying to do by intersecting meshes, my code is silly, not advanced. – fluffybunny Feb 12 '16 at 22:40
  • My coded is a kludge of sorts. Javascript is single threaded, and if your code doesnt return withing a set amount of time, the browser will crash you on purpose. By running little bits of your code in a settimer and then doing another settimer to run some more, you can inch your way through your algorithm. To make it 'easy' to use pre-existing code that has big for-loops, you can use a javascript generator (look it up) to turn the code into bite sized pieces you can then run in the timer chain. – fluffybunny Feb 12 '16 at 22:48
  • This sounds good. I use this concept in an uglier way and only were I don´t need the user to be waiting for secondary elements to load. But I think that if I can´t do it before the browser crashes, then I´m doing it wrong. I´m still trying to find out which one is the fastest method to merge so many meshes into a single one without inner vertices, and at the moment CSG seems to work well with cubes/spheres, but not with a 5-10Mb loaded model. Maybe I´m forcing the limits of Three.js/WebGL? A merge like this in Blender could put my computer on fire for 2-3 minutes, thinking about it.. – spacorum Feb 13 '16 at 03:52

1 Answers1

6

If you work with ThreeCSG and boolean operations you should try to define your objects as BSP-trees or nodes from the start. It will give more precise results and it might help you to get your bigger geometries working without crashing your browser.

I made a fiddle here where you can see what I mean. The result looks like this:

result of the boolean operations

  • On the left you see the shapes we use in the operation (only to visualize).
  • The boolean result in the middle was created by subtracting a THREE.PlaneGeometry that was converted to a BSP from a THREE.BoxGeometry which was converted to BSP.
  • The boolean result on the right was created by subtracting a native BSP plane from a native BSP box object.

As you can see the middle result has 5 more vertices meaning also more faces (1 extra in the top, both sides and the bottom and 2 more in the diagonal plane).

If you do another boolean operation on this result you will get even more points and vertices. Your BSP tree will grow exponentially...!

In other words your BSP tree will get bigger with each boolean operation making it slow and it will possibly also crash in the end.
If you want to do lots of boolean operations try to make native BSP shapes for better results instead doing boolean operations with converted three.js geometries.

So instead of:

myBSP = new ThreeBSP( geometry );

do:

var polygons = [
    // define your polygons using new ThreeBSP.Polygon( vertices )
];

var node = new ThreeBSP.Node(polygons);

myBSP = new ThreeBSP(node);

And then do your boolean operations...

Wilt
  • 41,477
  • 12
  • 152
  • 203
  • How I love a good JSFiddle to play with :) Thanks for your time. I may be lucky: I build the original meshes from shapes, which I can construct as I know the position of each one of its vertices. So changing this to polygons and then following your strategy should be somehow easy! I´m working on this right now. – spacorum Feb 12 '16 at 16:23
  • @spacorum Cool, that sounds good. It is a pity there are no native Three.js geometries that are more compatible with the BSP definitions. But a bit of custom code will do fine. – Wilt Feb 12 '16 at 16:25
  • After my first tries, I can tell that I was able to load the meshes as polygons instead of Shapes (I see it a little bit slower!). But when applying the .subtract() the machine crashes after subtracting the first 20 or 30 meshes. In fact what I want is .union() more than subtract, but this action doesn´t seem to work here (it only keeps my first mesh). It works in your fiddle, even so. Back to it, I must find a way! – spacorum Feb 13 '16 at 04:06
  • I have to say that I never do more then like 10 boolean operations on one object. ThreeCSG is not optimized, there is a certain limit to the size of the BSP trees that it can hande and will make things slow for sure. Good luck! – Wilt Feb 13 '16 at 09:18
  • @spacorum any luck merging your geometries? – Wilt Feb 23 '16 at 16:13
  • Hi, Wilt! Sorry, I missed the notification.. Well, I found a good way to do it, with intersections. But the method cannot be any more optimized, and I still had several problems when loading huge models with a high number of faces (the big ammount of raycast checkings simply kill the browser). So, it can be done, but at a high cost. – spacorum Mar 04 '16 at 13:40