Making house floor panaroma image to 3D floor plan converter

So i created a sphere with a panaroma texture.
this is what i have achieved till now.

I am using custom mesh vertex data(position,uv,indices)doing dynamic calculation.
I can create walls using that.
For floor and roof I am Struggling as floor can have more then 4 vertices I can calculate position,uv properly not able to figure out how to calculate Indices because that needs some order. WInding order clockwise or anticlock wise.
Sharing you a PG https://www.babylonjs-playground.com/#VKBJN#598

I’m not exactly sure what you are asking. The PG is a bit hard to follow. Can you maybe be a bit more specific on the issue you are having?

hi @bghgary thanks for response. Here is detail explanation. If you need more specific let me know.
So I am trying to create a tool where user can create 3d dollhouse from a Panorama image.
So I use babylon sphere geometry and panorama texture over it.
Then user can click on four corners.

As You can see in image camera in Inside sphere and I click on four corners.
I got 4 vertices and uv points.
Using this I can create a plane for creating a plane I use Babylon custom mesh.

var customMesh = new BABYLON.Mesh(“custom”, scene);
var vertexData = new BABYLON.VertexData();
for vertexData i need to get positions,indices,normal,and uvs
vertexData.positions = array I calculate from corners; YOU CAN CHECK IT IN PG I HAD SHARED
vertexData.indices = [0, 1, 3,1,2,3];
vertexData.normals = _normals;
vertexData.uvs = array I calculate from corners; YOU CAN CHECK IT IN PG I HAD SHARED;

and then vertexData.applyToMesh(customMesh);
and this creates a plane with selected points


its like cropping a wall from sphere to plane.
So I can create walls.

This works for walls. For each wall I get 4 points/vertice(x,y,z).
This is the output for 3 walls. I exported walls.glb for that.
You can check it in sandbox download glb from below link.


I am attaching images to of that glb in sanbox in case you dont want to download.

ISSUE : is in creating floor and roof as they can have more then 4 points.
`

I am getting issue in calculating indices for more then 4 points.

Check out this pg
https://www.babylonjs-playground.com/#VKBJN#629
In place of sphere i added a plane here applied panorama texture.


click on four points

you can see 0,1,2,3 points around a window (i tried to cut a window)
click create create mesh it hides big plane and creates custom mesh

you can see a output window.

Now try to click more then 4 points


Now create mesh

Output comes only for 4 points.
in vertex data I am calculating vertices and uv for all clicked points.
but because of indices
_indices = [0, 1, 3, 1, 2, 3]; 2 triangles
it only display 4 points data.

for 6 points indices manual array is
_indices = [0, 1, 3, 1, 2, 3,5,0,3,0,3,4];

I need to make it dynamic as indices needs to be in sequence.
As I got Indices is named as winding order.
It is of two types clockwise and anticlockwise.
Like I want capture floor here.


As you can see it came with 13 points different panorama can have different no points so that requires this 3 position,uv and indices for vertex data.
How can I do that?

I think you are asking how to triangulate a polygon? Like this: Polygon triangulation - Wikipedia?

@bghgary thanks I will try this update it here back asap.

1 Like