Hi 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.
"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)
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?
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.
Mondo cool. I love looking zoomed out at the terminator shadow, it's presumably what a person on the moon would see if they looked at the earth through a telescope. The time-slider is responsive on my ~7yr old laptop, even at the world scale. The resolution of the blocks you use for the DEM seem pretty high-resolution when zoomed in all the way, too, like sub-10m.
This is some cool work. Could you elaborate more on the algorithm used? How do you go from height map to near-real-time shadows given time of day/year? Is it all through raycasting or a faster technique?
Hey. Very cool project. I have an idea. How about you add option to show buildings. That way, people can use this to detect shade on their rooftop solar panels and its stuff.
It's something I'm working towards. Right now you can see building shadows at street level zoom, but they're quite rough. Check out shadowmap.org, which is a project that does buildings well.
I love this map, and plan to start using it to plan timing for photography projects. I hate wandering into a valley for golden hour only to find that sun has already set!
