Interface Multi-vues pour la Recherche Architecturale - Projet SESAMES

Le projet de recherche ANR SESAMES (Sémantisation Et Spatialisation d'Artefacts patrimoniaux Multi-Echelles : annotation 3D, sonification et formalisation du raisonnement) est mené avec le laboratoire MAP (UMR CNRS/MC 3495), équipe MAP-GAMSAU. Il a produit un protocole de relevé combiné, appliqué à quinze chapelles rurales de la région PACA. Les données recueillies sont de trois familles : spatiales (nuages de points 3D), architecturales (typologies, rapports de proportions, matériaux, période de construction) et acoustiques (temps de réverbération, bass ratio, STI, etc.). À partir de ces données, il est difficile de comprendre chaque édifice et surtout de comparer plusieurs bâtiments. Mon stage (avril à juin 2023, en troisième année de licence informatique) consistait à implémenter une interface web multi-vues qui permette de les corréler visuellement.

Le point de départ. L'équipe avait déjà conçu une maquette avec un cahier des charges détaillé et la forme précise des objets à représenter. Ce cahier des charges comportait une part d'innovation en matière de visualisation et demandait de combiner plusieurs langages et formalismes. J'ai étudié cette maquette, puis j'ai implémenté l'interface en l'ajustant quand la faisabilité technique ou les performances l'exigeaient. J'étais le seul développeur sur cette mission : j'ai découpé le travail en étapes avec des jalons, fixé les priorités et fait régulièrement le point avec mon tuteur de stage, Jean-Yves Blaise, chargé de recherche CNRS et coordinateur scientifique de l'UMR MAP.

Ce que j'ai développé. L'interface est un portail dont chaque page est un outil de visualisation différent :

• EDP multidimensional icons : une icône par édifice, dessinée à partir de la base de données, qui résume des variables architecturales très différentes (orientation, transept, forme du chevet, matériau et forme générale, épaisseur des murs en dégradé de couleur, période de construction sur un cadran, nombre de supports et de vaisseaux, ouvertures, etc.). Les icônes sont classées selon les valeurs acoustiques.
• Star plot - Frequencies : un graphique en étoile par édifice, dont les rayons portent les sept fréquences (125 Hz à 8 kHz). Les édifices sont placés le long d'un axe selon une valeur architecturale, ce qui permet de relire l'acoustique en fonction de l'architecture.
• Star plot - Positions : le même principe pour les positions des microphones (central, droite, gauche, arrière).
• Distribution plot : les édifices sont placés sur un plan cartésien dont l'utilisateur choisit la variable de chaque axe, architecturale ou acoustique (fréquence de Schroeder, bass ratio, treble ratio, centroïde, STI). On repère ainsi des regroupements et des tendances.
• Proportion analysis : une vue synthétique des proportions intérieures, nef et chœur, avec la longueur en rectangles et la hauteur en triangles, ordonnée selon une variable acoustique.

Toutes les figures sont générées dynamiquement en SVG, sans bibliothèque externe, ce qui garde un rendu net quel que soit l'écran ou le zoom. L'utilisateur choisit les variables, filtre, survole et superpose les vues, et ces interactions sont écrites en JavaScript.

Pourquoi du SVG natif, sans bibliothèque. Le SVG est un format vectoriel : les figures gardent la même qualité quelle que soit la taille de l'écran sur lequel l'outil est affiché, ou le zoom. Le projet imposait aussi que l'outil puisse fonctionner en interne et en local, donc sans bibliothèque externe ni CDN : tout devait être hébergé avec l'application. J'ai donc écrit moi-même, en JavaScript natif, la génération dynamique de toutes les figures, plutôt que d'utiliser une bibliothèque de graphiques.

Côté serveur. PHP gère les requêtes et interroge MySQL, où les données des quinze édifices sont organisées en tables. HTML et CSS donnent une interface adaptée à différents écrans, et j'ai cherché à optimiser le code PHP et JavaScript pour que les pages se chargent vite.

Difficultés. Le plus dur a été la géométrie : pour générer automatiquement les formes des édifices, il fallait calculer des dimensions et des proportions avec des cercles, des triangles et des rectangles, et notamment la circonférence pour représenter la période de construction. Pour rendre chaque figure dynamique, quelle que soit la donnée, il fallait trouver puis appliquer des formules, parfois éloignées de mon parcours. J'ai cherché celles qui convenaient à chaque forme, puis testé les résultats pour vérifier la précision. Il fallait ensuite combiner plusieurs éléments graphiques sans que la figure devienne illisible.

Résultat. L'outil a été mis en production avant même ma soutenance et a été intégré au projet. Il est en ligne et sert aux chercheurs du laboratoire, d'où l'absence de démonstration sur demande. C'était la première fois que je manipulais du SVG : j'ai tout appris sur le projet, y compris des notions de mathématiques appliquées que je n'avais pas vues dans mon parcours, ce qui m'a permis de créer de bout en bout toutes les figures. J'en retiens aussi la conduite seul d'un développement, de la maquette à la mise en ligne, avec des données complexes.

Captures d'écran : © UMR 3495 CNRS/MC MAP, projet ANR SESAMES, tous droits réservés.

Stack : PHP, JavaScript, SVG, HTML, CSS, MySQL.