# Drawing outside edges of a Mesh created from CSG **URL:** \ **Category:** Questions\ **Created:** [June 23, 2020, 7:10am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926 "2020-06-23T07:10:27Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [June 23, 2020, 7:10am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/1 "2020-06-23T07:10:27Z")
I have following scene with csg: [https://www.babylonjs-playground.com/#KUM5WC#14](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 ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 23, 2020, 12:52pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/2 "2020-06-23T12:52:31Z")
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 !!! ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [June 23, 2020, 1:21pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/3 "2020-06-23T13:21:05Z")
![babyloncsg](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/095f2b1e4597dbaccb6e8512e786c7612621a09f.png) 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. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [June 23, 2020, 3:00pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/4 "2020-06-23T15:00:59Z")
Something like this [Babylon.js Playground](https://www.babylonjs-playground.com/#C0IJFZ). 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](https://www.babylonjs-playground.com/#C0IJFZ#1) [Rather than knowledge this idea came from playing with [https://www.babylonjs-playground.com/#0VF4MA#2](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? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 23, 2020, 4:13pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/5 "2020-06-23T16:13:21Z")
`enableEdgesRendering(...)` takes the same parameters than the `EdgesRenderer` class constructor, so you don’t have to use private properties: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#C0IJFZ%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes > [@Browork](#): > > 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 Replace `this.scene` by `scene` in the PG to correct this problem (line 39). ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [June 23, 2020, 5:06pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/6 "2020-06-23T17:06:16Z")
Its good still to have things to learn even at my old age. ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [June 23, 2020, 6:46pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/7 "2020-06-23T18:46:20Z")
@Evgeni_Popov@JohnK the style from [Babylon.js Playground](https://www.babylonjs-playground.com/#C0IJFZ) / [https://www.babylonjs-playground.com/#C0IJFZ#2](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? ![babylonEdgeWidth not even](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c9864036eb418ac3d8aee2990e47e989ce5d2a2d.png) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 23, 2020, 7:52pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/8 "2020-06-23T19:52:26Z")
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](https://www.babylonjs-playground.com/#C0IJFZ#3) ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [June 24, 2020, 6:09am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/9 "2020-06-24T06:09:34Z")
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](https://www.babylonjs-playground.com/#KUM5WC#20) ![sideholenotthrough](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3e2439b2b41fc835b8493bd2a144927eb6ec1c10.png) 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! ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 24, 2020, 5:58pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/10 "2020-06-24T17:58:36Z")
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](https://playground.babylonjs.com/#SY7TPL) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/be2275eceb8c48e4a2ffa201b06c1c3a0ece2515.png) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f37554d6dee13e009f28aa89572267e3f88d88f5.png) 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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/95a1c3b7df91de4317a2ed4ac3ab92ba33067d6e.png) ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [July 3, 2020, 6:01pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/11 "2020-07-03T18:01:59Z")
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? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 3, 2020, 6:29pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/12 "2020-07-03T18:29:36Z")
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. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 4, 2020, 11:35am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/13 "2020-07-04T11:35:01Z")
Note that using the edges renderer does not work because the CSG processing can produce triangles like this: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/909927dee3de2312155cab658652e81de77f6556.png) 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). ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 4, 2020, 1:16pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/14 "2020-07-04T13:16:18Z")
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://forum.babylonjs.com/t/cavity-shader-effect-like-blender-2-8-viewport-for-babylon-js/11789/6:) [https://playground.babylonjs.com/#UC8IJW](https://playground.babylonjs.com/#UC8IJW) However, the width of the lines can’t be made very big, and there are some artifacts: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c5671c3e190ac085c9fff7dcdac2b310f4e2d055.png) 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: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5ca047dfba5f959b95e46298f3f2fa72363f7f05.png) [/EDIT] ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [July 8, 2020, 8:40am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/15 "2020-07-08T08:40:16Z")
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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/0b28d432d2e4d9ae597280de7e01095a92f23c32.png) ![grafik](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/fe96175d52a85d93de8cd90b8e2d2120c5096867.png) 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 ! ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 8, 2020, 10:53am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/16 "2020-07-08T10:53:20Z")
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). ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 9, 2020, 5:47pm UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/17 "2020-07-09T17:47:04Z")
I have created a draft PR about this: > ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [July 10, 2020, 8:40am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/18 "2020-07-10T08:40:50Z")
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? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [July 10, 2020, 8:50am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/19 "2020-07-10T08:50:54Z")
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](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release)). Regarding the 4.2 release date, I think it’s planned before the end of this year. ---
**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\ **Post date:** [July 10, 2020, 8:55am UTC](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926/20 "2020-07-10T08:55:53Z")
Is preview release one step before alpha release? ![grafik](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a4ba417cb5da7f79ef86fca0c813aec6a56b804e.png) 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? [Next page](https://forum.babylonjs.com/t/drawing-outside-edges-of-a-mesh-created-from-csg/11926.md?page=2)