Jump to content

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

Link to comment
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).

Link to comment
Share on other sites

  • 8 months later...
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)?

Link to comment
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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

@tham_kathy as it says in the docs


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



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.

Link to comment
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



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...