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.
Warning: This project is still in early development, expect bugs and missing features.
- 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
To run this application, you need a machine that supports WebGL2. It's recommended to use an up-to-date version of Google Chrome. Additionally, for a smooth experience, you will likely need a modern discrete GPU.
Streets GL uses two sources of data to render the map:
- Vector tiles generated from OpenStreetMap data using modified Planetiler.
- Terrain 3D tileset by Esri to visualize terrain elevation.
Vector tiles are generated from the latest OSM data pulled from Planet.osm or its mirrors. Water bodies formed by coastlines are filled using Shapefiles from osmdata.openstreetmap.de. Currently, there's no automated pipeline to update the vector tiles, so they are updated manually 2-4 times a month.
Map tiles are served from a small Node.js server located at tiles.streets.gl.
This repository includes several separable modules without any external dependencies that can be used in other projects with minimal modifications.
- renderer — a simple WebGL2 renderer built from scratch (WebGPU support is also planned but hasn't been implemented yet).
- render-graph — a minimal render graph (a.k.a. frame graph) implementation for easier rendering pipeline management. It automatically reorders render passes each frame, taking into account their dependencies, and culls out render passes that don't contribute to the final image. It also does basic memory management for framebuffers.
- math — math utilities.
- core — includes scene graph and some basic classes that describe a 3D scene. Depends on
math. - bmfont — a bitmap text geometry generator optimized for large bitmaps and real-time use.
Please report any bugs you find by opening a new issue (but first make sure it hasn't been reported yet). Suggestions and pull requests are also welcome.
If you want to make a significant change, please open an issue first to discuss it.
More information about contributing can be found in CONTRIBUTING.md.
- Clone this repository
- Install dependencies with
npm i - Run
npm run devto start a local development server
Known to work with Node.js 14.19.1.