WebGL et Cartographie 3D : Visualiser le Terrain en 3 Dimensions

La cartographie 3D web a longtemps été un domaine réservé aux applications lourdes nécessitant des plugins spécifiques. Avec l'avènement de WebGL (Web Graphics Library), il est désormais possible de créer des visualisations 3D immersives directement dans le navigateur, sans aucune installation. MapLibre GL JS, CesiumJS et Three.js permettent de visualiser le terrain en relief, d'extruder des bâtiments, et de créer des expériences cartographiques véritablement tridimensionnelles. Chez MapWay, nous explorons ces technologies pour offrir des visualisations innovantes de la géographie tunisienne.

WebGL : la 3D dans le navigateur

WebGL est une API JavaScript qui permet d'accéder au GPU (processeur graphique) depuis le navigateur web. Basée sur OpenGL ES 2.0, elle offre un rendu 2D et 3D accéléré matériellement, capable d'afficher des millions de polygones avec des textures et des effets d'éclairage en temps réel.

WebGL 2.0, supporté par tous les navigateurs modernes, apporte des fonctionnalités supplémentaires : textures 3D, rendering instancié (pour dessiner des milliers d'objets similaires efficacement), et transform feedback (pour les calculs GPU). Ces capacités sont essentielles pour le rendu cartographique haute performance.

Terrain 3D avec MapLibre

MapLibre GL JS intègre nativement le rendu de terrain 3D. En ajoutant une source de données d'élévation (DEM - Digital Elevation Model), la carte peut afficher le relief avec un réalisme saisissant :

map.on('load', () => {
  map.addSource('terrain-dem', {
    type: 'raster-dem',
    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
    tileSize: 256
  });

  map.setTerrain({
    source: 'terrain-dem',
    exaggeration: 1.5
  });

  // Ajouter l'éclairage de collines
  map.addLayer({
    id: 'hillshading',
    source: 'terrain-dem',
    type: 'hillshade',
    paint: {
      'hillshade-shadow-color': '#473B24',
      'hillshade-illumination-anchor': 'map'
    }
  });
});

Cette technique est particulièrement spectaculaire pour visualiser les reliefs tunisiens : la chaîne de la Dorsale, le Jebel Châambi (point culminant à 1544 m), les canyons de Tamerza, ou les ondulations des dunes du Grand Erg Oriental.

Bâtiments en 3D

L'extrusion de bâtiments transforme les empreintes au sol 2D en volumes 3D, donnant une représentation visuelle des villes beaucoup plus intuitive. Avec MapLibre, l'extrusion est pilotée par les attributs des données :

map.addLayer({
  id: 'buildings-3d',
  source: 'openmaptiles',
  'source-layer': 'building',
  type: 'fill-extrusion',
  paint: {
    'fill-extrusion-color': '#aaa',
    'fill-extrusion-height': ['get', 'render_height'],
    'fill-extrusion-base': ['get', 'render_min_height'],
    'fill-extrusion-opacity': 0.7
  }
});

CesiumJS : le globe virtuel

Pour des applications nécessitant un globe terrestre complet en 3D, CesiumJS est la référence open source. Il supporte nativement les modèles 3D (glTF/3D Tiles), le terrain haute résolution, l'imagerie satellite multi-résolution, et les trajectoires temporelles. C'est l'outil idéal pour visualiser des données sur de grandes étendues géographiques avec une perspective réaliste.

CesiumJS est particulièrement adapté aux applications de surveillance (suivi de drones, trajectoires aériennes), de simulation (propagation d'ondes radio, études d'ensoleillement) et de visualisation scientifique (données climatiques, modèles océanographiques).

Three.js pour les visualisations personnalisées

Three.js est la bibliothèque WebGL généraliste la plus populaire. Bien qu'elle ne soit pas spécialisée en cartographie, elle offre une flexibilité totale pour créer des visualisations 3D sur mesure : visualisation de données géographiques en barres 3D, animation de flux de déplacement, ou même intégration de modèles 3D architecturaux dans un contexte cartographique. Combinée avec MapLibre via la Custom Layer API, Three.js permet d'ajouter des objets 3D personnalisés directement sur la carte.

Performance et optimisation

Le rendu 3D est gourmand en ressources. Pour maintenir des performances fluides :

• Level of Detail (LOD) : affichez des modèles simplifiés pour les objets éloignés et détaillés pour les objets proches.
• Frustum culling : ne dessinez que les objets visibles dans le champ de vision de la caméra.
• Instanced rendering : pour des milliers d'objets similaires (arbres, lampadaires), utilisez le rendu instancié plutôt que des draw calls individuels.
• Compression des textures : utilisez des formats de texture compressés (Basis Universal) pour réduire l'empreinte mémoire GPU.

Applications chez MapWay

Chez MapWay, nous utilisons les capacités 3D de WebGL pour enrichir nos visualisations cartographiques. Les cartes de terrain de TMaps exploitent le DEM pour afficher le relief tunisien, les projets d'urbanisme bénéficient de la visualisation 3D des bâtiments, et nous travaillons sur des expériences immersives pour le tourisme tunisien permettant de survoler virtuellement les sites historiques et les paysages naturels du pays.