[HN Gopher] Show HN: 3D map of shade around the world
___________________________________________________________________
Show HN: 3D map of shade around the world
Author : tppiotrowski
Score : 125 points
Date : 2022-01-06 18:45 UTC (4 hours ago)
(HTM) web link (shademap.app)
(TXT) w3m dump (shademap.app)
| modeless wrote:
| The WebGL update is awesome! The costs of hosting map tiles for
| the whole world can be large. How are you funding it?
| tppiotrowski wrote:
| 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.
|
| [1] https://www.mapbox.com/pricing#maploads
| modeless wrote:
| 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.
| tppiotrowski wrote:
| 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.
| modeless wrote:
| 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.
| folli wrote:
| That's a very cool implementation, I also like the idea of
| replaying GPX tracks this way!
|
| Some time ago I made an app (Sun Locator) that has a similar
| feature (see here for a short demo:
| http://www.sunlocator.com/sunlocatorwebsite2_files/topo.gif). But
| your approach is definitely more elegant.
| wedmondson wrote:
| 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/
| Eduard wrote:
| 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.
| vosper wrote:
| 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.
| lucb1e wrote:
| I had a lot of fun playing with this for over half an hour now!
| For some reason this fascinates me. Thanks!
| samwillis wrote:
| 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.
| tppiotrowski wrote:
| 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.
| ghostly_s wrote:
| Why on earth is the view oriented with SW up?
| throwoutway wrote:
| 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?
| tppiotrowski wrote:
| 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.
| tppiotrowski wrote:
| 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.
| Karawebnetwork wrote:
| 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.
| tppiotrowski wrote:
| "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 wrote:
| Bigger than you'd think, it's true! Outremont gets sunrise
| about 45 minutes after the eastern part of the city.
| monkeybutton wrote:
| 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...
| toss1 wrote:
| Very cool - just took a quick glance (gotta run right now) and
| it's already on my cool&useful tools menu. Thanks!
| k82a wrote:
| 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?
| tppiotrowski wrote:
| 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.
| davidxmiller wrote:
| 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.
| tppiotrowski wrote:
| 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/help/getting-started/mapbox-
| data/#ma...
|
| [2] - https://www.nextzen.org/#terrain-tiles
|
| EDIT: For buildings I used OSM Buildings initially, but now
| such data is directly encoded in the vector map tiles provided
| by Mapbox
| davidxmiller wrote:
| 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.
| pheelicks wrote:
| Great work, runs very smoothly! Where do you do the shadow
| calculation? Do you have precomputed tilesets or do you do it on
| the client?
| tppiotrowski wrote:
| 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.
| pheelicks wrote:
| 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/
| tppiotrowski wrote:
| 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...
| ginko wrote:
| Ah, the joys of living in the North:
|
| https://shademap.app/#63.41876,10.43876,12.06084z,1641468451...
| tppiotrowski wrote:
| Looks like you found a bug. This link works on Firefox and iOS,
| but my desktop Safari displays no shadows. Will investigate.
| shtopointo wrote:
| 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.
___________________________________________________________________
(page generated 2022-01-06 23:00 UTC)