OpenStreetMap 3D renderer powered by WebGL2
streets-gl
Streets GL is a real-time 3D map renderer built for visualizing OpenStreetMap data with a heavy focus on eye-candy features.
The whole project is written in Typescript. For rendering it uses a custom low-level library that wraps WebGL2 API, and for managing the rendering pipeline it uses a simple render graph (or frame graph) implementation. Geometry generation is done on the fly; supported map features include but are not limited to complex building shapes (according to the de-facto standard Simple 3D Buildings schema), roads and paths, trees, etc.
The goals of this project include providing a way to explore the feature-rich OSM database in 3D, promoting open data, and offering a way for the mapping community to easily validate the map by visual means.
https://streets.gl/#40.75740,-73.97878,45.00,0.00,2000.00
https://github.com/StrandedKitty/streets-gl
- Support for the most common OpenStreetMap features
- Configurable time of day
- Global map search powered by Nominatim
- Real-time air traffic
- Terrain with LODs
- Deferred shading with PBR
- Rich postprocessing: TAA, SSAO, depth of field, screen-space reflections, bloom
- Realistic atmosphere and aerial perspective rendering
Data sources
Currently, Streets GL uses three sources of data to render the map:
- Public Overpass API instances to query small portions of the OpenStreetMap database (specific endpoints can be configured in the settings).
- Mapbox API elevation tiles to visualize terrain height.
- Mapbox API vector tiles to access pre-sliced polygons for big features that can't be reliably queried using Overpass API (such as water bodies).
Some small areas of the map are occasionally fetched and cached by the server for a faster and more reliable access. These areas include several major well-mapped cities (NYC, Berlin, Paris, etc). This feature can be turned off in the settings in case you want to see the most recent OSM data directly from Overpass API instances.
Screenshots
