Show HN: 3D map of shade around the world
shademap.app
Show HN: 3D map of shade around the world
1–10 of 72 posts
Re: Show HN: 3D map of shade around the world
#2Hi 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.
Re: Show HN: 3D map of shade around the world
#3Hi 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.
Very cool - just took a quick glance (gotta run right now) and it's already on my cool&useful tools menu. Thanks!
Re: Show HN: 3D map of shade around the world
#4Hi 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.
Looks great, congrats. Dragging a very zoomed out view back and forth is also quite mesmerizing e.g. https://shademap.app/#39.70557,-113.85396,4.52593z,164148075...
How do the calculations go so smoothly? I mean for each pixel that is potentially in the shade there can be a many 'upstream' pixels in the direction that the light is coming from that could cause it to be shady if there was something high there. Doing that calculation for each pixel seems very intensive, or is it achieved in some other way?
Re: Show HN: 3D map of shade around the world
#5Great work, runs very smoothly! Where do you do the shadow calculation? Do you have precomputed tilesets or do you do it on the client?
Re: Show HN: 3D map of shade around the world
#6Great work, runs very smoothly! Where do you do the shadow calculation? Do you have precomputed tilesets or do you do it on the client?
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.
Re: Show HN: 3D map of shade around the world
#7Hi 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.
Looks great, congrats. Dragging a very zoomed out view back and forth is also quite mesmerizing e.g. https://shademap.app/#39.70557,-113.85396,4.52593z,164148075... How do the calculations go so smoothly? I mean for each pixel that is potentially in the shade there can be a many 'upstream' pixels in the direction that the light is coming from that could cause it to be shady if there was something high there. Doing th…
You're spot on. One optimization is that once you are above the highest pixel of the map, you can assume you won't hit anything else. Another is calculating if the Earth's curvature will move pixels out of your way before you hit them.
Re: Show HN: 3D map of shade around the world
#8Great work, runs very smoothly! Where do you do the shadow calculation? Do you have precomputed tilesets or do you do it on the client?
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/
Re: Show HN: 3D map of shade around the world
#9Hi 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.
Very neat. Just looked up a regional park I like to go camping in and its already deep in shade by midafternoon:
https://shademap.app/#47.1987,-71.39085,11.31012z,1641497311...
Re: Show HN: 3D map of shade around the world
#10Love 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.