Fantastic project and front page. I'm sorry I have nothing to add, I'm just amazed be the effort, and how smooth, fast and straightforward it all is presented.
This is awesome. I didn't realise OSM even had such detailed data on building shapes. As others have noted, outside (or on the outskirts of) major cities the data is quite sparse but central London, for example, looks great.
Yeah, the OSM data seems really complete for some cities. Co-incidentally, I've recently been putting together some 3D GIS visualisation stuff using OSM data.
Try zooming in to pretty much any capital city, then use the right mouse button to rotate the viewpoint so the 3D shows up properly:
Same for me. I get the following messages in the console:
Loading failed for the <script> with source “https://streets.gl/js/index.js”. streets.gl:1:940
A resource is blocked by OpaqueResponseBlocking, please check browser console for details. script.js
Loading failed for the <script> with source “https://analytics.streets.gl/js/script.js”. streets.gl:1:815
Works in FF for me. It's rather resource hungry, maybe an OOM? Judging from RAM consumption I'm guessing it doesn't utilise GPU, but maybe it does and didn't fit in mine.
With textures this looks nicer than demo.f4map.com , but sadly, map data is way too old. And bridges are still a huge issue. With name like "Streets" I was expecting to be able to drive around in some sort of vehicle.
In case one of the developers is reading, small-ish bug: I increased the vertical field of view "all the way" to 120 degrees. When in "morning" mode, there is a rectangular "shade" over the right bottom corner of the screen. When in "evening" mode it is in the left bottom quarter. (At least on my MBP with Chrome.)
This is awesome! I'm not a gamer but a huge map nerd, however I've always dreamed of a "real world" mmorpg. I've taken a stab at learning Unreal to combine with some map data but never got too far.
I think this is a better approach. I assume it's using "regular" vector tiles and rending things based on that? Like where a map usually has green fill for trees, it's rendering out a patch of trees?
It does use elevation data, but does not exaggerate it, I guess. Back when I was working with 3D maps, we noticed that many people liked exaggerated terrain heights better, especially when the terrain is viewed from above and realistic heights looked “flat”. Near where I live it looks fairly close to what it does in real life: https://streets.gl/#48.50063,8.99766,7.25,312.50,135.56 (granted, having added building and roof colors for almost all buildings also helps).
While a good idea in general (the StreetComplete app makes this very easy, by the way), this won't help for this app, as the data is from September 2023. Otherwise I'd love to use it more to validate how renderers handle different buildings. F4Map should show the change fairly quickly, though.
This is pretty cool, but demonstrates why google/apple maps make heavy use of bespoke models vs just the map data, as is demonstrated pretty well by the sydney opera house and harbour bridge
https://demo.f4map.com/#lat=-33.8564200&lon=151.2149210&zoom...
f4map does a pretty good job, although I'm not sure if they use some extra model here or just render it based on osm data. Sydney opera house seems pretty well mapped and I think you could get something like that from it.
All the assets are loading sequentially. I have 100ms of latency to the server so that means several seconds of load time for me. Should be an easy fix to load them in larger batches.
All the initial assets yes, although once it started pulling in tiles, those seemed to be parallel from then on.
It took over 43 seconds to load for me according to Firefox's dev tools Network tab, each image was effectively > 300 ms, but I'm in New Zealand, and the server seems to be in the Netherlands, so that's almost worst-case...
OpenStreetMap has the building outlines (sometimes even parts of the buildings) as well as tagging that specifies
• wall and roof color
• wall and roof material
• roof shape
• height (or levels, which
typically is then multiplied
with 3 m to get a rough height)
• starting height (or level), for
building parts above ground, e.g.
bridges between buildings.
This can then get rendered as upwards extruded polygons with a cap in the shape of the roof. There are a few more complicated ways of specifying complex roofs with ridge lines, etc. but few renderers support them and usage is fairly limited.
I think it must be using the building outline data (and metadata like the heights) that people have entered, because in my city the inner-city has very complete data but a bit further out, around where I live there aren't any building outlines on OSM and there's nothing in this 3D map apart from just the streets.
The result is very impressive given that seems to be the case!
Rather disappointed to see that my condo building is flat despite being 4 floors and a nearly 20 year old renovation of a 100+ year old building. How does stuff like that happen? In the mean time the repo looks like good readin'
What I find funny is that they picked tree models that have branches down to the floor. So any tree next to a road blocks at least one lane when its branches should be several feet in the air.
Stop what you're doing and use Cloudflare (free) immediately. This is the slowest loading site I've used in years and it deserves better for all the work you've put in.
In case anyone is interested in 3D Terrain simulation (specifically for GPS tracks, e.g. hiking, skiing): I'm working on https://cubetrek.com
Source is here: https://github.com/r-follador/cubetrek
Fantastic project and front page. I'm sorry I have nothing to add, I'm just amazed be the effort, and how smooth, fast and straightforward it all is presented.
Thank you, much appreciated!
Very nice! Is there a way to upload GPC files?
I've never heard of GPC files, so no ;)
What kind of format is it?
Edit: did you mean GPX files? Yes! And FIT files.
I’d assume a misspelling of GPX.
A similar project doing exactly the same, that has been working for years, with lighting and weather effects: https://demo.f4map.com/
This is a beautiful project but unfortunately the OSM data's out of date -- over a year old at this point. Based on https://github.com/StrandedKitty/streets-gl/issues/182 it seems like this might be abandonware.
That's sad, but maybe somebody will see it here and decide to maintain this very cool project!
This is awesome. I didn't realise OSM even had such detailed data on building shapes. As others have noted, outside (or on the outskirts of) major cities the data is quite sparse but central London, for example, looks great.
Yeah, the OSM data seems really complete for some cities. Co-incidentally, I've recently been putting together some 3D GIS visualisation stuff using OSM data.
Try zooming in to pretty much any capital city, then use the right mouse button to rotate the viewpoint so the 3D shows up properly:
https://osm.newdash.io
That's just a temporary domain and an in-development project, but (to me) it seems to be working pretty well. Can build applications on top of this.
Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR index.js:1
I pressed tab and it started working
Doesn't seem to work in Firefox. You get just a white view.
I'm in Chrome and I'm also stuck on a white view, probably because https://streets.gl/js/index.js cuts off halfway through
Same for me. I get the following messages in the console:
Loading failed for the <script> with source “https://streets.gl/js/index.js”. streets.gl:1:940 A resource is blocked by OpaqueResponseBlocking, please check browser console for details. script.js Loading failed for the <script> with source “https://analytics.streets.gl/js/script.js”. streets.gl:1:815
Same here, Firefox on a Debian machine and firefox just finished updating...
I get a CORS error in the console. And a WebGPU error in Chrome. This is a Linux Debian machine.
Me too. White screen on Chrome, iOS and macOS.
Works in FF for me. It's rather resource hungry, maybe an OOM? Judging from RAM consumption I'm guessing it doesn't utilise GPU, but maybe it does and didn't fit in mine.
Not OOM. (I have 128 GB. Using... 7. lol)
With textures this looks nicer than demo.f4map.com , but sadly, map data is way too old. And bridges are still a huge issue. With name like "Streets" I was expecting to be able to drive around in some sort of vehicle.
In case one of the developers is reading, small-ish bug: I increased the vertical field of view "all the way" to 120 degrees. When in "morning" mode, there is a rectangular "shade" over the right bottom corner of the screen. When in "evening" mode it is in the left bottom quarter. (At least on my MBP with Chrome.)
Press Tab, use WSAD to move and mouse to aim = Discount Flight Simulator! Love it.
This is awesome! I'm not a gamer but a huge map nerd, however I've always dreamed of a "real world" mmorpg. I've taken a stab at learning Unreal to combine with some map data but never got too far.
I think this is a better approach. I assume it's using "regular" vector tiles and rending things based on that? Like where a map usually has green fill for trees, it's rendering out a patch of trees?
Super cool.
This might interest you: https://cesium.com/learn/unreal/unreal-photorealistic-3d-til...
Very cool! It looks like it assumes everything is flat, but I bet you could pull in elevation data from OSM as well.
It does use elevation data, but does not exaggerate it, I guess. Back when I was working with 3D maps, we noticed that many people liked exaggerated terrain heights better, especially when the terrain is viewed from above and realistic heights looked “flat”. Near where I live it looks fairly close to what it does in real life: https://streets.gl/#48.50063,8.99766,7.25,312.50,135.56 (granted, having added building and roof colors for almost all buildings also helps).
the 4 story building I live in is rendered like a basement only dwelling which is actually growing on me the more I look at it ...
You could add a building:levels value to the object in OpenStreetMap, to record the information of how many stories your building has.
https://wiki.openstreetmap.org/wiki/Key:building:levels
While a good idea in general (the StreetComplete app makes this very easy, by the way), this won't help for this app, as the data is from September 2023. Otherwise I'd love to use it more to validate how renderers handle different buildings. F4Map should show the change fairly quickly, though.
I like that 11th Century Dover Castle is now an apartment building :)
https://streets.gl/#51.12937,1.32037,45.00,0.00,630.67
It's too keen to add windows. This also is a bit annoying with churches. At least garages and sheds don't get windows by default.
This is pretty cool, but demonstrates why google/apple maps make heavy use of bespoke models vs just the map data, as is demonstrated pretty well by the sydney opera house and harbour bridge
This: https://shottr.cc/s/Qxhj/SCR-20250108-r6p.jpeg
Apple maps: https://shottr.cc/s/QWES/SCR-20250108-r69.jpeg
https://demo.f4map.com/#lat=-33.8564200&lon=151.2149210&zoom... f4map does a pretty good job, although I'm not sure if they use some extra model here or just render it based on osm data. Sydney opera house seems pretty well mapped and I think you could get something like that from it.
But definitely something similar can be rendered. Streets Gl handles complex shapes quite well: https://streets.gl/#52.23135,21.00506,45.00,0.00,1466.87
F4Map has an option "F4-specific buildings" which has premade 3D models for certain landmarks, including the opera house.
All the assets are loading sequentially. I have 100ms of latency to the server so that means several seconds of load time for me. Should be an easy fix to load them in larger batches.
All the initial assets yes, although once it started pulling in tiles, those seemed to be parallel from then on.
It took over 43 seconds to load for me according to Firefox's dev tools Network tab, each image was effectively > 300 ms, but I'm in New Zealand, and the server seems to be in the Netherlands, so that's almost worst-case...
Super fun to play with the times of the day and check where shadows/light will hit.
How is it generated the 3d objects? using CV on the stat-elite data?
OpenStreetMap has the building outlines (sometimes even parts of the buildings) as well as tagging that specifies
This can then get rendered as upwards extruded polygons with a cap in the shape of the roof. There are a few more complicated ways of specifying complex roofs with ridge lines, etc. but few renderers support them and usage is fairly limited.I think it must be using the building outline data (and metadata like the heights) that people have entered, because in my city the inner-city has very complete data but a bit further out, around where I live there aren't any building outlines on OSM and there's nothing in this 3D map apart from just the streets.
The result is very impressive given that seems to be the case!
Edit: There are some more details on the github about data sources: https://github.com/StrandedKitty/streets-gl
They have open street data on building height, and roof shape, which lets them render 3d shapes.
And when there is a typo/mistake in the data, it leads to fun results. Like in MS Flight Simulator, https://www.reddit.com/r/gaming/comments/idfogy/a_mistake_ma...
Very cool. Would like to see ability to zoom in & out, and ability to rotate the map.
Please check for WebGL support before loading all the assets
This is really impressive.
Rather disappointed to see that my condo building is flat despite being 4 floors and a nearly 20 year old renovation of a 100+ year old building. How does stuff like that happen? In the mean time the repo looks like good readin'
> How does stuff like that happen?
Simple: nobody entered the height of your condo building into OSM yet. You can change that. Be the change you want to see in the world!
My home has 2 floor if you enter from one side and 4 from the other side. Due to being on a hill. I wonder how to convince osm of that :D
There's exactly that example on the official OSM wiki page [1]. It's very useful to read their wiki while adding things to the map!
OSM and all related projects thrive on users' contributions -- be the change you want to see in the world and start contributing today :)
[1] https://wiki.openstreetmap.org/wiki/Key:building:levels
You can tag it accordingly with this guide https://wiki.openstreetmap.org/wiki/Key:building:levels
Happy mapping!
What I find funny is that they picked tree models that have branches down to the floor. So any tree next to a road blocks at least one lane when its branches should be several feet in the air.
It was about time.
Stop what you're doing and use Cloudflare (free) immediately. This is the slowest loading site I've used in years and it deserves better for all the work you've put in.