Drawing outside edges of a Mesh created from CSG

I have following scene with csg:
https://www.babylonjs-playground.com/#KUM5WC#14
I want to draw only the outside edges and the ones of the holes (In playground it needs very long to load and after a rerun one plate is disappearing, you have to reload the page to work again - outside of playground there is no need to refresh the page).

Changing newMeshHolePlate.enableEdgesRendering(0.001); has no effect

Hello and welcome to the forum !!!

I am sorry but I am having some trouble to understand exactly what you are trying to do but maybe @JohnK or @jerome would have some ideas ? they are both awesome with geometry !!!

1 Like


Basicly I want this look. Only the Edges, what you would also see with a directional light.
But my goal is that every site it lit the same and that the “hard” edges are visible / black.

The plate in red is my “start” and the plate above is what I want to get.

Something like this Babylon.js Playground.

However it uses a private property so no guarantee this will not change in the future.

Not using the private property produces edge lines around the circular whole https://www.babylonjs-playground.com/#C0IJFZ#1

[Rather than knowledge this idea came from playing with https://www.babylonjs-playground.com/#0VF4MA#2, not my PG]

@sebavan if this is what @Browork wants is there a case for making _edgesRenderer public are might that have unknown knock on effects? Is there an alternative such as setting a parameter somewhere?

2 Likes

enableEdgesRendering(...) takes the same parameters than the EdgesRenderer class constructor, so you don’t have to use private properties:

https://www.babylonjs-playground.com/#C0IJFZ#2

Replace this.scene by scene in the PG to correct this problem (line 39).

4 Likes

Its good still to have things to learn even at my old age.

1 Like

@Evgeni_Popov @JohnK the style from Babylon.js Playground / https://www.babylonjs-playground.com/#C0IJFZ#2 is what I looked for.
Is it possible to make the edge size the same on the whole circle?

It’s a z fighting problem: you can push back the polygon a little so that all the edges are visible.

https://www.babylonjs-playground.com/#C0IJFZ#3

3 Likes

Bonus question (Or should I create a seperate question for this?:
I also want to have holes that dont get through or are coming from the side like in this csg example:
https://www.babylonjs-playground.com/#KUM5WC#20
sideholenotthrough

Your provided solution worked well for holes that go through, but how could I achieve holes, that dont go through, or are coming from the side?

Big thanks for help!

I think the only way to do this properly and having the edges rendered cleanly is to generate the vertices / triangles of the holed-plane yourself.

I have done a bit of the work for you:

https://playground.babylonjs.com/#SY7TPL

However, the edge renderer builds the lines of the edges at construction time (in the constructor). So, whenever the geometry changes, the edge renderer must be disposed / re-enabled to have it regenerate the edges. I have done it in the PG, but be aware it can take some time, depending of the number of planes with holes you have.

The split I have done to create the vertices on the border can be improved when the hole is not in the center of the plane. Currently, you get:
image
The vertices on the border could be dispatched better to avoid having triangles too thin, which can lead to some artifacts with the edge renderer

You will have to perform some deeper changes if you want multiple holes in a plane, and I don’t think it is very easy, basically it’s CSG done by hand, even if the shapes are simple and known in advance - one plane and several circles.

Last thing, in the PG you should give a multiple of 4 for numCirclePoints, else you won’t get sharp corners for the plane:

2 Likes

I know the edge drawing from some CAD tools, when you make a hole in it you get the edges drawn so it looks better.
Originally I come from threejs, but the easy to use CSG part brought me to babylonjs.
Is there a way to “fake” the edge drawing like with lighting or textures?

But to do this “properly” I should go with planes and holes ?
Its a bit above my understanding, but could you explain the makeHole method?
makeHole(ground1, 10 * 4, cx, cz, r, r, 0.3, false);

        cx = Math.cos(t) * 0.5;
        cz = 0;

        makeHole(ground2, 10 * 4, cx, cz, 0.4 / 5, 0.4, 0.5, true);

Why is the resulting second hole round, even radiusY and radiusX are not the same?

It is circular because the radius I give for the hole counterbalance the scaling values of the plane (ground2):

  • the scales for the plane are 5 / 1
  • the scales for the hole are 0.4 / 5 and 0.4

So, in the end, the X and Z radius for the hole are 5 * (0.4 / 5) = 0.4 and 1 * 0.4 = 0.4, so the hole is circular.

The makeHole function itself creates the vertices and triangles to add a hole in the plane. Enable the wireframe mode to better see what’s going on.

2 Likes

Note that using the edges renderer does not work because the CSG processing can produce triangles like this:

image

There are two triangles, ABC and CDE.

AC is not shared by another triangle, so the renderer considers it to be an edge and draws it.

For this to be rendered correctly by the edges renderer, the triangles EBC and ABE should be created and ABC removed (that needs a tessellation, that may not be easy to do in the general case).

1 Like

You can try to resort to screen space effect to display the edges.

For eg, I have adapted a little bit the PG from https://forum.babylonjs.com/t/cavity-shader-effect-like-blender-2-8-viewport-for-babylon-js/11789/6:

https://playground.babylonjs.com/#UC8IJW

However, the width of the lines can’t be made very big, and there are some artifacts:
image

The bottom edges of the circle are not drawn because the effect relies on the gradient of the normals in screen space, and it is 0 for those edges.

[EDIT]
Working on a solution to tessellate the triangles in the case shown above.

I have still a little work to do, but it is doing well:


[/EDIT]

2 Likes

Refering to the triangle picture:
Is the edge drawn because AC is used only by 2 triangles?

Adding the third triangle it would result in this look?
grafik
grafik

In this example AC is used by 3 triangles, so no edge is drawn?

EDIT:
Can you share the link of the second picture? It looks really good !

AC is drawn because it is not shared by any triangle, it is an edge of ABC only.

That’s the problem: that’s not because E is between A and C that the system knows EC is part of AC (the system does not know that E is between A and C). For the system, AC and EC are different edges and are from different triangles (ABC for one and CDE for the other).

In your second picture, EC is shared by 2 triangles (CDE and BCE), that’s why it is not considered an edge to be drawn (and also because the angle between both triangles is small enough).

I’m currently working on the algorithm to produce the second picture above (you can’t see it in the picture, but there was an artifact in the bottom of the box because I did not handle all cases of triangle tessellation).

3 Likes

I have created a draft PR about this:

1 Like

The feedback looks good for it.
Is it possible to give a timeline when its added to the alpha or the next release?
Is there a 4.2 release date?

As soon as the PR is merged, it is available in the preview release (Babylon.js/dist/preview release at master · BabylonJS/Babylon.js · GitHub).

Regarding the 4.2 release date, I think it’s planned before the end of this year.

Is preview release one step before alpha release?
grafik

EDIT:
Maybe a bit out of topic: How would I include it in a typescript project? reference the d.ts file and add babylon.js as a script tag?