Canvas, scène et caméra : ce que vous branchez concrètement

Tout commence par un canvas

Le moteur reçoit un élément canvas dans sa configuration et dessine dedans. Le contrat s’arrête là.

Le moteur ne dépend d’aucun framework d’interface. Ni Vue, ni React, ni Svelte, nulle part dans la source du moteur. Un binding Vue 3 est livré parce que c’est ce que nous utilisons nous-mêmes ; brancher le même objet de configuration depuis React, Svelte ou du JavaScript pur est un travail ordinaire, pas un problème de compatibilité.

La caméra se remplace

Le contrôleur par défaut permet de se déplacer, pivoter, incliner et zoomer du niveau de la rue jusqu’à l’orbite, et c’est une classe que vous pouvez dériver. Remplacez-la par une vue subjective, un survol de drone, un poste de conduite : même scène, autre façon de naviguer.

La position de la caméra est aussi dans l’URL : un point de vue devient un lien. Mettez-y un lieu et un zoom, et la carte s’ouvre à cet endroit.

Vos objets prennent place dans le monde

Déposez vos propres objets 3D dans la scène : ils sont dessinés au milieu de la géométrie du monde, éclairés par le même soleil, masqués par les mêmes bâtiments, et ils reçoivent les mêmes ombres en cascade que le reste de la scène. Ce n’est pas un calque flottant au-dessus d’une image de carte.

Votre palette, en une étape de configuration

Tout le rendu peut être aligné sur les couleurs de votre marque par l’étage d’étalonnage, depuis un seul objet de configuration.

Rien n’est précalculé dans une texture, donc la palette tient à toutes les distances au lieu de retomber sur des couleurs par défaut quand la caméra recule. Et si cette configuration ne suffit pas, les blocs de shader se remplacent un par un, la chaîne de post-effets est composable, et rien n’y est verrouillé.

Ancrer vos propres données dans le monde

La caméra et la projection appartiennent au moteur : lui seul sait où une coordonnée tombe à l’écran sur l’image en cours.

Le moteur vous donne cette correspondance à chaque image, synchronisée avec le rendu. Vous fournissez des points, depuis votre propre base, un géocodeur, un agent, n’importe quoi qui renvoie des coordonnées, et vous récupérez les positions à l’écran où poser vos infobulles, vos badges et vos tableaux de bord. Ils suivent la caméra quand l’utilisateur se déplace.

Ce qui sort du navigateur

Vos données restent dans la page. Une seule chose quitte le navigateur : une requête de tuiles, qui dit quelle région du monde la caméra regarde. Le serveur renvoie cette région.

Voilà la frontière, et elle est détaillée requête par requête dans ce que CityMap3D envoie, et ce qui reste chez vous. Ce qu’il y a dans une tuile, et pourquoi c’est de la géométrie plutôt qu’une image, est traité dans de la donnée OpenStreetMap au pixel à l’écran.

Le moyen le plus rapide de vous faire un avis

La démo fait tourner exactement ce moteur, sur la vraie planète, sans compte à créer. Ouvrez-la, allez sur une ville que vous connaissez, changez l’heure pour déplacer le soleil, et jugez par vous-même.