How to calculate hipped/gabled roofs from outline coordinates?

[Convergence]

For my new project I  ideally need to be able to create simple hipped, gabled, and pointed from any arbitrary shape given (by JSON). Pointed and dome roofs are easy enough since the shape just converges to one point upwards, but I can't figure out gabled and hipped roofs just yet.. See attachment for a visual.

Does anyone have any idea how to do this? The input would be an array of (clockwise) Vector2's describing the outline of the building.

 

 

Here's a PG to play with, obviously I didn't find any solution yet myself https://www.babylonjs-playground.com/#AT8MET

[DJBRen]

you will need to use a pitch adjustment chart like...the one i posted was junk...I will find a good one when i get home.

[DJBRen]

This is the correct sheet.

 

http://connected.typepad.com/connected/files/roof_pitch_factors.pdf

[inteja]

Interesting problem. If the input must be the roof/gutter outline, then the first question would be how to (automatically) determine which edges are to be gabled and which are not. Similarly, if we look at your example outline, how would we determine that the "large rectangle" is indeed to be treated as one roof section. It might be better (if possible) to use separate overlapping rectangles to specify roof sections, rather than an arbitrary compound outline shape, although that might be just moving the problems elsewhere.

I'd be tempted to look at some of those 3D home design software packages (e.g. the source code for the open-source Sweet Home 3D http://www.sweethome3d.com/) to see how they handle it (if they even can).

[JohnK]

Have done it for the shape given but it requires the individual calculation of roof points depending on building outline and a custom mesh.

https://www.babylonjs-playground.com/#AT8MET#1

As others have said more difficult to produce a function to deal with building shape.

[tham_kathy]

On 11/7/2017 at 4:42 PM, JohnK said:

Have done it for the shape given but it requires the individual calculation of roof points depending on building outline and a custom mesh.

https://www.babylonjs-playground.com/#AT8MET#1

As others have said more difficult to produce a function to deal with building shape.

Have any idea about building the roof for given different shapes (building shapes)?

[dbawel]

@thamali

Sub-divide your extruded "roof" mesh (or add additional vertices at mid-point or other positions) and translate the additional vertices along the positive y axis. You'll be able to create far more interesting shapes this way.

DB

[tham_kathy]

@dbawel Actually I don't know how to extrude points in order to build shapes. What I have is outer coordinates of house

I have drawn houses like below;

I need to create the  gable roof of these houses at run time. Please give me a guidance

 

[JohnK]

All I did was to look at the roof diagram that Convergence provided, calculate the vertices from the diagram, divide into triangular facets and create a custom mesh. So starting from roof 'footprint' sketch out your roof and do the same.

[dbawel]

@JohnK has shown you a good approach. I was referring to adding and updating vertices on the mesh. If you want to use this method, just follow the docs below:

https://doc.babylonjs.com/how_to/updating_vertices

However, either approach will provide you with the result you desire.

DB

[tham_kathy]

2 hours ago, JohnK said:

All I did was to look at the roof diagram that Convergence provided, calculate the vertices from the diagram, divide into triangular facets and create a custom mesh. So starting from roof 'footprint' sketch out your roof and do the same.

If you can, please give me further explanation cuz I'm very new to this.

[JohnK]

Sorry but am on holiday for a week or so and only on mobile. Can give more explanation when I get back. In meantime check out http://doc.babylonjs.com/how_to/custom

Also just work through the PG to see how coordinates are arrived at.

[tham_kathy]

thanks a lot @JohnK

[JohnK]

@tham_kathy took some time but have added an example to docs. Still a lot of manual work but parts are automated http://doc.babylonjs.com/snippets/roof

[tham_kathy]

12 hours ago, JohnK said:

@tham_kathy took some time but have added an example to docs. Still a lot of manual work but parts are automated http://doc.babylonjs.com/snippets/roof

thanks a lot.!!! Really appreciate this..!! ?

[tham_kathy]

@JohnK

I tried your code above.When I play the scene, the roof is created. But when I rotate, some parts of the roof are dissapearing. 

Below is my html file. (I'm uploading my html file cuz I don't know how to create a playground.)

 

index.html

[JohnK]

I am busy for a few of days. Have a read of http://doc.babylonjs.com/babylon101/first as it is much easier for someone to work with a playground.

Could be the end of the week before I have time to try out your HTML file.

[JohnK]

@tham_kathy as it says in the docs

Quote

A footprint is a sequence of consecutive corners in counter clockwise order

and

Quote

Each roof plane can be described using the corner and apex labels. The planes should be draw so that they are described with either 3 or 4 labels. Each plane is set as an array using the labels in a counter clockwise order with corner labels coming first. Remember that the corner labels are already in counter clockwise order.

You have given the base data in clockwise order. Reversing the data pairs and relabeling the planes to match this new order gives https://www.babylonjs-playground.com/#RVPAJ4

To change an existing playground just edit and save, the playground number will just increase to the next available number, real easy.

[tham_kathy]

I'm creating roofs for a given house shape at runtime using straight skeleton of the shape.  And for that I really  appreciate your help.! Thanks for everything  

[tham_kathy]

@JohnK What about planes that have labels more than 4? Below is the roofprint that I'm trying. One plane has 6 labels so it's not creating . 

Any solution?

This is the code -> http://www.babylonjs-playground.com/#4GBWI5#105

(Zoom out if you can't see anything)

[JohnK]

2 hours ago, tham_kathy said:

What about planes that have labels more than 4

Add an extra corner (even though it will not be a real corner) on the top edge and split into two planes.

[tham_kathy]

Actually I didn't get it. Can you please explain bit more? 

[JohnK]

Please remember that the Gamelets are demonstrations of what is possible  with Babylon.js and how different idea can be achieved. They are starting points not a finished product. You need a line that extends one of the existing lines onto the roof edge to split the plane with five sides.

and then re-label. This PG gives the idea though the actual numbers for the new 'corner' are not totally accurate http://www.babylonjs-playground.com/#4GBWI5#108