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

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.