7 ms·

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 t

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.

toss1 5y ago
Very cool - just took a quick glance (gotta run right now) and it's already on my cool&useful tools menu. Thanks!
k82a 5y ago
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,1641480751979t,0b,45p 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?
- tppiotrowski 5y ago
  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.
monkeybutton 5y ago
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,1641497311979t,-27.44942b,43.98997p https://shademap.app/#47.1987,-71.39085,11.31012z,1641497311...
Karawebnetwork 5y ago
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,1641473011979t,0b,0p 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.
- tppiotrowski 5y ago
  "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)
- acomms 5y ago
  Bigger than you'd think, it's true! Outremont gets sunrise about 45 minutes after the eastern part of the city.
notJim 5y ago
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!
geenew 5y ago
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.
itsbits 5y ago
Great work. Can we also have timeline of day w.r.to area we are viewing instead of localized one? it can be much better experiance
2Gkashmiri 5y ago
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. That would be something great
- tppiotrowski 5y ago
  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.
  - 2Gkashmiri 5y ago
    wow. that is impressive.
rypskar 5y ago
That was cool, it even shows the correct day for when I can hope to see the sun again from my house
alex_duf 5y ago
That's incredible! I'm looking for a house right now, that means I can check how much light it gets before even visiting it. Thanks!
rahkiin 5y ago
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?

toss1 5y ago

Very cool - just took a quick glance (gotta run right now) and it's already on my cool&useful tools menu. Thanks!

k82a 5y ago

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,1641480751979t,0b,45p 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?

tppiotrowski 5y ago
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.

monkeybutton 5y ago

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,1641497311979t,-27.44942b,43.98997p https://shademap.app/#47.1987,-71.39085,11.31012z,1641497311...

Karawebnetwork 5y ago

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,1641473011979t,0b,0p 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.

tppiotrowski 5y ago
"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)
acomms 5y ago
Bigger than you'd think, it's true! Outremont gets sunrise about 45 minutes after the eastern part of the city.

notJim 5y ago

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!

geenew 5y ago

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.

itsbits 5y ago

Great work. Can we also have timeline of day w.r.to area we are viewing instead of localized one? it can be much better experiance

2Gkashmiri 5y ago

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. That would be something great

tppiotrowski 5y ago
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.
- 2Gkashmiri 5y ago
  wow. that is impressive.

rypskar 5y ago

That was cool, it even shows the correct day for when I can hope to see the sun again from my house

alex_duf 5y ago

That's incredible! I'm looking for a house right now, that means I can check how much light it gets before even visiting it. Thanks!

rahkiin 5y ago

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?