41–50 of 72 posts
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.
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.
For example, look at New York City around dusk, and if you zoom out it's mostly yellow, but if you zoom in it's mostly black.
The concept is cool but the implementation seems to be completely wrong. For example, look at New York City around dusk, and if you zoom out it's mostly yellow, but if you zoom in it's mostly black.
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.
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…
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. [1] - https://docs.mapbox.com/hel…
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.
Nice work – product idea: find patios that are not in shade on a given day / at a given hour. Bet you could even charge a penny for a feature like this.
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?
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.
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.
Why on earth is the view oriented with SW up?
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.