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 !!!
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?
enableEdgesRendering(...) takes the same parameters than the EdgesRenderer class constructor, so you donât have to use private properties:
Replace this.scene by scene in the PG to correct this problem (line 39).
Its good still to have things to learn even at my old age.
@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.
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
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:
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:
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):
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.
Note that using the edges renderer does not work because the CSG processing can produce triangles like this:
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).
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:
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:
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?
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).
I have created a draft PR about this:
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?
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?
