@giro3d/giro3d

A versatile framework to visualize geospatial data in the browser.

Examples · Documentation · Changelog · FAQ

What is Giro3D ?

Giro3D is a Web library written in TypeScript to build 2D and 3D geospatial scenes. It is powered by three.js and WebGL. It aims to support major geospatial standards and provide a rich feature set to help visualize data in a 3D environment.

Features

• 2D and 3D maps with unlimited color layers, real-time lighting and a broad range of data sources (tiled images, GeoTIFFs, static images, vector data, including Vector tiles).
• High-resolution terrain rendering with elevation querying / elevation profile
• Point clouds colored by classification, colormaps or color layer
• Create shapes and annotations, including height measurements and angular sectors.
• Easy to integrate with GUI frameworks such as Vue and React.
• Limit visibility of datasets using cross-sections
• Display 3D features with a rich style API

Supported data sources

Giro3D is powered by OpenLayers for maps, and three.js for 3D assets, and can be easily extended to support more.

Below is a non-exhaustive list of supported data sources.

Image data

• WMTS
• WMS
• TMS
• GeoTIFF, with support for Cloud Optimized GeoTIFFs (COG)
• Static images

Elevation data

• DEM/DTM/DSM through WMTS

Vector data

• Mapbox Vector Tiles
• GeoJSON
• TopoJSON
• KML
• GPS Exchange Format (GPX)

3D assets

• 3D Tiles for optimized massive 3D datasets, including point clouds
• glTF for individual models
• Potree point clouds

Getting started

💡 To test Giro3D without installing anything, check the interactive examples.

Install from the NPM package

To install with npm (recommended method):

npm install --save @giro3d/giro3d

This package contains both original sources (under src/) and slightly processed sources (dead code elimination, inlining shader code...).

If you're using a module bundler (like wepback) or plan on targeting recent enough browser, you can directly import it as such:

import Instance from '@giro3d/giro3d/core/Instance.js';

You can also import the original, untranspiled sources, by adding src after @giro3d/giro3d/ :

import Instance from '@giro3d/giro3d/src/core/Instance.js';

This will probably limit browser compatibility though, without application specific process or loader. Also, non .js files (such as .glsl files) will need to be inlined at client application level.

From a release bundle

See our release page.

With npm link

This is handy if you need to develop on Giro3D alongside your project. You need to first prepare the package folder and link from there:

npm run make-package
cd build/giro3d
npm link
# then in your project folder
npm link @giro3d/giro3d

To ease development, files can be automatically transpiled on modification with the watch script :

npm run watch

Each time a source file is modified, this script will transpile it in the build folder.

Tests

To run the test suite:

npm test

API documentation and examples

Browse the API Documentation documentation or check the examples.

Contributors and sponsors

Giro3D has received contributions and sponsoring from people and organizations listed in CONTRIBUTORS.md. If you are interested in contributing to Giro3D, please read CONTRIBUTING.md.

Support

Giro3D is the successor of iTowns, an original work from IGN and MATIS research laboratory. It has been funded through various research programs involving the French National Research Agency, Cap Digital, The Sorbonne University, Mines ParisTech, CNRS, IFSTTAR.

Giro3D is currently maintained by Oslandia.

No code with Piero

In case you don't want to code your own application, you can also use Piero, our sister project - also available on GitLab.

FAQ

Where does the name Giro3D come from ?

The name is a reference to the italian mathematician and inventor Girolamo Cardano.