CSG in Babylon

[Feldspar]

Hi guys,

 

I wanted to share with you a custom library I made, that was very helpful on my project. It implements the basic constructive operations on meshes, like union, intersection, subtraction etc. In 3 words, it's called "constructive solid geometry". The library is an adaptation from csg.js (http://evanw.github.com/csg.js) for BabylonJS meshes.

 

 

You will find this lib useful if you meet the need to dynamically build your own geometry with basic primitives. For instance you can carve cylindric holes in bigger cylinders to create pipes (wink wink to all old-school Half-Life mappers down there ).

 

Anyhow, you can find the repository over here : https://github.com/CraigFeldspar/BabylonCSG.

I'm still testing it, so feel free to signal any bug you would find..

 

Cheers !

Feldspar.

[gwenael]

Awesome according to pictures.

[Dad72]

This is excellent. This could be integrated has babylon if Deltakosh is in agreement?

 

Good job

[davrous]

Very cool!

 

Have you hosted an online demo somewhere?

[GameMonetize]

I want a pull request!!!!!!!

[AndyBeaulieu]

Very nice!

 

Any chance a boolean operation could also update the underlying Cannon.js physics body? 

[Feldspar]

Thanks for your feedback !

 

@davrous : No demo atm, but i'm gonna set up a jsFiddle with some tweak possibilities when i get a little free time.

 

@deltakosh : My pleasure I wasn't sure if you wanted this module to be part of Babylon, that's the reason why I created a repo. I'm still working on making it work with MultiMaterials though, the PR will follow just right after.

 

@AndyBeaulieu : I did not think about that for now, but I guess if you apply the exact same operations to Cannon.js solid primitives, you could get some decent result. Try to convert Cannon.js objects to CSG polygons and see what happens ! Looking forward to it

[GameMonetize]

Hello,

 

I've just integrated your great code. My next ask would be: Could you create a small demo like this ones that showcases features of CSG ?

var CreateFogScene = function(engine) {    var scene = new BABYLON.Scene(engine);    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -20), scene);    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 100, 2), scene);    var sphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 3, scene);    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 3, scene);    var material0 = new BABYLON.StandardMaterial("mat0", scene);    material0.diffuseColor = new BABYLON.Color3(1, 0, 0);    sphere0.material = material0;    sphere0.position = new BABYLON.Vector3(-10, 0, 0);    var material1 = new BABYLON.StandardMaterial("mat1", scene);    material1.diffuseColor = new BABYLON.Color3(1, 1, 0);    sphere1.material = material1;    var material2 = new BABYLON.StandardMaterial("mat2", scene);    material2.diffuseColor = new BABYLON.Color3(1, 0, 1);    sphere2.material = material2;    sphere2.position = new BABYLON.Vector3(10, 0, 0);    sphere1.convertToFlatShadedMesh();        camera.setTarget(new BABYLON.Vector3(0, 0, 0));        // Fog    scene.fogMode = BABYLON.Scene.FOGMODE_EXP;    scene.fogDensity = 0.1;    // Animations    var alpha = 0;    scene.registerBeforeRender(function () {        sphere0.position.z = 4 * Math.cos(alpha);        sphere1.position.z = 4 * Math.sin(alpha);        sphere2.position.z = 4 * Math.cos(alpha);        alpha += 0.1;    });    return scene;};

[GameMonetize]

Up

[GameMonetize]

OK I started a demo:) but I have issue with box.subtract(sphere). I created an issue on your github project:)

[Feldspar]

Sorry, I was away for a few days, gonna have a look asap.

Thanks

[Feldspar]

David,

I looked into it and it seems CSG did not handle degenerated triangles (3 points aligned).

 

I patched it, and your example is now working fine for me. Can you try it and give me a notice if everything is OK ?

[GameMonetize]

It works very well. new demo will be cool

 

thanks a lot

[Feldspar]

Awesome, thanks for making a demo for it, i'm kinda overbooked right now.

Looking forward to it !

[AlbertoBonn]

Fantastic, thanx a lot!

[culeaalex]

How can I make this work for plane? When I try to make a hole in a plane with a sphere (subtract), the result is the same plane with a dent in it.

[GameMonetize]

try with a box with a really small scale on one direction

[culeaalex]

try with a box with a really small scale on one direction

I thought this will be the only sollution.

[ancientholiday]

How to make intersect and subtract work for imported meshes?

Please see file attached.

 

I am trying to make boxes cut skull.babylon mesh however it does not work when i make var a = the scene.mesh[0]indexCSG.html

thanks,

[BartW]

This is awesome! I guess when you want to animate an object intersecting another object, the mesh needs to be regenerated each frame?

[JohnK]

59 minutes ago, BartW said:

This is awesome! I guess when you want to animate an object intersecting another object, the mesh needs to be regenerated each frame?

Not necessarily, though it does depend on what you wish to achieve. If you want one mesh to move through another creating a hole in the mesh passed through then as in the following playground  you can create the  before and after meshes and swap them at the appropriate time https://www.babylonjs-playground.com/#FPIYDA

[BartW]

I was thinking more in the direction of this type of mesh intersection:
https://www.thisiscolossal.com/2018/06/virtual-reality-cat-explorer/

[JohnK]

So you need dynamic subtraction of multiple meshes. Have you tried CSG with invisible meshes? That way you might get way with just disposing of and re-creating the CSG and mesh from CSG each frame. By the way personally I would ask a new question rather than adding to this topic which is a really a demo thread. I would show the video and ask the question anew. Up to you of course. ?