-
Notifications
You must be signed in to change notification settings - Fork 3
/
instructions.html
141 lines (141 loc) · 8.24 KB
/
instructions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16 Bit Grayscale PNG Heightmap Generator for Unreal Engine</title>
<link rel="stylesheet" href="public/dist/css/main.css">
</head>
<body>
<main>
<article class="container content">
<h1>16 Bit PNG Heightmap Generator</h1>
</article>
<article class="container content">
<h2>Aim</h2>
<p>The aim of this project is to generate 16 bit heightmap data for use in software such as Unreal Engine 5</p>
<p>High quality height data is available from <a href="https://www.mapzen.com/blog/elevation/">Mapzen's global elevation service</a>.</p>
</article>
<article class="container content">
<h2>How to Export</h2>
<div class="card is-pulled-right">
<div class="card-content">
<figure class="image">
<img src="public/im/latlng_inputs.png">
<figcaption>
Enter your latitude/longitude values here
</figcaption>
</figure>
</div>
</div>
<p>Using the map at the top of the screen, choose a location. You can also manually type in a latitude and longitude.</p>
<p>The orange rectangle shows the size of the exported image, and what will be included.</p>
<p>The size of the exported area depends on the <strong>output zoom</strong> and the <strong>output size in pixels</strong>.</p>
<p>After clicking 'Generate' a 16 bit PNG should await you.</p>
<h3>Explanation of different options</h3>
<table class="table is-fullwidth">
<tr><th>Latitude</th><td>The Latitude at the centre of the image</td></tr>
<tr><th>Longitude</th><td>The Longitude at the centre of the image</td></tr>
<tr><th>Zoom</th><td>The zoom level in the preview</td></tr>
<tr><th>Output Zoom</th><td>The zoom level to use for the output</td></tr>
<tr><th>Map Preview Type</th><td>The tiles to use in the preview at the top of the page</td></tr>
<tr><th>Output Width (px)</th><td>The output width of the entire image in pixels</td></tr>
<tr><th>Output Height (px)</th><td>The output height of the entire image in pixels</td></tr>
<tr><th>Default UE5 Sizes</th><td>A preset list of useful sizes for generating Unreal Engine 5 terrain</td></tr>
<tr><th>Normalisation Mode</th><td>The normalisation mode to use. See below for more information</td></tr>
<tr><th>Norm From</th><td>Overrides the normlisation "from" parameter. Can be useful when low height data is funky, e.g. at the coast (just use 0)</td></tr>
<tr><th>Norm To</th><td>Overrides the normlisation "to" parameter</td></tr>
</table>
<div class="card">
<div class="card-content">
<div class="content">
<h4>Top Tip: Copy & Paste</h4>
<p>You can now copy and paste straight onto the page any lat/lng string. Acceptable formats include:</p>
<ul>
<li>03°04′33″S 37°21′12″E</li>
<li>3.0674° S, 37.3556° E</li>
<li>-3.0674, 37.3556</li>
</ul>
</div>
</div>
</div>
<figure class="image">
<img src="public/im/mapview.png">
<figcaption>
The orange box shows the area that will be exported.
</figcaption>
</figure>
</article>
<article class="container content">
<h2>Output</h2>
<p>The output will be a 16 bit grayscale PNG file with the gray levels representing the height of the ground at that location.</p>
<p>16 bits gives 2<sup>16</sup> levels of detail between the lowest and highest point. That's 65536 levels - enough to detail from sea level to the top of mount everest (8849m) in roughly 13cm intervals.</p>
<p>For comparison, 8 bit detail only give 2<sup>8</sup> levels of detail, which is only 256 levels!</p>
<p>The mapzen data is actually much <strong>more</strong> detailed than 16 bit (it has 24 bits of data, with a fidelity of about 4mm in the data itself, although the measurements are probably only accurate to 1m maximum)</p>
</article>
<article class="container content">
<h2>Normalisation Options</h2>
<p>When using the data for import into Unreal Engine 5, it can be useful to normalise the data so that you're using the full 16 bit range of the file.</p>
<dl>
<dt>None</dt>
<dd>Do not perform any normalisation. The pixel value represents the height in m (note that negative values will be 0)</dd>
<dt>Regular</dt>
<dd>Scale the height values in the data to 0 to 65536, making full use of all 16 bits of the file's range</dd>
<dt>Smart</dt>
<dd>Unfortunately, there are some errors in the Mapzen data that throw off the normalisation - 0 values or high values that skew the normalisation completely. Using this method, we take a 99.9% window of the data to get rid of outliers. However, if the actual max/min are within 1 standard deviation of the windowed max/min then we use the actual values to retain the min/max data.</dd>
</dl>
<h3>Examples</h3>
<table class="table is-fullwidth">
<thead>
<tr>
<th>Normalisation Mode</th>
<th class="has-text-centered">None</th>
<th class="has-text-centered">Regular</th>
<th class="has-text-centered">Smart</th>
</tr>
</thead>
<tbody>
<tr>
<th>Aizuwakamatsu<br><small>Without Source Error</small></th>
<td><figure class="image"><img src="public/im/aizuwakamatsu_none.png" width=512 height=512 alt=""></figure></td>
<td><figure class="image"><img src="public/im/aizuwakamatsu_regular.png" width=512 height=512 alt=""></figure></td>
<td><figure class="image"><img src="public/im/aizuwakamatsu_smart.png" width=512 height=512 alt=""></figure></td>
</tr>
<tr>
<th>Mt Fuji<br><small>With Source Error</small></th>
<td><figure class="image"><img src="public/im/mt_fuji_none.png" width=512 height=512 alt=""></figure></td>
<td><figure class="image"><img src="public/im/mt_fuji_regular.png" width=512 height=512 alt=""></figure></td>
<td><figure class="image"><img src="public/im/mt_fuji_smart.png" width=512 height=512 alt=""></figure></td>
</tr>
</tbody>
</table>
<p>Here is an example of an error in the source data:</p>
<div class="columns">
<div class="column">
<figure class="image"><img src="public/im/actual_error_grayscale.png"></figure>
</div>
<div class="column">
<figure class="image"><img src="public/im/actual_error_terrarium.png"></figure>
</div>
</div>
</article>
<article class="container content faq">
<h2>FAQs</h2>
<details>
<summary>There is a weird artefact in my image - why is that?</summary>
Unfortunately there are some errors in the source data - please check the 'Terrarium' preview type at the same zoom level and see if the artefacts are also present.
</details>
<details>
<summary>How do I use these images?</summary>
You can find <a href="https://docs.unrealengine.com/5.1/en-US/creating-and-using-custom-heightmaps-and-layers-in-unreal-engine/">information how to use the 16 bit png images for landscapes on the Unreal Engine website</a>
</details>
<details>
<summary>Why wouldn't I use the <a href="http://tangrams.github.io/heightmapper" target="_blank">heightmapper</a> website output?</summary>
Unfortunately, because of the way it generates images, the output from heightmapper is 1) noisy, 2) only 8 bit, resulting in poor quality landscapes and jagged areas. In 8 bit, a 1000m tall mountain would have jagged edges every 4m in height.
</details>
</article>
</main>
<script type="text/javascript" src="public/dist/js/main.js"></script>
</body>
</html>