Makina Blog
Optimisation de tuiles de MNT RGB pour ombrage dynamique avec Mapbox GL / MapLibre GL
L’ombrage dynamique et l'élévation du terrain utilisent des tuiles raster dans un encodage spécifique. Ces tuiles ont le défaut d’être assez lourdes. Ici nous étudions une solution qui permet de réduire de 60 % ce volume.
La BD ALTI® est un Modèle Numérique de Terrain (MNT, ou DEM, Digital Elevation Model, en anglais). À 25 m, elle contient un point d’élévation du terrain sur le territoire tous les 25 m. C’est une donnée raster, c’est-à-dire qui est constituée de pixels. Chaque pixel est un carré de 25 m de côté.
Visualisation brute d’un MNT. Le dégradé de couleur du noir au blanc est lié à l'altitude.
Pour utiliser un modèle de terrain sur des cartes web nous pouvons : - Pré-calculer un ombrage du relief : c’est-à-dire rendre plus claires les faces exposées à la lumière et plus sombres celles à l’ombre. Cet ombrage est une image que nous pouvons manipuler comme pour un fond de carte raster sous forme de tuiles rasters PNG. - Calculer des tuiles vectorielles d’ombrage, qui sont une version vectorisée des tuiles précédentes. Celles-ci sont plus compactes à transférer sur le web. Un style graphique peut être appliqué coté client mais le rendu graphique du relief est moins fin. - Diffuser directement le modèle de terrain. Le calcul de l’ombrage étant réalisé coté client, notamment en Web GL, nous pouvons avec cette technique appliquer un style graphique à l’ombrage. La position de la source de lumière peut être paramétrée ou même se déplacer dynamiquement coté client : par exemple lors de la rotation de la carte ou pour faire « bouger le soleil ». Ce sont des tuiles raster d’élévation au format PNG, avec un encodage de l’altitude dit RGB (rouge, vert, bleu). - Extraire des courbes de niveau du modèle de terrain et les diffuser en tuiles vectorielles.
Ombrage de terrain pré-calculé en blanc et noir. Modèle d’élévation rendu sous forme d’ombrage stylisé. Courbe de niveau et ombrage. Ombrage vectorisé et stylisé avec une palette de couleurs.
Dans un article précédent nous avions vu comment utiliser le modèle de terrain BD ALTI® à 75 m de l’IGN pour en produire des tuiles pour les cartes en Web GL (Mapbox GL, MapLibre GL, Césium…). Depuis, l’IGN a rendu disponible presque tout son catalogue en OpenData, dont la version à 25 m de la BD ALTI® et le RGE Alti diffusé à 1 m et 5 m mais dont la précision réelle varie en fonction de la localisation.
Nous avions alors montré comment utiliser un modèle numérique de terrain pour produire des tuiles raster d’ombrages dynamique (RGB) et des tuiles vectorielles de courbe de niveau. Nous avons donc adapté le processus à la nouvelle version à 25 m. La version à 75 m permettait de produire des tuiles raster jusqu’au niveau de zoom 11, tandis que la version à 25 m permet d’aller au zoom de niveau 12.
En effet, avec une latitude de 45 ° en France métropolitaine on a : - niveau de zoom 8 : 431 m/pixel, - niveau de zoom 9 : 216 m/pixel, - niveau de zoom 10 : 108 m/pixel, - niveau de zoom 11 : 54 m/pixel, - niveau de zoom 12 : 26 m/pixel.
Pour chaque niveau de zoom supplémentaire, on double approximativement le volume des données nécessaires.
De plus, le poids total de ces tuiles rasters sont assez importantes. Plus une tuile est en terrain accidenté et plus cette tuile encodée en PNG RGB pèse lourd. Les tuiles de 300 Ko à 400 Ko sont fréquentes en zone de montagne. Ce sont des images de 512 pixels de côté.
Le niveau de zoom a aussi une importance : au zoom maximum 12, le terrain va être, de façon relative, moins accidenté qu’à des zooms plus faibles. Aux niveaux de zoom plus faible, la surface couverte pas une tuile va être plus grande, et donc plus variée.
Tuile de niveau de zoom 12, MNT encodé en PNG RGB : 310 Ko.
Tuile de niveau de zoom 8, MNT encodé en PNG RGB : 430 Ko.
Ces images ne sont pas faites pour être visualisées directement, il s'agit de la donnée encodée en RGB.
La relation entre l’altitude et la couleur de chaque point est :
altitude = -10000 + ((Rouge * 256 * 256 + Vert * 256 + Bleu) * 0.1)
La résolution verticale de ces images est donc encodée avec une résolution verticale de 10 cm. La résolution horizontale dépend bien sûr du niveau de zoom, mais également de la latitude des coordonnées de la tuile.
Tuiles RGB, un problème de taille
Le MNT encodé en RGB est celui qui offre visuellement le meilleur résultat tout en offrant le plus de possibilités coté client. En plus de l’ombrage, il permet également de faire un rendu 3D de la carte (2.5D en fait).
Déformation de la carte selon modèle de terrain et ombrage. Vue avec Mabox GL JS 2, non libre. MapLibre GL supportera bientôt cette même fonctionnalité.
Cependant ces tuiles RGB restent lourdes à charger pour le client. Une carte sur une page web de 1300x900 pixels au niveau de zoom 8 avec ombrage de terrain et en partie en zone de montage consomme 3,0 Mo de tuiles vectorielles de données cartographiques et 7,0 Mo de tuiles PNG RGB pour l’ombrage.
Carte de 1300x900 pixels représentée ici à 50 % de sa taille.
Optimiser la taille des tuiles encodées en RGB
Ce problème de volume se pose tout le temps, mais tout particulièrement si l’on veut pré-télécharger de la cartographie avec ombrage sur mobile pour l’utiliser hors ligne… ce qui justement peut être pertinent en zone de montage.
Passer au format JPEG
Le JPEG est un format de compression d’image avec perte. C’est-à-dire qu’il va ajuster le contenu de l’image de façon peu ou pas visible pour améliorer la compression. Le JPEG est adapté à la compression des photographies.
La compression est plus efficace lorsque le contenu est plus prédictible en fonction du reste de l’image. Pour faire simple, plus les couleurs des pixels varient « brusquement » plus c’est difficile à compresser. En d’autres mots, plus l’entropie est faible plus c’est facile à décrire.
L’ombrage du terrain est basé sur une différence relative de l’altitude. L’éclairage et l’ombrage dépendent du fait que le terrain monte ou descende.
La compression avec perte change la donnée et introduit des artefacts artificiels de variations du terrain. Ces artefacts, combinés au fait que la compression se fait pour la perception des couleurs à l’œil humain alors que nos images contiennent des données, disqualifient complètement l’usage du JPEG pour ce besoin.
Tuiles RGB compressées en JPEG avec une qualité de 90 sur 100. 240 Ko.
Ombrage produit par la compression JPEG.
WebP
À la place du format d’image PNG, il est également possible d’utiliser le format WebP qui peut être avec ou sans perte. Il est basé sur un algorithme plus moderne initialement imaginé pour la compression de vidéo. Il permet un meilleur taux de compression que le PNG.
Le traitement de la BD Alti 25 m sur la France en PNG RGB pour les zooms de 5 à 12 donne un total de 3,7 Go. Les mêmes tuiles mais en WebP sans perte donnent un total de 2,2 Go, ce qui représente un gain de 40 %.
Cependant, le WebP n'est pas un format encore pleinement supporté par tous les navigateurs web.
Les statistiques nous disent qu’en 2021, 5 % à 7 % des utilisateurs utilisent des navigateurs qui ne le supportent pas.
Suivant le cas d’utilisation, il peut être quand même acceptable de servir à ces utilisateurs des cartes sans ombrage au regard du gain en taille apporté par le WebP.
Optimisation tout de même des tuiles PNG
Le format d’image PNG comme le WebP sans perte ne peut pas produire des images plus petites que ce qu’il fait déjà avec son algorithme de compression.
Il existe cependant des techniques en amont pour réduire la taille des PNG, comme la « quantization ». Il s'agit de l’ajustement des couleurs des pixels pour réduire le nombre de couleur différentes et utiliser une palette de couleurs à la place d’un espace colorimétrique complet RGB (rouge, vert, bleu). La palette contient au maximum 256 couleurs (à titre d'exemple la tuile de niveau de zoom 8 ci-dessus contient initialement 14 616 couleurs différentes). Toutefois la « quantization » générique n’est pas adaptée aux données d’altimétrie encodées dans l’image. Compte tenu de la formule d’encodage en RGB de l’altimétrie, modifier la valeur du vert à 256 fois plus d’impact sur l’altitude encodée que modifier la valeur du bleu.
Tuile de niveau de zoom 8 contenant 14 616 couleurs différentes.
Problème intrinsèque à la compression de ces images
Il faut réfléchir au niveau de la nature de la donnée encodée et non pas sur les couleurs représentées dans l’image. On ne peut pas traiter les trois couleurs résultant de l’encodage de l’altimétrie de façon similaire. Le rouge à 256 fois plus de poids que le vert, qui en a lui-même 256 fois plus que le bleu. Les outils standards de traitement d’images n’ont pas connaissance de cette particularité.
Si nous regardons les différentes couleurs séparément d’une tuile de niveau 8, nous voyons clairement que le rouge ne varie pas, le vert varie peu et le bleu beaucoup.
Décomposition des niveaux de rouge, vert et bleu. À noter que le premier est bien « rouge », mais très foncé, valeur uniforme : 1 sur 255.
Nous constatons que le canal bleu est beaucoup plus bruité que les autres, en particulier pour les niveaux de zoom faibles où l’altitude varie beaucoup d’un pixel à ces voisins, presque de façon aléatoire. Si nous supprimons le canal bleu (nous ne pouvons pas vraiment le supprimer, mais y mettre la valeur 0 pour tous les pixels), alors la même image compressée en PNG ne fait plus que 91 Ko, soit 80 % de moins. Ce sont bien ces données très bruitées qui rendent l’image difficile à compresser. Plus les valeurs sont aléatoires, plus l’entropie est grande, et rendent donc la compression inefficace.
Tuile de niveau de zoom 8 contenant 0 pour la valeur du bleu. 97 Ko, soit 77 % de moins.
Tuile de niveau de zoom 12 contenant 0 pour la valeur du bleu. 41 Ko, soit 87 % de moins.
Le canal bleu a une amplitude de 256 niveaux, un niveau représente 10 cm. Nous avons donc introduit une erreur maximale de 256 * 0,1 = 25,6 m en altitude.
Par exemple : à un niveau de zoom 8, l’écart entre deux pixels est de 431 m, une marge d’erreur altimétrique à 25 m peut être acceptable.
Animation qui montre l’ombrage au zoom 8 avant et après avoir passé à 0 les valeurs stockées dans le bleu. Vous avez du mal à voir l’animation ? C’est bon signe !
La même zone avec un extrait agrandi x4 pour mieux voir ce qu’il se passe.
Les différences de valeur de l’ombrage avant et après modification.
Généralisation de la réduction de la précision de l’altitude
Nous pouvons généraliser cette idée de réduire le niveau précision de l’altitude encodée en fonction du niveau de zoom. C'est déjà ce que l'on fait habituellement pour des cartes où la précision et le niveau de détail dépendent de l’échelle de représentation.
Retirer la partie encodée sur le bleu revient en fait à arrondir l’altitude à 25 m près et à mettre à 0 les 8 derniers bits (les bits encodés dans le bleu). Nous pouvons étendre cela en faisant varier le niveau de précision sur lequel nous arrondissons l’altitude et donc le nombre de derniers bits que nous passons à 0 en fonction du niveau de zoom.
Nous avons pris le parti d’effacer les 11 derniers bits pour le niveau de zoom 5, c’est-à-dire d'arrondir à 200 m prés. Pour le zoom 12, nous effaçons les 4 derniers bits, c’est-à-dire d'arrondir à 80 cm prés. Entre les zooms 5 et 12 le nombre de bits effacés est une interpolation linéaire. À noter que le niveau de zoom 12 étant le dernier, il joue un rôle particulier. Lorsque la carte est affichée avec un niveau de zoom supérieur à 12, ce sont les tuiles de niveau de zoom 12 qui sont étirées.
Le traitement de la BD Alti 25m ne pèse plus alors 1,3 Go en PNG à la place de 3,7, c’est une réduction de la taille de 65 %, et 0,8 Go en WebP au lieu de 2,2 Go. C’est également une réduction de la taille de moins 65 %. Si nous combinons la réduction de précision et le passage à WebP nous obtenons un gain de 80 % sur le PNG.
Nous pourrions faire d’autres choix concernant le nombre de bits finaux effacées pour alléger encore plus la taille des tuiles au détriment de la qualité visuelle, ou inversement pour l’augmenter. À noter également que nous pourrions faire un choix spécifique sur la précision du dernier niveau de tuiles, ici le zoom 12, sachant que ces tuiles vont être étirées pour être affichées aux niveaux de zooms supplémentaires.
Le chargement de la même carte sur une page web ne prend plus maintenant que 4,0 Mo en PNG et 2,9 Mo de WebP à la place de 7,0 Mo (respectivement moins 42 % et moins 58 %).
Données et script de production
Les procédures complètes pour produire les tuiles pour un ombrage dynamique RGB ainsi que les tuiles vectorielles de courbes de niveau sont disponibles, de même que les résultats des traitements sur la BD ALTI® 25 m en MBTiles PNG et WebP.
Conclusion
L’approche exposée ici permet une optimisation conséquente de la taille des images pour l’ombrage dynamique et l’élévation du terrain. Le niveau de précision de l’élévation peut être ajusté pour garder l’impact visuel quasiment imperceptible. Le gain est à la fois important pour de l’affichage direct en réduisant les transferts réseau et donc l’attente de l’utilisateur. Il est également très important pour le pré-téléchargement de ces tuiles pour un usage hors ligne, réduisant le temps de téléchargement et le stockage nécessaire.
Formations associées
Formations SIG / Cartographie
Formation Tuiles vectorielles
À distance (FOAD) Du 3 au 4 juin 2025
Voir la formationFormations SIG / Cartographie
Formation QGIS
À distance (FOAD) Du 2 au 6 décembre 2024
Voir la formationFormations SIG / Cartographie
Formation Développer avec l'écosystème d'OpenStreetMap
Aucune session de formation n'est prévue pour le moment.
Pour plus d'informations, n'hésitez pas à nous contacter.
Voir la formationActualités en lien
Mini-guide à l’usage des collectivités : l’Open Data, entre nécessité et opportunité
Tout ce que vous avez toujours voulu savoir sur l’Open Data. Petit guide à destination des collectivités pour l’appréhender et se l’approprier.
Une rentrée riche autour de la donnée et des rencontres pour Makina Corpus Territoires
Chaque rentrée apporte son lot d’opportunités pour faire avancer les projets autour de la données au service des territoires. Le calendrier de Makina Corpus en la matière a été particulièrement dense en événements.
Représentation des modèles numériques de terrain sur le web : ombrage et 3D
Les Modèles Numériques de Terrain sont des données représentant la forme du terrain. Sur une carte ces données ajoutent du réalisme. Cet article parcourt les méthodes actuelles pour faire ça sur la cartographie web.