Terraining - Heightmap Generator

This repository is based on and further developed from sysoppl/Cities-Skylines-heightmap-generator.

An online heightmap generator for Cities: Skylines, Unity, and Unreal Engine.
https://terraining.ateliernonta.com

Warning

MapTiler API Key Requirement

• Since Ver.2, a MapTiler API key is mandatory.
• Optional Mapbox elevation data still requires a MapTiler API key.

Migration to Ver.2

• First, please reset all settings using the reset button on the config tab. Keys and Tokens are not reset.

---

Features

• Offers a preview feature
• Easily generate heightmaps for Cities: Skylines 1 & 2, Unity, and Unreal Engine
• Select square areas ranging from :
  • Cities: Skylines 1 : 8.64 km to 69.12 km
  • Cities: Skylines 2 : 28.672 km to 229.376 km
  • Unity and Unreal Engine : 0.5 km to 100 km
• Rotate selected area with ease
• Download multiple formats :
  • Heightmap
  • Map images
  • OSM data
  • For Cities: Skylines 2, get both heightmap and world map

How to

1. Choose the area you want to download.
2. Customize the settings within the settings panel to match your preferences.
3. Download either the heightmap or map image, etc.

Setting panel

• Lng & Lat : Adjust your geographic coordinates by modifying these values.
• Zoom Level : Set the zoom level of the map.
• Grid Angle : Set the angle of the grid. The angle increases clockwise.

Preview

• Normalize : Normalize preview image.
• Min & Max Height : Click the preview button at the bottom to retrieve current area's minimum and maximum elevations. Please note that slight variations in values may occur due to interpolation based on map size. If the elevation does not fit within the "Elev. Scale" due to settings other than the "Elev. Type", the color of the numerical value will change.
• Scale : For Unreal Engine.

General Tab

• Map Type : Select the map type from CS1, CS2, Unity, or UE.
• Map Size : Set the map size. You can change the map size. For CS1 and CS2, the size includes the unplayable area.
• Resolution : Heightmap resolution.
• Elev. Scale : The maximum height that the heightmap can depict, measured relative to the base level. For example, if the base level is -100 m and the Elevation Scale is 2,000 m, the maximum elevation that can be represented is 1,900 m.
• World Partition & Cells : For UE5 - World Partition.
• Base Level : The minimum elevation that the heightmap can represent. Setting it to the seabed elevation or the lowest elevation allows you to make the most of the resolution of the Elevation Scale.
• Adjust Level : The base level is automatically aligned with the minimum height.
• Height Ratio : Define the vertical-to-horizontal distance ratio.
• Height Scale : Set the proportion relative to actual terrain height.
  † Height Ratio and Height Scale are interrelated and are linked to map size. You can lock one.
• Elev. Type : Auto-configures Height Ratio and Height Scale.
  • Manual : No automatic adjustments.
  • Limit : If exceeded, adjusts the maximum elevation to elevation scale value.
  • Maximise : Set the maximum elevation at elevation scale value.
• Interpolation : Choose from Bilinear or Bicubic.

Note

The preview button retrieves the minimum and maximum elevation in the grid. Additionally, grid information is displayed in the browser console.

Water Tab

• Water Depth Correction Editor : This editor performs depth correction for water areas. You can input arbitrary points on the preview screen and specify the correction value for the depth at each point. These values will ultimately be added to the Water Depth. The input points form triangles, and the depth correction values within each triangle are linearly interpolated based on the values at its vertices. This ensures a smooth transition in depth across the area.
  • Usage : The plus and minus mode buttons determine the behavior when left-clicking. Also, points are draggable. Right-clicking toggles the display of the triangle subdivision. Dragging points may alter the state of the triangle subdivision.
  • Input Depth Correction : When a point is selected, its correction value is displayed. The value ranges from 0 to 100.
  • Preview : Larger correction values are displayed in light blue, with 0 being transparent. Additionally, clicking the preview button updates the current input state to reflect on the elevation data.
• Littoral Editor : Configure the shape of the littoral slope.
• Detail : Level of detail of the water area.
• Water Depth : Modify the water depth.
• Littoral Zone : Adjust the width of littoral zone. Increasing it creates a gradual slope from the coast to the seafloor.
• Riparian Zone : Adjust the width of riparian zone. Increasing it creates a gradual slope from the riverbank or lakeshore to the bottom of the river or lake.
• Stream Depth & Stream Width : Aiding in the depiction of streams.
• Use actual seafloor : Get the seafloor elevation using MapTiler Ocean RGB.

Modify Tab

• Smoothing : Gaussian blur.
• Sharpen : Unsharp mask.
• Reflecting the amount of effect : Reflect the sharpen and smooth intensity on the map.

Smoothing is applied below the threshold value, Sharpen is applied above the threshold value. For CS2, it internally calculates using a map size of 16,384 px. Noise is applied within the same altitude range as the shapen, with the Terrain Ruggedness Index (TRI) used as the threshold.

Config Tab

• Preview at original resolution : Please note that there will be many API requests.
• MapTiler API Key : Required from version 2.
• Use mapbox for heightmap source : You can choose the source of elevation data.
• Mapbox Access Token : Required to get custom map images.
• Mapbox User Style URL : For map image.

Note

You can import and export settings other than MapTiler API Key, Mapbox Access Token, and Mapbox User Style URL.

Download panel

• Download the following data :
  • Heightmap in raw data
  • Heightmap in 16-bit grayscale PNG format
  • Map image
  • OSM data
• GitHub link

Control buttons

• Home
• Zoom in
• Zoom out
• Compass
• Grid :
  • Left click : Reset the grid direction to north.
  • Right click : Rotate the map so that the grid is facing up.
• Displays the shape and smooth effect area on the map.

Customize map image panel

• Download map images by customizing style, zoom level, and image size.

Note

Depending on the configuration, many API requests may occur, so you'll need a Mapbox access token. Get a Mapbox token and input it. Once you've done that, click the IMG button to select.

ToDo

• Improve the littoral slope shape.
• Make the entire download process a web worker.
• Download map information.
• Download more customized map images.
• Improve shapeen and smooth behavior in CS2 map.
• Improve ocean-river connections.
• Water depth correction.
• Support for Larger map mod.
• Uses WebGL to improve effects processing.
• Implementation of riparian zone in its original meaning.