Terrainier

Read up all about what it is, and what we're trying to do on our Devpost!

Command to bundle index.js:

browserify index.js -p esmify > bundle.js

Screenshots

Main page

Physical placement planner

Setup

• Make sure you have/create an auth.json in the backend/ folder with your Maps API key, and Darksky API key present

{
    "MAPS_KEY": <your-key>,
    "DARKSKY_KEY": <your-key> 
}

• Install and configure Blender and Vectiler.
• Create another file in /backend called paths.json, and add the paths to your blender executable and vectiler build, so we can call them from ther terminal later on. My file is like this:

{
    "blender": "/home/rohan/Downloads/blender/blender",
    "vectiler" : "/home/rohan/Desktop/Cpp_files/vectiler/build/vectiler.out"
}

if you have them in $PATH already, then just replace it with the normal command that can be called from terminal.

• Install flask and flask-restful in your python environment

To Run:

• In a terminal, navigate to /backend and run python server.py(should be on port 5000)
• Host index.html using node's http-server or VsCode's Live-Server Extension

Miscellaneous

Vectiler command to generate testing terrain:

./vectiler.out --tilex 23447/23448 --tiley 15191/15192 --tilez 15 --terrain 1 --buildings 1 --terrainExtrusionScale 1.5 --buildingsExtrusionScale 1.9

Random place in sg [for testing]

Latitude 1.3342035847226605, Longitude 103.84775028228756

Learning and stuff

• Learnt after a while that the API key should in fact be got from the server side [Implemented via an API call], and not the client side, with me trying to load it from a .env file earlier

Known unexpected behaviour

• If the 3d model generated by vectiler has a flat base, that will be marked red too. This is because the blender script marks all flat surfaces (with normal = z axis) as red. So in that sense, it's really looking for flat surfaces, not building tops. But in most of the testing, building tops are the only surfaces which are flat.
• The recommendations under "Select location for recommendations" are random. We have yet to link it with the data from our charts.
• The marker location on the map is only captured once a zoom is performed, and not immediately.

Links I referred to

blender

• Rotation
• Material operation for faces
• Adding color to a single face
• Run blender in the background
• Select an object via script
• Deselect object in edit mode, in script
• Import .obj via script
• Export via script
• Parse command line arguments for a blender script

three.js, web and api stuff

• Scaling model
• three.js demo fiddle
• OBJ and MTL loader
• Learning resources
• Orbit controls
• Orbit controls in docs
• Provide custom canvas to renderer
• Align html to center
• Configuring a point light in three.js
• Flask-restful
• Flask-restful tutorial
• Calling an API with Javascript's 'fetch'
• Get map tile input from Maps
• LatLong from tile coordinates
• Adding script tag in JS
• Events for map, markers in Gmaps API
• Using markers
• Add event listener for a marker
• LatLong from marker
• Major source of weather visualisation
• passing parameters to another html page
• Get webpage url parameters in javascript
• Specify latLong in esri camera