16/32 Bit Grayscale PNG/EXR Heightmap Generator

A browser-based tool for generating high-quality 16-bit grayscale PNG heightmaps or 16/32-bit EXR heightmaps from real-world terrain data.

Perfect for creating realistic landscapes in Unreal Engine 5 and other game engines or 3D software, such as Terrain3d, Godot4 and Blender.

🌐 Live Website: https://manticorp.github.io/unrealheightmap/

⚠️ Important Notice

We have started hitting the free tier limits from some map services, so the site may not work until we get some funding to up these limits. If you find this tool useful, please consider supporting the project!

✨ Features

• High-Quality 16/32-bit Output - Generate heightmaps with 65,536/4,294,967,296 levels of detail (vs only 256 in 8-bit)
• Real-World Terrain Data - Uses high-quality elevation data from Mapzen's global elevation service
• Interactive Map Interface - Visual selection of terrain areas using an intuitive map interface
• Multiple Normalisation Modes - Choose between None, Regular, or Smart normalisation to optimize your heightmap data
• Flexible Output Sizes - Preset sizes for Unreal Engine or custom dimensions up to 8129×8129 pixels
• Browser-Based - No installation required, works entirely in your web browser
• Real-Time Preview - See the area you're exporting with an overlay on the map
• Copy & Paste Coordinates - Support for multiple coordinate formats including DMS and decimal degrees

🎯 Use Cases

• Creating realistic terrain for Unreal Engine 5/Blender/Terrain3D landscapes
• Game development with accurate real-world topography
• 3D modeling and visualization projects
• Geographic information system (GIS) applications
• Educational and scientific visualization

🚀 Quick Start

1. Visit https://manticorp.github.io/unrealheightmap/
2. Use the map to navigate to your desired location or enter coordinates manually
3. Adjust the output zoom and size to define your export area (shown as an orange rectangle)
4. Select a normalisation mode appropriate for your use case
5. Click "Generate" to create and download your heightmap

For detailed instructions, visit the Documentation page.

📖 Documentation

• Instructions - Comprehensive guide on how to use the tool
• Examples - Gallery of heightmaps created with the tool
• License Info - Information about data sources and licensing

🛠️ Technology Stack

• TypeScript - Type-safe application code
• Leaflet - Interactive map interface
• jQuery - DOM manipulation and UI interactions
• UPNG.js - PNG encoding/decoding
• Pako - Data compression
• Webpack - Module bundling
• Bulma - CSS framework
• SASS - CSS preprocessing

💻 Development Setup

Prerequisites

• Node.js (v14 or higher recommended)
• npm (comes with Node.js)

Installation

# Clone the repository
git clone https://github.com/manticorp/unrealheightmap.git
cd unrealheightmap

# Install dependencies
npm install

Build Commands

# Development build
npm run build

# Production build
npm run author

# Watch mode (auto-rebuild on changes)
npm run watch

# Run unit tests
npm test

Project Structure

├── src/                   # Source TypeScript and SASS files
│   ├── app.ts             # Main application logic
│   ├── main.ts            # Entry point
│   ├── png.ts             # PNG processing
│   ├── processor.ts       # Web worker for image processing
│   ├── sass/              # Stylesheets
│   └── templates/         # HTML templates
├── public/                # Static assets and build output
│   ├── dist/              # Built JavaScript and CSS
│   ├── im/                # Images
│   └── examples/          # Example heightmaps
├── index.html             # Main application page
├── instructions.html      # Documentation page
├── examples.html          # Examples page
└── webpack.config.js      # Webpack configuration

🎨 Examples

Grand Canyon (64km)

View in tool

For more examples, visit the Examples page.

🔧 Normalisation Modes

None

No normalisation performed. Pixel values directly represent height in meters (negative values are set to 0).

Regular

Scales height values to use the full 16-bit range (0-65535), maximizing detail across the entire heightmap.

Smart

An advanced mode that handles data errors and outliers. Uses a 99.9% window to filter extreme values while preserving authentic min/max values within 1 standard deviation.

📊 Output Format

• Format: 16-bit Grayscale PNG, 16-bit EXR or 32-bit EXR
• Bit Depth: 65,536 levels of detail (2^16) or 4,294,967,296 (2^32)
• Precision: Capable of representing Mount Everest (8,849m) in ~13cm intervals (16 bit)
• Source Data: Mapzen elevation data (24-bit precision, ~4mm fidelity)

🤝 Contributing

Contributions are welcome! Please feel free to submit issues, fork the repository, and create pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

The elevation data is provided by Mapzen and may have its own licensing terms.

💖 Support

If you find this tool useful, please consider supporting the project:

• ☕ Buy me a coffee on Ko-fi
• ⭐ Star this repository
• 🐦 Share it with others who might find it useful

🙏 Acknowledgments

• Mapzen for providing high-quality global elevation data
• Unreal Engine community for inspiration and use cases
• All contributors and users of this tool

📞 Contact

• Author: Harry Mustoe-Playfair
• Email: harry.mustoeplayfair@gmail.com
• GitHub: manticorp

---

Made with ❤️ for the Unreal Engine, 3D and game development community