This looks great! Testing on mobile (iOS) and it’s very smooth! Does it autochange based on time or does the user need to refresh?
Show HN: 3D map of shade around the world
11–20 of 72 posts
Re: Show HN: 3D map of shade around the world
#12Earlier quoted context omitted.
On the client. A WebGL shader that ray traces each pixel towards the sun. If the ray hits terrain on the way, the pixel will be in the shade. It also takes into account the Earth's curvature, so you can zoom out to planet level and it still works.
Impressive performance, I remember trying this technique a while back a the number of steps required made the frame rate drop. Is the code public? By the way, you might like https://felixpalmer.github.io/volcanoes-of-japan/
Sorry, code is not public. My initial business model was to offer the shade layer as a drop in for any Leaflet, Mapbox, Google Map so companies like AllTrails, Strava, Gaia GPS could use it in their apps but selling's hard. Now I'm leaning a bit towards just releasing an app with offline mode.
Great link, thanks. Horizontal scrollbar tripped me out a little bit though...
Re: Show HN: 3D map of shade around the world
#13Love this, what are you using as the terrain elevation data source? I don't think this is something available from Open Street Map and can't see any attribution. Also (bug report) it seems to be a little buggy on Safari on MacOS when you zoom out, it gets quite glitchy.
I need to change the default attribution positioning because it's under the time slider but the terrain data is aggregated by Mapbox in their terrain dataset. The building data also comes from the Mapbox vector tiles but is sourced from OpenStreetMap data.
Sorry for the glitches. If you copy and paste your url here, I can see exactly the zoom/location/pitch/bearing you're looking at.
Re: Show HN: 3D map of shade around the world
#14Ah, the joys of living in the North:
https://shademap.app/#63.41876,10.43876,12.06084z,1641468451...
Re: Show HN: 3D map of shade around the world
#15This looks great! Testing on mobile (iOS) and it’s very smooth! Does it autochange based on time or does the user need to refresh?
If no timestamp is specified in the url, it defaults to your local time. As you move the time slider, the shadows will change and update the timestamp in the url so reloading the page will result in seeing the exact same location at the exact same time as before.
The shade does not change automatically, you need to move the time slider.
Re: Show HN: 3D map of shade around the world
#16Hi HN. I've been learning WebGL and working on this project for about a year. I posted it previously when it worked in 2D and wanted to share it again because the 3D really makes the shade come to life. Most of the credit for the update due to migrating from Leaflet to Mapbox GL JS.
Interesting! I had never noticed the amount of shade created by the mountain in the middle of Montreal.
It almost seems wrong at first glance, the shadow it casts is huge and it covers most of the city and far beyond. But it's probably my monkey brain that doesn't notice the gradual changes and isn't aware that where I am at that moment has less light than the surrounding areas.
What is " shade " according to this map? Do you know how much sunlight (lumens?) is lost? Or is this an extrapolation of the shape of the features? It looks like the edges are quite hard when they should be softer and have different levels of opacity? Especially when the sun is very low, because according to this image, the mountain casts a shadow all the way to the town north of the river, several miles away. I'm thinking out loud. https://shademap.app/#45.581,-73.4441,10.0642z,1641473011979...
I will make sure to pay better attention next time I'm in the city around that time.
Re: Show HN: 3D map of shade around the world
#17Ah, the joys of living in the North: https://shademap.app/#63.41876,10.43876,12.06084z,1641468451...
Looks like you found a bug. This link works on Firefox and iOS, but my desktop Safari displays no shadows. Will investigate.
Re: Show HN: 3D map of shade around the world
#18This is really cool. Occasionally I look for land near mountains, with the aim of building a future holiday home there. It'll be really helpful to know what areas are going to still get sun in the middle of winter.
Re: Show HN: 3D map of shade around the world
#19I had a lot of fun playing with this for over half an hour now! For some reason this fascinates me. Thanks!
Re: Show HN: 3D map of shade around the world
#20Hi HN. I've been learning WebGL and working on this project for about a year. I posted it previously when it worked in 2D and wanted to share it again because the 3D really makes the shade come to life. Most of the credit for the update due to migrating from Leaflet to Mapbox GL JS.
Interesting! I had never noticed the amount of shade created by the mountain in the middle of Montreal. It almost seems wrong at first glance, the shadow it casts is huge and it covers most of the city and far beyond. But it's probably my monkey brain that doesn't notice the gradual changes and isn't aware that where I am at that moment has less light than the surrounding areas. What is " shade " according to this ma…
"shade" means that there is no "direct" sunlight on that spot. Some object is in the way blocking the sun. If you were to go the a spot shaded on this map at the given time (and lay your eye at ground level), you should not see the sun (+/- 2 minutes or so because the suns disk is not a point as this model approximates)