Sod’s Law, I realised after the deadline that the loading of the environment’s texture could have been sped up! So I’m fixing it now.
The Static Maps API request still has to go through a PHP proxy due to cross-origin issues, however instead of also using the PHP’s GD libary to convert the image from a PNG to a JPG, which is notoriously slow, we can just request the specific format straight from the API using the
I have tested all the formats to check which is the smallest:
As expected, the progressive jpg provides the smallest file size.
Changing the format to jpg cut around 1 second off the request time.
It might not seem like much, but considering this request actually freezes the page, it is important that it is as quick as possible.
By combining Google Elevation API, Google Static Maps API and ThreeJS, we can automatically generate and display 3D topographical representations of real-world areas using only code.
The following lists out the step-by-step process we went through in order to produce the outcome.
Getting the elevation data:
- Split the world into tiles
- Work out which tile the user has selected
- Get the latlng (latitude and longitude) boundaries of that tile
- Divide the tile into another grid (30×30)
- Loop through the grid, row by row, and get the latlng of each of those divisions
- Request the elevation of each latlng from Google Elevation API and store in an array
Generating the height map:
A height map is a grey scale image where white means high and black means low.
In RGB, white = 255 and black = 0.
- Take the elevation array and find the maximum and minimum value
- Normalise all the data so that the minimum value = 0
- Calculate the ratio of all the values so that they lie between 0 and 255
- Convert the array into a string, with each column delimited by a comma and each new row signified by a dash, and pass the string into a PHP script
- The PHP parses and loops through the string to draw out the grey scale image pixel by pixel, which is then saved to disk
Getting the satellite image:
- From the selected tile boundaries, calculate the centre latlng of that tile
- Request the satellite image using Google Static Maps (proxying through a PHP script to bypass the Cross-Origin Policy)
Rendering the model:
- ThreeJS is used to generate a mesh and downloads the height map and the satellite image
- The height map is applied as a displacement map
- The satellite image is applied as a texture