# How to calculate hipped/gabled roofs from outline coordinates?

## Recommended Posts

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

##### Share on other sites

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.

##### Share on other sites

This is the correct sheet.

##### Share on other sites

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).

##### Share on other sites

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

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

##### Share on other sites
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.

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)?

##### Share on other sites

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

##### Share on other sites

@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

##### Share on other sites

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.

##### Share on other sites

@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:

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

DB

##### Share on other sites
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.

##### Share on other sites

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.

##### Share on other sites

thanks a lot @JohnK

##### Share on other sites

@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

##### Share on other sites
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..!! 🙏

##### Share on other sites

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

##### Share on other sites

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.

##### Share on other sites

@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.

##### Share on other sites

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

##### Share on other sites

@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)

##### Share on other sites
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.

##### Share on other sites

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

##### Share on other sites

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