Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/StrandedKitty/streets-gl

🗺 OpenStreetMap 3D renderer powered by WebGL2
https://github.com/StrandedKitty/streets-gl

3d data-visualization map mapping maps openstreetmap rendering webgl webgl2

Last synced: 2 months ago
JSON representation

🗺 OpenStreetMap 3D renderer powered by WebGL2

Lists

README 

        
![cityscape banner](https://user-images.githubusercontent.com/48140945/235281559-9a78fdbb-7b22-4c2d-8d74-dddaf5eaece6.png)





    
Streets GL


    

    Discord

    License







**Streets GL** is a real-time 3D map renderer built for visualizing [OpenStreetMap](https://www.openstreetmap.org/) 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](https://wiki.openstreetmap.org/wiki/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.





Visit streets.gl




## ⭐ 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



## 🖼️ Screenshots



        



## 💻 Minimum requirements



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.



## 🗂️ Data sources



Streets GL uses two sources of data to render the map:



- Vector tiles generated from OpenStreetMap data using [modified Planetiler](https://github.com/strandedkitty/planetiler).

- [Terrain 3D](https://www.arcgis.com/home/item.html?id=7029fb60158543ad845c7e1527af11e4) tileset by Esri to visualize terrain elevation.



Vector tiles are generated from the latest OSM data pulled from [Planet.osm](https://planet.openstreetmap.org/) or its mirrors. Water bodies formed by coastlines are filled using Shapefiles from [osmdata.openstreetmap.de](https://osmdata.openstreetmap.de/data/water-polygons.html). 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](https://tiles.streets.gl/).



## 📦 Modules



This repository includes several separable modules without any external dependencies that can be used in other projects with minimal modifications.



- [renderer](src/lib/renderer) — a simple WebGL2 renderer built from scratch (WebGPU support is also planned but hasn't been implemented yet).

- [render-graph](src/lib/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](src/lib/math) — math utilities.

- [core](src/lib/core) — includes scene graph and some basic classes that describe a 3D scene. Depends on `math`.

- [bmfont](src/lib/bmfont) — a bitmap text geometry generator optimized for large bitmaps and real-time use.



## 💡 Contributing



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](CONTRIBUTING.md).



### Development



1. Clone this repository

2. Install dependencies with `npm i`

3. Run `npm run dev` to start a local development server



Known to work with Node.js 14.19.1.



## ⭐ Sponsors



- **[ONEGEO](https://onegeo.co/)**