Le projet a fourmillé récemment, il est temps pour nous de vous faire un petit résumé de tout ce qu’il s’est passé ces derniers mois !

Késako

Giro3D est une librairie de visualisation 3D pour les navigateurs web, écrite en javascript et WebGL. Giro3D est basé sur THREE.js, ce qui permet de profiter de toute la puissance d’un des meilleurs moteurs 3D pour le monde web. Giro3D apporte en plus le support des formats tuilés typiques du SIG ainsi que les primitives et les concepts géographiques.

Pour le support des protocoles standards (WMS, WMTS…), il est possible d’utiliser des sources OpenLayers.

Le repo de code est ici: https://gitlab.com/giro3d/giro3d

Giro3D hérite d’iTowns, mais avec des objectifs qui divergent légèrement de cette dernière :

• développement communautaire du code
• versatilité : la librairie doit s’accomoder de divers cas d’usage de l’industrie : vue immersive dans des galeries, vue sous-marine ou environnement naturel ou urbain. Elle doit aussi s’accomoder des formats de donnée standards divers
• être performante
• l’accent est mis sur la facilité d’utilisation de l’API, qui doit rester compatible avec celle de THREE.js. Il est d’ores et déjà possible d’utiliser directement des objets ou des controls THREE.js.

Tous ces éléments permettent de garantir un usage industriel de la librairie.

Les avancées récentes

Une API plus lisible

Afin de rendre la librairie plus facile d’accès, l’API a été grandement remaniée afin d’être plus intuitive et plus facilement documentable. La page d’accueil de la documentation en donne un aperçu.

Intégration des controls THREE.js

Les controls sont les mécanismes de navigation dans la scène 3D. Giro3D permet d’enregister un control THREE.js de façon intégrée et de l’utiliser immédiatement.

Labels

Il est désormais possible d’utiliser le CSS2DRenderer directement dans Giro3D pour afficher des labels HTML en surimpression sur la scène 3D. Voir un exemple ici.

Support des « color maps »

Giro3d permet d’ajouter des color maps sur les couches images et DEM. Voir l’exemple.

Plusieurs modes sont supportés: le mode par défaut (élévation ou intensité du pixel), pente et aspect (orientation par rapport au nord). La création des palettes de couleurs peut se faire avec des librairies tierces comme chroma.js.

Ajout d’une entité « AxisGrid »

Cette entité est une grille 3D permettant de se repérer dans un dataset d’élévation. Voir l’exemple. Totalement configurable (graduations, volume, style des labels), elle supporte également 2 modes d’affichages (relatif et absolu).

Gestion des Cloud Optimized GeoTIFF (COG)

Giro3D vise un support complet des Cloud-Optimized Geotiff et plus largement du Geotiff. Il est possible:

• d’afficher des COGs comme couche raster dans Giro3D, voir cet exemple.
• utiliser des COGs comme terrain, qu’ils soient mono-bande ou RGB (en supportant plusieurs formats d’élévation), voir l’exemple niveaux de gris/élévation
• Utiliser des Geotiffs simples, par exemple organiser selon une arborescence XYZ, à la fois comme source de coloration (carte classique), ou comme source d’élévation.

Bien sûr, comme toutes les autres sources raster, les COGs supportent les colors maps.

Support du format BIL

les fichiers BIL sont maintenant supportés comme couche d’élévation ou de couleur avec une “ColorMap”. C’est un des formats possibles des webservices d’élévation de l’IGN, voir cet exemple.

Documentation

Le site web giro3d.org a été mis en place.

Ainsi qu’une documentation d’API, encore à compléter.

Et de nombreux exemples interactifs ont été rajoutés.

Nous prévoyons de transformer certains de ces exemples en vrai tutoriel.

La feuille de route

Beaucoup d’idées sont dans les cartons ! Nous décrivons ici les fonctionnalités les plus notables.

IFC

Un premier exemple chargeant un IFC est déjà disponible sur le site web. Cet exemple utilise en fait un loader THREE.js. On profite ici des capacités de cette librairie 3D.

Néanmoins, pour des fichiers volumineux, il est préférable de passer par un traitement en amont pour le convertir vers un format tuilé et optimisé. Le format idéal est le 3dtiles.

La conversion en 3dtiles n’est pas le rôle de giro3d, mais plus celui de projet comme py3dtiles par exemple.

Ceci étant dit, le support de l’i3dm (un des 4 formats possibles de tuiles embarquée dans un 3dtiles) sera nécessaire pour avoir un résultat performant, à la fois côté py3dtiles et giro3d. C’est sur cet effort que nous allons nous concentrer côté giro3d.

2d/3d features

Nous sommes en train de refondre le support des données vectoriel 2d classique (WFS, mvt…) pour proposer une intégration forte avec giro3d. Il est déjà possible de les afficher drappés sur un objet Map par exemple, cf les exemples “Native Vector data”, “Vector with openlayers” ou “Vector tiles with openlayers”, mais il reste à proposer un support complet pour les afficher en tant qu’objet 3D à part entière, supportant l’extrusion et du post-traitement par exemple.

Typescript

La base de code de giro3d commence à être conséquente. Pour des raisons de maintenance, nous réfléchissons à introduire un typage un peu plus fort pour les objets importants, ce qui permettrait de gagner en facilité de maintenance et de développement des applications utilisant giro3d.

Amélioration de rendu des nuages de point

Cela fait longtemps que des améliorations de rendu ont été implémentée:

• l’Eye-Dome Lighting (EDL)
• de l’Occlusion et de l’inpainting, permettant de reconstruire partiellement des surfaces

Voici une petite démontration de ces fonctionnalités:

On-the-fly rendering improvement in 3D web scene from Oslandia on Vimeo.

Elles sont présentes dans le PointcloudRenderer, mais ne sont pas utilisées par défaut dans giro3D. Un travail d’intégration doit être fait pour les rendre disponibles via l’API.

En vrac

D’autres fonctionnalités qui peuvent intéresser nos lecteurs:

• support du redimensionnement complet (même embarqué dans un élément non plein écran)
• Des “inspector” sont maintenant disponibles dans la plupart des exemples pour aider au développement en proposant des fonctionnalités de déboggage.

N’hésitez pas à consulter notre changelog ou notre page de release pour plus d’information !

Conclusion

Beaucoup de nouvelles choses pour ce viewer. N’hésitez pas à tester et nous faire des retours, notamment via le gestionnaire de ticket.

Le projet est open-source (license MIT) et suit une logique communautaire, n’hésitez donc pas à contribuer, notamment en ouvrant des tickets, des contribution au code ou à la documentation par exemple. La communication instantanée du projet se fait via ce channel matrix.