Tinkering with Babylon.JS – Part 1

Yesterday I wanted to have a new challenge, a small side project. After discovering BabylonJS, a library for creating and animating 3D scenes in the browser with good performance, I though now was the time to test it with a solution to a problem I have wanted to solve from sometime now.

When you are searching for a new house, you usually use a real estate listing, filtering by location, rooms, sizes, and pictures, but there is an important factor no real state listing includes, and its the amount of sun/shadows the house gets throw the day and throw the year. and until now the only way I have found is to go and visit the place (and using some augmented reality sun tracker, etc). This is specially important if there is a pool, or hills/mountains around, or if the house doesn’t get enough sun to be heated (which can also affect your monthly expenses).

So, my challenge is to build a mini website, that asks the user a full world address, makes some processing and shows you a 3D terrain of a sample area within the target location (20 km around that point or a definable value), with the sun position for the current date at that location, casting shadows around it, and a box representing the house (with a parameter to set it at a certain height from the ground (example number of floors within a building).

UI browser sketch of target prototype

For creating this solution, I will use a Fastify backend with some services/functions to make the processing and VueJS for the frontend part with the BabylonJS Vue extension.

Technically, what we’re going to solve requires the following steps:

  1. A service to get the latitude and longitude from an address
  2. A service to get a height-map of a given location (lat, lng), with a given pixel_size sample (in meters) and a target horizon distance (ex. 20 km). This must return a grayscale image with the brightest point being the height point.
  3. Then, we’ll make the UI using VUE, for asking the address, requesting the lat/lng from the address, then getting the height-map and building a Babylon scene, create a ground from the height-map, add a directional light to simulate the sun and use a Babylon plugin to position it as it should be now. We’ll also add a box over the center of the ground and re-position it vertically simulating a floor.
  4. At the end, we’ll add some controls to change programmatically some parameters, like amount of meters from ground (for box), change horizon distance, meters for pixel_size, change date/time of the scene (maybe with a slider).

So our backend is going to have the following routes:

  • /getLatLng
    param: address* (*required)
    returns: { error:0, lat:-1, lng: -1}
  • /getHeightMap
    param: lat*
    param: lng*
    param: pixel_size (in meters, default 100)
    param: distance (in km, default 20)
    returns: { error:0, data:base64 (png) }

In the next post we’ll create the Fastify backend services.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s