Hi! I have a question on rendering polyon in 3d in concave shape.
Given with 3d points array (not on xz plane), I want to draw a roof (roof planes) but some roof planes are in concave shape and the mesh for it doesn’t look as expected.
This is the example how I drew the roof (zoom out a little bit to see the meshes).
https://playground.babylonjs.com/#8JULEM#8
In this example, the concave part looks like this which I want to avoid.
I thought of this method: Irregular Polygons | Babylon.js Documentation
but, in my case, I’m given the 3d points not in 2D. So I need to:
- calculate the equation of the plane (not always flat though…)
- rotate the plane to put all points on the xz plane
- using those points, create irregular polygon
- rotate the irregular polygon back to the original equation.
^ this is the only way I can think of. I’m not sure how I can achieve it yet though 
Will this be an ideal approach? Do you have any other ideas I could try?
As always, thanks for your help!!
Hmmm can you describe more about your situation? What do these points represent, exactly? 
Hi @carolhmj !
Those points are vertices of roofs. (blue circles in the image)
For example, (in ortho view) the desired shape should look like left one in the image below. but if the shape is in concave, mesh looks like the right one in the image.
I tried Polygon builder with earcut but it looked like it omits the y or overwrite the y as 0 and the mesh’s position and rotation is far away where I wanted to put
I’m taking another look at your PG, so, you have this array of groups of points, and each group should correspond to one plane of the final shape? As you’ve said, in some cases it will be impossible to have a plane for a set of points, so maybe for each set you could calculate the best fitting plane? Obtaining a best fitting plane through 3D georeferenced data - ScienceDirect, algorithm - 3D Least Squares Plane - Stack Overflow, Mathematics: Best Fitting Plane given a Set of Points (4 Solutions!!) - YouTube. Then project all of your points in the best fitting plane, then get the polygon from it.
I’m curious even though I put all the points on plane, will that concave issue be solved with it?
If the points are on the same plane you can use the earcut with irregular polygon Irregular Polygons | Babylon.js Documentation (babylonjs.com)
Hm… let me double check if I understood your feedback. So if the points are on the same plane, I can use the earcut with irregular polygon EVEN THOUGH the plane where the points are on is not y=0 ?
Oh, sorry, I should have been clearer on this, you’ll need to make your plane on y=0, one possibility would be with rotation as you said (through, it seems the builder simply ignores any y-component on the passed points Irregular Polygon Examples | Babylon.js Playground (babylonjs.com), but I’d rotate it anyways just to make the result more expectable )
I got it! Thanks for your help. Let me start from there! Thanks again!
1 Like
