Skip to main content

Mt.Fuji 3D Model

This is a quick interactive WebGL demo I put together of Japan's Mt.Fuji.

Full Screen

How it was made

I used the NASA SRTM 1 Arc Second / 30m pixel data for creating the terrain. The data is in a HGT format and split into 1 degree x 1 degree latitude/longitude tiles. QGIS opens this format easily and I merged the tiles around Mt.Fuji into a single raster image. After clipping it slightly so it wasn't too big, I exported to a geotiff which I could import into Blender GIS.

For the satellite imagery, I decided to use Lantsat-8. Landsat 8 RGB bands (2,3,4) are 30m in resolution, but they also provide a panchromatic band which is 15m. This panchromatic band is in black and white and measures the combined light intensity of the RGB bands. Using a simple technique in Photoshop, you can use the panchromatic band for the detail and the separate RGB bands as the color giving you a true color image of 15m resolution.

After combining the RGB + P bands, I color corrected the image until I was happy with the result. I then imported it into QGIS to clip it to the exact same size of the terrain GeoTif, and re-exported it as a GeoTIF for Blender.

Once I had the terrain imported into Blender, I used the decimate modifier to optimize it from the grid structure to something that preserved the details while reducing the polygon count significantly. After this, I split the terrain into 4 equal pieces. The reason for this split was to keep the satellite image textures to a reasonable resolution. The resolution of the clipped image was 4800 * 3200 pixels but by splitting it into 4, I could create textures that were only 2400 * 1600. The key part is to make sure you clip the Terrain and the Satellite imagery to the same extents so after splitting they will still line up correctly.

I exported the models from Blender in OBJ file format which I then converted to Google's Draco Compressed Model Format. A 1.6MB Obj terrain chunk resulted in a 43KB draco file. Similarly, I converted the JPG textures to WebP so it will load faster.

The WebGL scene was simple as I used Three.js. I didn't use any lighting as it was baked into the satellite imagery. I used a locked orbit controls setup centered on the mountain. The camera was given a large focal length to create a sense of scale compared to the smaller mountains in the distance.