GithubHelp home page GithubHelp logo

delebash / unreal_mapbox_bridge Goto Github PK

View Code? Open in Web Editor NEW
16.0 5.0 4.0 141.23 MB

Front end app for UnrealMapboxBridgePlugin for Unreal. Import heightmaps into Unreal from real world locations using Mapbox

License: MIT License

HTML 4.81% Vue 72.24% JavaScript 22.51% SCSS 0.45%
mapbox unreal unreal-engine heightmap heightmap-terrain heightmaps terrain-generation gdal unreal-engine-5

unreal_mapbox_bridge's Introduction

This app is no longer maintained please see the new app here https://github.com/delebash/unreal_map_bridge

Unreal Mapbox Bridge

Use real world heightmap data from Mapbox and automatically convert it to an Unreal heightmap image

Live site here

Plugin version for Unreal Egine 5 UnrealMapboxBridge

Tutorial Playlist

https://www.youtube.com/playlist?list=PLFCVXzupw1r_7ExUSGDxHGHU-gPRxOGeZ

Get Help here Discord Server

For what is coming next check the RoadMap

Other free Unreal projects

https://github.com/delebash/unreal_vault_organizer

Updates: 10/28/2022

Added:

Blur Radius -- This will apply a blur to the heightmap. It can be useful to reduce sharp edges and artifacts. The greater the number the greater the blur.

Added Buttons:

Send to Terrain Magic -- (only works with custom Terrain Magic code -- pm me on my discord channel if you want it). If you use the Terrain Magic plugin from the UE market place then this will load your landscape into Terrain Magic.

Copy Bounds for Blender Osm -- If you use the Blender Osm plugin to generate real world landscapes, this will copy the coordinates you need to paste into the Blender Osm Plugin. Osm has it's own map app but if you use this map app you can still have that capability.

Copy Slippy Tile String -- This will copy the Slippy Tile String Info. Slippy Tile is a format for identifying Tile Information. It is in the format x,y,z where z = zoom level. Terrain Magic uses the Slippy Tile String, so until Send To Terrain Magic is fixed you can use this to copy and paste into Terrain Magic.

Dist folder -- contains compiled web app. You should be able to run it from any web server.

Install the dependencies

npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

npm start

NOTE: When running the development server you will need to disble cors for your browser or the api calls to Mapbox will not work. For Edge/Chrome there is a good plugin that I use to do this. See https://microsoftedge.microsoft.com/addons/detail/cors-unblock/hkjklmhkbkdhlgnnfbbcihcajofmjgbh

Build

npm run build

Setup

When you initially run the application you will have to set some data.

Settings Tab

  1. Enter a mapbox access token under the Settings Tab in the Mapbox Access Token File field

    To get an access token you can create a free mapbox account. Then goto your account page and copy the default access token or create a new one.

  2. Choose a download directory from the Settings screen.

  3. Click the Save Settings button

Map Tab

Left click and hold to drag around the map Right click and hold to change the angle of the map

Scroll wheel to zoom in out

Game keys for navigation are also enabled WSAD

Type in a name or coordinates in the search box

Left click on the tile square you want to select. It will turn blue when selected.

You will see a preview of what the heightmap will look like as well as some statistics.

Click the download button to download the selected tile 16 bit heightmap file.

Select Terrain size youu want to use for your Unreal Landscape size.

The Scale number is correct but may look large in Unreal. You might want to use a different scale number when you import into Unreal.

Manually resize method if you want to edit your hegitmap in a photo editor

Convert image to Unreal Landscape Size

See Unreal Recommended Landscape Sizes here

Resizing/Resampling an image for Unreal Landscapes has been added to the software. Just select your Landscape size before you download your heightmap. As an alternative to resizing in the application you can use other software to resize to custom sizes.

Programs you can use to resample your image to the landscape size you are using.

GIMP, Affinity Photo, Photoshop. Terra Sculptor -- is an awesome free program for creating and manipulating heightmap images. It even has preset landscape sizes for Unreal. To enable UDK go to Settings > Dimensions and check UDK Landscape.

The principle is the same for all.

Example: GIMP

  1. Choose File > Open then open the sixteen-x-x-x.png file for the tile you selected. The numbers indicate the selected tile.

  2. Choose Layer > Scale Layer

  3. Type in the width and height (should be the same as in height: 2017 width: 2017)

  4. Set the Interpolation to NoHalo and click Scale

  5. Choose File > Export as and name your converted file.

  6. On the popup dialog box named "Export image as PNG" leave all defaults and click Export.

Import the heightmap into Unreal per normal procedure. You will need to adjust the Z-scale to the Z-scale shown on the app.

Example imported landscape standing on top of Mt. Rainier

Mt. Rainier1

Mt. Rainier2

Inspired by and some code used from this project. A Big thanks to Shane Brennan (colkassad).

unreal_mapbox_bridge's People

Contributors

delebash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

unreal_mapbox_bridge's Issues

Make executables for application

https://neutralino.js.org/ gives us the ability to create light weight executables to run this app locally. No need for nodejs to be installed. The folder unreal_mapbox_bridge_app contains the exe for various oses. You do not need the rest of the repository to run the app. This is the only folder you need if you are not developing the app.

Great work on this!

You had asked me a question about me accepting pull requests on my repo, but I think you should just continue with what you have here. If I have some time I'd love to contribute to this repo going forward. I love what you have done! I think leaning into the Unreal Engine workflow is a great choice. If you ever want to reach out, my email is my github username at gmail.

Height map generated image does not import into Unreal at sea level Z=0

Using the formula from Mapbox to calculate height elevation = -10000 + (({R} * 256 * 256 + {G} * 256 + {B}) * 0.1) causes the map to import way below sea level. Even if you change the Unreal Landscape Z transform to 0 it really does not change the actual elevation. This can be demonstrated by changing the landscape Z transform to 0. Then place an actor such as a mannequin on the landscape. You will notice that the actor's location is showing the original location way below sea level. I manually adjusted the formula to try and compensate. It is better but of course but not accurate. Also, the 16bit image is now grey instead of B+W but the features still import correctly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.