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!
This is really cool! It might come in handy when house or property hunting. Here is another, similar tool I have found helpful for gardening. https://www.suncalc.org/
Absolutely! I remember looking at some houses on the south side of Donner Lake and somebody said the nickname for that area in the winter was "Siberia", because it spends a lot of time in the shade. I bought the suncalc app on the spot to double check -- and sure enough, they were right.
This tool does a much better job of telling the story. I wish it would've existed at the time!
I spent 3 years in Keflavik, Iceland in the 90's when I was a kid and my dad was in the Navy. I remember winter getting only a few hours of daylight where the sun would merely peek over the horizon for part of the afternoon. Looking at Iceland through this map, I was able to tell that some parts have hills to their south and during winter, they'll never leave the shadows.
Of course, go just a little more North, and during the summer, the sun never sets. It just circles the horizon.
Love 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.
Minor detail, but it seems like while the height of buildings is somehow reflected, the `height=*` key is not. So the church tower in my town has has less shadow than the apartment building next to it.
Looks great, congrats! I have worked on the same sort of project on (and mostly off) over a while, but didn't get as far as having a nice UI on the front etc. I'd started in WebGL but then moved to a back-end server using CUDA and separate front end (mostly as I wanted to learn a bit about CUDA at the time). What did you use for your source of height data? I'd used some free LiDAR data but didn't find high resolution free LiDAR data for Scotland.
EDIT: I found your blog, so can see you used e.g. https://osmbuildings.org/documentation/data/ for buildings. I'd looked at that also but found the data a little sparse and also not so accurate, but its possibly improved since, and does look good on the rendering.
I use Mapbox terrain RGB [1]. A good free alternative is Nextzen [2], but they do not generate tiles past zoom level 15 (Mapbox does it to 20) and there are some random elevation spikes that Mapbox has cleaned up.
I'm looking forward to a LIDAR elevation tile set becoming available because it can be loaded into Shademap without any modification and hopefully display shade from trees.
Interesting, thanks, I'll have a look at Mapbox terrain RGB.
Will be interesting to see the resolution of a LIDAR tile set if Mapbox are going to have one, I've found that I could sometimes find low-resolution free data (5M / 10M etc), but that higher resolution 25cm/50cm/1M etc was often commercial and very expensive, but that gives much more accurate results in city areas. I'll have a look at Nextzen also.
Are there current plans for a lidar derived surface elevation tile from mapbox?
Even the USGS 3DEP program only offers preprocessed DEMs (that is, DTMs). I can see generating that sort of thing at ~5-10m resolution on a global scale from satellite imagery / photogrammetry.
A global or even regional DSM would be quite a product.
This 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.
A feature that would make this even more fun to use: a way to auto-rotate the map so that the bottom of the screen is the direction that sunlight is coming from at the current time of day. Right now, I can only infer the sun’s direction from the pixelated shadows of buildings, but I’m curious about its direction at different times of day relative to various windows in my building. I think rotating the map with the sun would be an intuitive way to show that direction.
The UI could be a toggle button below the “Tilt map” toggle button with an icon of a sun and a title “Rotate with the sun”.
I understand that the sunlight comes at slightly different angles to each point on the map. The feature wouldn’t have to complicated because of this, though: I would find it intuitive if the feature only calculated the angle from the sun to the location at the center of the visible map.
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...
Deeply awesome - I wouldn't have dreamed that it could perform so well! (even works nicely on my 200€ phone) It would be fascinating to read more of the design and data structuring behind it (if you find the time & will & it doesn't disclose too much secret sauce)
But I really came here to say that by fat fingering I hit your earlier equinox posting [0] which sadly didn't get noticed. Coupled with the ability to easily change the date it's the clearest demonstration I've ever seen of axial tilt and the lovely fact that the sun rises & sets due east & west for EVERYWHERE on that day. (it's also about the only thing a Mercator projection really excels at)
Unfortunately it doesn’t seem to take into account terrain outside of the viewport. Try zooming into the tip of a mountain’s shadow during a “long shadows” time of day, once you zoom in enough that the mountain itself is out of viewport suddenly the area brightens.
Does anyone know of code for simplified triangle geometry rendering of dem data? The color data from satellite images blows up storage cost but simplified geometry might be small enough to both be useful and pretty to look at.
Great job. I’ve always felt “sun impact” is one of those things that are never well presented in real estate, so maybe there’s a market gap there. Even just figuring out where the sun will be coming from and when it rises at certain parts of the year seems semi-trivial (there’s a couple of web apps around that have been doing it for years), but it’s rarely well integrated in the presentation of an object to be sold or rented out.
I've used an app called PhotoPills to plan landscape photo shoots in the past. It lets you drop a pin on a map and shows you the direction of sunlight at any given time of day.
Shade Map gives me so much more fidelity to play with. The pseudo-3D view with shadow rendering helps tremendously in previsualising a photo.
There's also the whole field of radio signal propagation, the cellular industry regularly uses essentially the same type of product to model shading of cell tower signals.
I forget the adage used on HN, but something along the lines of "People are more willing to pay to avoid pain than to gain pleasure". A tool to prevent sun burn or skin cancer seems more promising.
The shade layer is pluggable into any mapping application if you want to prove HN wrong [1]
super awesome! I have plenty of fun playing with this.
* Is there a way to deactivate daylight saving time switches / locale-specific time and just use global UTC time? Because when I drag the "day-of-the-year" slider, at the end of March the rendering jumps for the switch from CET to CEST, and jumps at the end of October for the switch from CEST to CET - at least for my locale.
* Sunsets and sunrises are the most spectacular, just as in real life. Maybe one idea is to allow for a third slider controlling the "second of a minute" ... or providing an optional "time stretching"/"slow motion" dragging behavior the closer the current position of the "minute-of-the-day" slider gets to the moment of sunset/sunrise.
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.
I echo all of the compliments on the app. It certainly has a utility function but its also very aesthetically pleasing to use for some reason. I think the smoothness and fine resolution plus the contrast of the shade brings familiar form out of nothing.
One thing i didn’t expect and can’t really explain is the emotional impact of zooming out until you can see your location and that of a loved one and watching the sun rise and set at slightly different times and different ways for each. There’s an interesting connection that it somehow creates, I’m not sure.
Anyway, in that context i kept finding myself replaying sunrises and sunsets and my rickety fingers don’t do a great job of making that a smooth process. That made me yearn for a little time widget that progresses the clock automatically at some +/- multiple of realtime.
Congrats btw, i don’t know if you feel like you accomplished your goal of learning webgl but it sure looks like you have to me.
Great question. It costs nothing up to 50K map loads [1], but I did burn some money learning along the way:
I went with Mapbox and Maptiler for tiles early on. Initially I used Leaflet with raster map tiles and raster elevation tiles. Mapbox free-tier for raster tiles was 750,000 tiles per month and I exceeded that a few months in.
Next I used Leaflet with [maplibre/mapbox]-gl-leaflet plugin which allowed me to use unlimited vector map tiles from Mapbox up to 50K map loads. However, I continued to use raster elevation tiles and these soon started exceeding 750,000 tiles per month.
Finally I switched to Mapbox GL JS. This allows you 50K map loads a month and unlimited loading of elevation and vector map tiles per map load. I used Maplibre GL JS for a bit, but it's missing the 3D terrain functionality so I went with Mapbox instead.
In general, it would cost about $100 for every 3000 visitors before switching to Mapbox GL JS.
Being on the HN front page is going to blow out your budget for the month probably. Hope it doesn't cost you too much! I had issues with my own site using Street View which is even more expensive than maps (https://james.darpinian.com/satellites/) until I found out you can apply for large amounts of free Google Maps API credits for educational and non-profit use. It's a little stressful because if you exceed your credits and don't deactivate the API in time you can still end up with a large bill, and the credits have to be re-approved every year in a slow and uncertain manual process. But hey, it's free and pretty generous, and nobody else has Street View so my site can't work without it.
It's a little early to say, but someone posted it on r/InternetIsBeautiful last month and it had about 75K visitors over two days. It looks like the front page of HN will be just a fraction (20%?) of that traffic.
Reddit is truly massive, but I appreciate the HN discussions more.
You're right, I went and looked up my stats and HN doesn't seem as large as I thought. My biggest traffic days have been from Facebook. When Starlink is visible over a major city, I sometimes get a bump in traffic from people sharing the site. I was skeptical at first that adding social share buttons was important, but I think it actually has driven quite a bit of traffic. And I've gotten a ton of twitter followers which is cool. Though they don't actually care about what I tweet about, it's just nice to have a big number on my profile.
