https://konrad.earth
•
This is a web feed, also known as an Atom feed. Subscribe by copying the URL from the address bar into your newsreader. Visit About Feeds to learn more and get started. It's free.Visit websiteRecent postsUpdated on $DATEdateGISkonrad.earth - GISKonrad HeidlerZola2025-05-26T00:00:00+00:00https://konrad.earth/tags/gis/atom.xmlJapan Shader2025-05-26T00:00:00+00:002025-05-26T00:00:00+00:00Konrad Heidlerhttps://konrad.earth/blog/japan-shader/<figure >
<img src=photo.jpg />
<figcaption>
<p>
Mountains fading out toward the horizon. This is what we’re looking to re-create in a shader. Photo taken from Oyunohara View Point, Wakayama Prefecture
</p>
</figcaption>
</figure>
<p>The mountains in traditional japanese art prints, ridge behind ridge, each one paler than the last until they finally fade into the sky, always struck me as a stylistic choice.
A way of flattening distance onto the canvas.
Then I walked the Kumano Kodo, on the Kii Peninsula south of Osaka, and found out that these paintings are much closer to reality than I thought they were.
Near ridges dark green. The next one blue-grey. Four or five more behind that, each fainter, the last barely separable from the sky.
Dense folded ranges, a lot of humidity, and atmospheric scattering does the rest.</p>
<p><a rel="external" href="https://www.openpv.de/">Having worked with elevation models and ray marching before</a>, I figured it would be an interesting challenge to try and recreate this prorammatically.
Not a static image, but an interactive applet where you can pick a point on the map and have the mountain ranges laid out before you, in the traditional Japanese art style.
So before we dive into how this is done, enjoy some dynamically rendered Japanese mountains, drawn live by your GPU:</p>
<div class="applet">
<iframe src=https://maps.heidler.info/japan-shader allow="fullscreen" allowfullscreen></iframe>
<button
type="button"
class="fullscreen"
aria-label="Open applet fullscreen"
title="Fullscreen"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M5 9V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</button>
</div>
<h1 id="the-shader">The shader</h1>
<p>The core of this app is the WebGL shader.
For each pixel on the screen, it marches along the corresponding ray in 3d space and checks whether the ray intersects with the terrain at any point.
The ray marching loop is quite simple:</p>
<pre class="giallo z-code"><code data-lang="glsl"><span class="giallo-l"><span class="z-keyword">for</span><span class="z-punctuation">(;</span><span class="z-source"> t </span><span class="z-keyword z-operator"><=</span><span class="z-constant z-numeric"> 15.</span><span class="z-keyword">e</span><span class="z-constant z-numeric">4</span><span class="z-punctuation">;</span><span class="z-source"> t </span><span class="z-keyword z-operator">*=</span><span class="z-constant z-numeric"> 1.05</span><span class="z-punctuation">) {</span></span>
<span class="giallo-l"><span class="z-source"> vec3 check </span><span class="z-keyword z-operator">=</span><span class="z-source"> x0 </span><span class="z-keyword z-operator">+</span><span class="z-source"> t </span><span class="z-keyword z-operator">*</span><span class="z-source"> dx</span><span class="z-punctuation">;</span></span>
<span class="giallo-l"><span class="z-source"> alpha </span><span class="z-keyword z-operator">*=</span><span class="z-constant z-numeric"> 0.992</span><span class="z-punctuation">;</span></span>
<span class="giallo-l"><span class="z-storage z-type"> float</span><span class="z-source"> h </span><span class="z-keyword z-operator">=</span><span class="z-entity z-name z-function"> height</span><span class="z-punctuation">(</span><span class="z-source">check</span><span class="z-punctuation">.</span><span class="z-source">xy</span><span class="z-punctuation">);</span></span>
<span class="giallo-l"><span class="z-keyword"> if</span><span class="z-punctuation">(</span><span class="z-source">h </span><span class="z-keyword z-operator">></span><span class="z-source"> check</span><span class="z-punctuation">.</span><span class="z-source">z</span><span class="z-keyword z-operator"> ||</span><span class="z-source"> h </span><span class="z-keyword z-operator">></span><span class="z-constant z-numeric"> 5000.</span><span class="z-punctuation">) {</span></span>
<span class="giallo-l"><span class="z-keyword"> break</span><span class="z-punctuation">;</span></span>
<span class="giallo-l"><span class="z-punctuation"> }</span></span>
<span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre>
<p>At each step it samples the digital elevation model (DEM) texture.
If the sampled terrain height is higher than the current ray height, the ray has hit something.
If it does not hit anything within about 150 km, we stop marching and treat this pixel as sky.</p>
<p>Now there is no actual lighting simulation or anything done in the shader.
Instead, the <code>alpha</code> variable starts at <code>1.0</code> and decays as the ray flies through space.
The later the ray hits the terrain, the less <code>alpha</code> is left.
For near terrain, we colour the pixel dark green, while farther terrain shifts toward blue, and long unobstructed rays fade toward a pale grey sky:</p>
<pre class="giallo z-code"><code data-lang="glsl"><span class="giallo-l"><span class="z-keyword">if</span><span class="z-punctuation">(</span><span class="z-source">alpha </span><span class="z-keyword z-operator"><</span><span class="z-constant z-numeric"> 0.5</span><span class="z-punctuation">) {</span></span>
<span class="giallo-l"><span class="z-source"> fragColor </span><span class="z-keyword z-operator">=</span><span class="z-entity z-name z-function"> mix</span><span class="z-punctuation">(</span><span class="z-source">sky</span><span class="z-punctuation">,</span><span class="z-source"> blue</span><span class="z-punctuation">,</span><span class="z-source"> alpha </span><span class="z-keyword z-operator">*</span><span class="z-constant z-numeric"> 2.0</span><span class="z-punctuation">);</span></span>
<span class="giallo-l"><span class="z-punctuation">}</span><span class="z-keyword"> else</span><span class="z-punctuation"> {</span></span>
<span class="giallo-l"><span class="z-source"> fragColor </span><span class="z-keyword z-operator">=</span><span class="z-entity z-name z-function"> mix</span><span class="z-punctuation">(</span><span class="z-source">blue</span><span class="z-punctuation">,</span><span class="z-source"> green</span><span class="z-punctuation">,</span><span class="z-source"> alpha </span><span class="z-keyword z-operator">*</span><span class="z-constant z-numeric"> 2.0</span><span class="z-keyword z-operator"> -</span><span class="z-constant z-numeric"> 1.0</span><span class="z-punctuation">);</span></span>
<span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre>
<p>That is why the output feels more like a painting than a shaded relief map.
The visible shapes are controlled by real topography, but the color ramp is chosen to emphasize distance, haze, and silhouettes.</p>
<h1 id="getting-elevation-data">Getting Elevation Data</h1>
<p>Copernicus provides <a rel="external" href="https://dataspace.copernicus.eu/explore-data/data-collections/copernicus-contributing-missions/collections-description/COP-DEM">global elevation models</a> at multiple resolutions.
As the browser will have to load all of Japan into RAM, the processed DEM will have to be quite low-res, so I used the coarse 90m product as a good starting point.
After downloading 71 DEM tiles from the Copernicus S3 bucket, this data now needs to be reprojected from a lat/lon grid (EPSG:4326) to something more suited for building something resembling 3d space.
Considering our rough radius requirement of 150km, we can get away with using Mercator (EPSG:3857) here, ignoring the fact that Earth is a sphere.
Also, using Mercator makes the calculations between points on the map and the pixel space of the DEM much easier.
The reprojection happens in 2 steps:</p>
<ol>
<li>Building a VRT from the elevation tiles</li>
<li>Warping the VRT to Web Mercator and subsetting to the bounds of Japan</li>
</ol>
<pre class="giallo z-code"><code data-lang="shellscript"><span class="giallo-l"><span class="z-entity z-name z-function">gdalbuildvrt</span><span class="z-string"> dem.vrt dem_tiles/</span><span class="z-variable">*</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-entity z-name z-function">gdal_translate</span><span class="z-constant z-character z-escape"> \</span></span>
<span class="giallo-l"><span class="z-string"> -projwin</span><span class="z-constant z-numeric"> 14411296.0 5015741.0 15844896.0 3582141.0</span><span class="z-constant z-character z-escape"> \</span></span>
<span class="giallo-l"><span class="z-string"> -tr</span><span class="z-constant z-numeric"> 700 700</span><span class="z-constant z-character z-escape"> \</span></span>
<span class="giallo-l"><span class="z-string"> -co COMPRESS=DEFLATE</span><span class="z-constant z-character z-escape"> \</span></span>
<span class="giallo-l"><span class="z-string"> dem.vrt dem.tif</span></span></code></pre>
<p>Bounds and resolution are chosen in such a way that the resulting DEM texture will be 2048×2048 pixels in size. Finally, PIL converts the TIF image into a 16-bit grayscale PNG, making it easy to serve and load into WebGL.</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-keyword">import</span><span class="z-source"> rasterio</span><span class="z-keyword"> as</span><span class="z-source"> rio</span></span>
<span class="giallo-l"><span class="z-keyword">from</span><span class="z-source"> PIL</span><span class="z-keyword"> import</span><span class="z-source"> Image</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-keyword z-control z-flow z-python">with</span><span class="z-source"> rio</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">open</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'dem.tif'</span><span class="z-punctuation">)</span><span class="z-keyword z-control z-flow z-python"> as</span><span class="z-source"> raster</span><span class="z-punctuation">:</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # Scale by 10.0 to keep more vertical accuracy</span></span>
<span class="giallo-l"><span class="z-source"> data</span><span class="z-keyword z-operator"> =</span><span class="z-source"> raster</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">read</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">)</span><span class="z-keyword z-operator"> *</span><span class="z-constant z-numeric"> 10.0</span></span>
<span class="giallo-l"><span class="z-source">img</span><span class="z-keyword z-operator"> =</span><span class="z-source"> Image</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">fromarray</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">data</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">astype</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">uint16</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">img</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">save</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'dem.png'</span><span class="z-punctuation">)</span></span></code></pre>
<p>This is the practical trick that makes the whole applet lightweight. All the geospatial work happens offline. The web app only needs this one 2048 by 2048 elevation texture and a WebGL fragment shader.</p>
<h1 id="tradeoffs">Tradeoffs</h1>
<p>There are plenty of inaccuracies. Web Mercator distorts scale, the elevation texture is coarse, the ray marching uses fixed exponential steps, the camera sits just above the DEM surface, and the atmosphere is just a hand-tuned color fade. There is no lighting model, no shadows, no clouds, and no curvature correction.</p>
<p>But for this purpose those are acceptable compromises. The goal is not to answer “what exactly would I see from this point?” The goal is to make a fast, explorable sketch of how Japan’s terrain stacks up visually: ridge after ridge, each one a little paler than the last.</p>
Reversing Hill Shading in Digital Elevation Models2019-01-03T09:00:00+01:002019-01-03T09:00:00+01:00Konrad Heidlerhttps://konrad.earth/blog/hillshade/<p>A while back on the <a rel="external" href="https://www.reddit.com/r/gis">Geographic Information Systems Subreddit</a> I stumbled upon <a rel="external" href="https://www.reddit.com/r/gis/comments/9o6pni/convert_a_rgb_rendered_geotiff_back_into_a_dem/">this question</a>.
A user wished to get height information from this elevation map they had found somewhere:</p>
<img class="dimmable-image" src="./hillshade_rotated.png" loading="lazy"/>
<p>Unforunately it has <a rel="external" href="https://en.wikipedia.org/wiki/Terrain_cartography#Shaded_relief">hill-shading</a> applied on top of the color bar. While this shading technique makes it easier to understand the terrain structure at a glance, it also makes it harder to extract the raw height data from the map. So first we’ll have to understand how hill-shading works in order to find a way to get around it.</p>
<h2 id="hill-shading">Hill-shading</h2>
<p>The point of hill-shading is make a height map appear 3D by shading slopes according to imaginary sunlight that hits the plane at some angle.</p>
<img class="img-light" src="shading.svg" loading="lazy">
<img class="img-dark" src="shading-dark.svg" loading="lazy">
<p>When creating a regular elevation map, one takes the raw elevation values and
maps them to \((r, g, b)\) values according to a specified color scale.
To achieve hill-shading, one additionally specifies a global light vector \(\vec l\)
and a surface normal vector \(\vec n\) for each point. The shading factor can then be expressed as the scalar product \(s = \langle -\vec l, \vec n\rangle\).</p>
<p>The important point here is that the shading factor is applied uniformly to all three color channels. This means that hillshading only affects the brightness of a pixel, but not its hue. So if the color scale plays nicely with the hue, we will be able to extract the original height data.</p>
<h2 id="getting-our-hands-dirty">Getting our hands dirty</h2>
<p>Time to whip out python and get going!
Reading the image is pretty straight forward.</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-keyword">import</span><span class="z-source"> numpy</span><span class="z-keyword"> as</span><span class="z-source"> np</span></span>
<span class="giallo-l"><span class="z-keyword">import</span><span class="z-source"> matplotlib</span><span class="z-punctuation">.</span><span class="z-source">pyplot</span><span class="z-keyword"> as</span><span class="z-source"> plt</span></span>
<span class="giallo-l"><span class="z-keyword">import</span><span class="z-source"> colorsys</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">img</span><span class="z-keyword z-operator"> =</span><span class="z-source"> plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imread</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'hillshade_rotated.png'</span><span class="z-punctuation">)</span></span></code></pre>
<p>We then take a look at the image and find a line that slices through the color bar.
From this bar we’ll deduce the transform needed to convert hue to elevation</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">figure</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">figsize</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation"> (</span><span class="z-constant z-numeric">10</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 10</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">grid</span><span class="z-punctuation">(</span><span class="z-constant z-language z-python">False</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imshow</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">img</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">plot</span><span class="z-punctuation">([</span><span class="z-constant z-numeric">97</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 97</span><span class="z-punctuation">], [</span><span class="z-constant z-numeric">95</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 755</span><span class="z-punctuation">])</span><span class="z-source">;</span></span></code></pre><img class="dimmable-image" src="find_bar.png" loading="lazy"/>
<p>We can now take the data from the color bar.
To be sure, we plot the color bar data to verify that we actually extracted what we wanted.</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-source">colorbar</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-indexed-name z-python"> img</span><span class="z-punctuation">[</span><span class="z-constant z-numeric">755</span><span class="z-punctuation">:</span><span class="z-constant z-numeric">95</span><span class="z-punctuation">:</span><span class="z-keyword z-operator">-</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 97</span><span class="z-punctuation">:</span><span class="z-constant z-numeric">98</span><span class="z-punctuation">, :]</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">grid</span><span class="z-punctuation">(</span><span class="z-constant z-language z-python">False</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imshow</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">kron</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">colorbar</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">ones</span><span class="z-punctuation">((</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 60</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 1</span><span class="z-punctuation">))).</span><span class="z-meta z-function-call z-python">transpose</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 0</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 2</span><span class="z-punctuation">))</span><span class="z-source">;</span></span></code></pre><figure >
<img src=colorbar.png />
<figcaption>
<p>
The extracted color bar
</p>
</figcaption>
</figure>
<p>Upon extracting the hue channel from the color bar data, we see that it is in fact monotonic and close to injective!
This means we can reconstruct the original elevation data from just this channel.</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-storage z-type z-function z-python">def</span><span class="z-entity z-name z-function"> convert</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">image</span><span class="z-punctuation">):</span></span>
<span class="giallo-l"><span class="z-source"> fun</span><span class="z-keyword z-operator"> =</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">vectorize</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">colorsys</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-arguments z-python">rgb_to_hsv</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> return</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">stack</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-python">fun</span><span class="z-punctuation">(</span><span class="z-meta z-indexed-name z-python">image</span><span class="z-punctuation">[:,:,</span><span class="z-constant z-numeric">0</span><span class="z-punctuation">],</span><span class="z-meta z-indexed-name z-python"> image</span><span class="z-punctuation">[:,:,</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">],</span><span class="z-meta z-indexed-name z-python"> image</span><span class="z-punctuation">[:,:,</span><span class="z-constant z-numeric">2</span><span class="z-punctuation">]))</span></span>
<span class="giallo-l"><span class="z-source">HUE</span><span class="z-punctuation">,</span><span class="z-source"> SATURATION</span><span class="z-punctuation">,</span><span class="z-source"> VALUE</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-function-call z-python"> convert</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">colorbar</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">HIGH</span><span class="z-keyword z-operator"> = -</span><span class="z-constant z-numeric">40</span></span>
<span class="giallo-l"><span class="z-source">LOW</span><span class="z-keyword z-operator"> = -</span><span class="z-constant z-numeric">78.08</span></span>
<span class="giallo-l"><span class="z-storage z-type z-function z-python">def</span><span class="z-entity z-name z-function"> correct</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">x</span><span class="z-punctuation">):</span></span>
<span class="giallo-l"><span class="z-source"> H</span><span class="z-keyword z-operator"> =</span><span class="z-source"> np</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">sort</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">HUE</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">reshape</span><span class="z-punctuation">(</span><span class="z-keyword z-operator">-</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-keyword z-control z-flow z-python"> return</span><span class="z-source"> HIGH</span><span class="z-keyword z-operator"> -</span><span class="z-punctuation"> (</span><span class="z-source">HIGH</span><span class="z-keyword z-operator"> -</span><span class="z-source"> LOW</span><span class="z-punctuation">)</span><span class="z-keyword z-operator"> *</span><span class="z-source"> H</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">searchsorted</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">x</span><span class="z-punctuation">)</span><span class="z-keyword z-operator"> /</span><span class="z-support z-function z-builtin z-python"> len</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">H</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source"> </span></span>
<span class="giallo-l"><span class="z-source">fig</span><span class="z-punctuation">, (</span><span class="z-source">ax1</span><span class="z-punctuation">,</span><span class="z-source"> ax2</span><span class="z-punctuation">)</span><span class="z-keyword z-operator"> =</span><span class="z-source"> plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">subplots</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 2</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> figsize</span><span class="z-keyword z-operator">=</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">10</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 5</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">ax1</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">plot</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">HUE</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">ax1</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">set_title</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'Hue Progression'</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">ax2</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">plot</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-python">correct</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">HUE</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">ax2</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">set_title</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'Corrected Elevation Progression'</span><span class="z-punctuation">)</span></span></code></pre><img class="invertible-image" src="correction.png" loading="lazy"/>
<p>The left plot shows how the hue progresses over the color bar.
The right plot shows how the color bar looks when corrected using <code>np.searchsorted</code>:</p>
<p>Now, we can calculate the hue channel for the entire image and reconstruct the elevation values
using the correction function we just wrote.</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-source">h</span><span class="z-punctuation">,</span><span class="z-source"> s</span><span class="z-punctuation">,</span><span class="z-source"> v</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-function-call z-python"> convert</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">img</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">corrected</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-function-call z-python"> correct</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">h</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">figure</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">figsize</span><span class="z-keyword z-operator">=</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">10</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 10</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">grid</span><span class="z-punctuation">(</span><span class="z-constant z-language z-python">False</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imshow</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">corrected</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> cmap</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'gray'</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imsave</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'elevation_rotated.png'</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> corrected</span><span class="z-punctuation"> ,</span><span class="z-variable z-parameter"> cmap</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'gray'</span><span class="z-punctuation">)</span></span></code></pre><img class="dimmable-image" src="naive.png" loading="lazy"/>
<p>As a quick check, we’ll plot the output:</p>
<p>There’s a lot of ugly artifacts going on!
Why is that?
As you may have guessed, JPEG compression is to blame here.
Pixels close to the border of the heightmap that <em>should</em> be white get assigned some
color that slightly differs from white.
Because we only look at the hue channel, this is enough to distort these pixels completely.</p>
<p>This is where the saturation channel comes in handy.
These almost-white pixels have close to no saturation,
so it is enough to cut off the pixels at some saturation value</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-meta z-indexed-name z-python">corrected</span><span class="z-punctuation">[</span><span class="z-meta z-item-access z-python">s</span><span class="z-keyword z-operator"> <</span><span class="z-constant z-numeric"> 0.1</span><span class="z-punctuation">]</span><span class="z-keyword z-operator"> =</span><span class="z-constant z-language z-python"> None</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">figure</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">figsize</span><span class="z-keyword z-operator">=</span><span class="z-punctuation">(</span><span class="z-constant z-numeric">10</span><span class="z-punctuation">,</span><span class="z-constant z-numeric"> 10</span><span class="z-punctuation">))</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">grid</span><span class="z-punctuation">(</span><span class="z-constant z-language z-python">False</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imshow</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">corrected</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> cmap</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'gray'</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">plt</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">imsave</span><span class="z-punctuation">(</span><span class="z-punctuation z-definition z-string z-string">'elevation.png'</span><span class="z-punctuation">,</span><span class="z-meta z-function-call z-arguments z-python"> corrected</span><span class="z-punctuation"> ,</span><span class="z-variable z-parameter"> cmap</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'gray'</span><span class="z-punctuation">)</span></span></code></pre><img class="dimmable-image" src="elevation.png" loading="lazy"/>
<p>This looks much better!</p>
<p>And because stuff is always more fun in 3D,
we will end this post with a quick interactive surface plot of the extracted data in plotly:</p>
<pre class="giallo z-code"><code data-lang="python"><span class="giallo-l"><span class="z-keyword">import</span><span class="z-source"> plotly</span><span class="z-punctuation">.</span><span class="z-source">graph_objs</span><span class="z-keyword"> as</span><span class="z-source"> go</span></span>
<span class="giallo-l"><span class="z-keyword">from</span><span class="z-source"> plotly</span><span class="z-punctuation">.</span><span class="z-source">offline</span><span class="z-keyword"> import</span><span class="z-source"> plot</span><span class="z-punctuation">,</span><span class="z-source"> init_notebook_mode</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-meta z-function-call z-python">init_notebook_mode</span><span class="z-punctuation">()</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">Z</span><span class="z-keyword z-operator"> =</span><span class="z-meta z-indexed-name z-python"> corrected</span><span class="z-punctuation">[:,</span><span class="z-constant z-numeric"> 240</span><span class="z-punctuation">:</span><span class="z-constant z-numeric">610</span><span class="z-punctuation">]</span></span>
<span class="giallo-l"><span class="z-meta z-indexed-name z-python">Z</span><span class="z-punctuation">[</span><span class="z-meta z-item-access z-python">Z</span><span class="z-keyword z-operator">==</span><span class="z-constant z-numeric">1</span><span class="z-punctuation">]</span><span class="z-keyword z-operator"> =</span><span class="z-constant z-numeric"> 0</span></span>
<span class="giallo-l"><span class="z-source">surf</span><span class="z-keyword z-operator"> =</span><span class="z-source"> go</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">Surface</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">z</span><span class="z-keyword z-operator">=</span><span class="z-meta z-function-call z-arguments z-python">Z</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span class="z-source">layout</span><span class="z-keyword z-operator"> =</span><span class="z-source"> go</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">Layout</span><span class="z-punctuation">(</span></span>
<span class="giallo-l"><span class="z-variable z-parameter"> title</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'Heightmap'</span><span class="z-punctuation">,</span></span>
<span class="giallo-l"><span class="z-variable z-parameter"> autosize</span><span class="z-keyword z-operator">=</span><span class="z-constant z-language z-python">True</span><span class="z-punctuation">,</span></span>
<span class="giallo-l"><span class="z-variable z-parameter"> width</span><span class="z-keyword z-operator">=</span><span class="z-constant z-numeric">640</span><span class="z-punctuation">,</span></span>
<span class="giallo-l"><span class="z-variable z-parameter"> height</span><span class="z-keyword z-operator">=</span><span class="z-constant z-numeric">640</span><span class="z-punctuation">,</span></span>
<span class="giallo-l"><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-source">fig</span><span class="z-keyword z-operator"> =</span><span class="z-source"> go</span><span class="z-punctuation">.</span><span class="z-meta z-function-call z-python">Figure</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">data</span><span class="z-keyword z-operator">=</span><span class="z-punctuation">[</span><span class="z-meta z-function-call z-arguments z-python">surf</span><span class="z-punctuation">],</span><span class="z-variable z-parameter"> layout</span><span class="z-keyword z-operator">=</span><span class="z-meta z-function-call z-arguments z-python">layout</span><span class="z-punctuation">)</span></span>
<span class="giallo-l"><span class="z-meta z-function-call z-python">plot</span><span class="z-punctuation">(</span><span class="z-meta z-function-call z-arguments z-python">fig</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> filename</span><span class="z-keyword z-operator">=</span><span class="z-punctuation z-definition z-string z-string">'hillshade_elevation'</span><span class="z-punctuation">)</span></span></code></pre><div class="applet">
<iframe src=hillshade_elevation.html allow="fullscreen" allowfullscreen></iframe>
<button
type="button"
class="fullscreen"
aria-label="Open applet fullscreen"
title="Fullscreen"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M5 9V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</button>
</div>
<p>Find the Jupyter Notebook containing all the source code from this post <a rel="external" href="https://github.com/cloud-oak/HillshadeInverseTransform/blob/master/Hillshade.ipynb">here</a>.</p>