Three.js est une bibliothèque JavaScript, qui s’appuie sur Node.js, pour faire des créations graphiques en 3D sur le web.

Je suis tombé sur Three.js il y a longtemps, en lisant la newsletter Release Radar de GitHub, puis en sautant d’un repo à un autre, sans doute. Mais à l’époque, le peu de temps libre et de temps cerveau autour du doctorat ne m’a pas permis de pousser la curiosité jusqu’à tenter une première implémentation – le manque de projet également.

Si vous lisez ce blog, ou même si vous débarquez, vous aurez remarqué que je suis féru de randonnée, passionné même. C’est ainsi qu’il m’est venu à l’idée de proposer une modélisation en 3D de l’itinéraire de mes randonnées. Three.js m’est naturellement revenu en tête, et ayant plus de temps libre depuis ma soutenance, me voici lancé dans un premier projet concret avec cette bibliothèque.

Premier problème : je ne connais rien à Node. Et bien, ce sera l’occasion d’apprendre, et d’ajouter une corde à mon arc !

Après quelques minutes à configurer un dépôt local sur ma machine, et quelques tutos pour faire un projet et le compiler, me voici parti sur Three.js, à apprendre les bases de la bibliothèque. Et puis de fil en aiguille, je tombe sur le tuto ultime, qui m’a permis de faire la modélisation ci-dessous, et qui est en ligne à cette adresse.

Mon idée initiale était de récupérer les coordonnées GPS de l’ensemble d’une zone géographique, en prenant l’altitude de chaque point, puis de réaliser une translation proportionnelle verticale pour chaque point. Ainsi, chaque point d’altitude différente se retrouverait déplacé à une hauteur différente. Il suffirait ensuite de tracer une ligne rouge sur certains de ces points, ligne qui symboliserait mon itinéraire.

Deuxième problème : l’altitude n’est pas facilement récupérable. Elle n’est pas présente dans les cartes d’Open Street Map (OSM), et il faut utiliser une API spéciale de Google pour les avoir. Cette API limite grandement les appels serveur (et j’ai dépassé plusieurs fois la limite).

Troisième problème : même en ayant l’altitude (en passant par l’API de Google), la taille d’échantillon est trop faible pour avoir un rendu précis (car les appels à l’API sont limités).

Et à force de chercher, je suis tombé sur le concept de la « heightmap« , que j’avais déjà rencontré dans un autre contexte (en développement de jeux vidéo). La heightmap permet d’exprimer une échelle de valeur en niveaux de gris. Par exemple, dans le cas de l’altitude, la heightmap est la carte d’un lieu, où chaque point (chaque pixel) est exprimé par une valeur entre 0 (noir) et 255 (blanc) représentant l’altitude de ce point dans le monde réel.

On obtient ainsi une carte de l’altitude pour une zone donnée. Ayant cette carte, il suffit ensuite de faire une projection tenant compte de cette carte, et le tour est joué !

J’ai effectué encore quelques petits ajustements, notamment l’itinéraire en rouge, et quelques informations sur ce dernier, comme les deux pics de la Mortice, et les cols importants. J’ai également passé beaucoup de temps à ajuster les valeurs des gradients de couleurs, pour obtenir un dégradé doux et harmonieux, qui correspond le plus fidèlement possible aux paysages locaux.

La suite du projet est simple : pour cette randonnée-ci, ajouter des informations annexes, comme le temps de parcours, le dénivelé, la distance parcourue ainsi que des informations sur les sommets.

A terme, mon idée est de créer une carte pour chaque randonnée mémorable que je fais.