Comment nous avons projeté +90 000 observations GBIF en 3D à 60 FPS avec biosonification symphonique dans le navigateur web.

Le Verrou Technologique : Pourquoi les scènes 3D classiques s'effondrent à 5 000 entités

Dans les expositions scientifiques contemporaines, les centres de culture scientifique (CCSTI) et les muséums d'histoire naturelle, le public comme les chercheurs se heurtent à un paradoxe récurrent : la majorité des dispositifs interactifs reposent soit sur des cartes 2D austères (type Leaflet ou Mapbox), soit sur des vidéos 3D précalculées et figées ne permettant aucune exploration libre.

Lorsqu'une agence web tente d'instancier 90 000 points individuels sous Three.js via la boucle naïve :

// Ne faites JAMAIS ceci avec plus de 2 000 entités :
dataPoints.forEach(point => {
  const mesh = new THREE.Mesh(geometry, material); // 90 000 objets créés en RAM !
  mesh.position.set(point.x, point.y, point.z);
  scene.add(mesh); // 90 000 Draw Calls GPU par frame = 4 FPS et crash navigateur
});

Le résultat est immédiat :

• Explosion des Draw Calls : Le CPU passe 16 millisecondes complètes rien qu'à envoyer les commandes de rendu au processeur graphique (GPU driver overhead). Le GPU passe son temps à attendre.
• Saturation de la Garbage Collection (GC) : Des dizaines de milliers d'objets JavaScript alloués sur le tas provoquent des à-coups violents (GC pauses) toutes les 3 secondes.
• Chute dramatique du Framerate : Le framerate s'effondre entre 4 et 8 FPS, rendant l'interaction tactile désagréable et inutilisable en musée.

L'Architecture GPU : Passage à 1 seul Draw Call via InstancedBufferGeometry

Pour éliminer le goulot d'étranglement, notre architecture découple totalement la logique métier des entités de leur représentation graphique. Plutôt que de multiplier les géométries, nous utilisons une THREE.InstancedMesh alimentée par un tampon mémoire unique (ArrayBuffer typé Float32).

Chaque observation naturaliste (composée d'une latitude, d'une longitude, d'un statut taxonomique et d'une date) est compressée sous forme d'une matrice 4x4 de transformation directement envoyée en mémoire VRAM lors du préchargement.

// Allocation d'une géométrie élémentaire unique (12 triangles)
const baseGeometry = new THREE.SphereGeometry(0.012, 6, 6);
const instanceCount = 91420;

// Une seule instanciation matérielle côté GPU
const instancedMesh = new THREE.InstancedMesh(baseGeometry, customShaderMaterial, instanceCount);
const dummyMatrix = new THREE.Matrix4();
const colorBuffer = new Float32Array(instanceCount * 3);

for (let i = 0; i < instanceCount; i++) {
  // Conversion sphérique WGS84 (Lat, Lon) vers repère cartésien 3D
  const { x, y, z } = latLonToCartesian(records[i].lat, records[i].lon, EARTH_RADIUS);
  
  dummyMatrix.position.set(x, y, z);
  dummyMatrix.lookAt(0, 0, 0); // Orientation normale à la surface du globe
  instancedMesh.setMatrixAt(i, dummyMatrix);

  // Encodage spectral RGB selon la famille taxonomique (Ascomycota, Basidiomycota...)
  const color = getTaxonomicColor(records[i].taxonGroup);
  color.toArray(colorBuffer, i * 3);
}

instancedMesh.instanceMatrix.needsUpdate = true;
instancedMesh.instanceColor = new THREE.InstancedBufferAttribute(colorBuffer, 3);
scene.add(instancedMesh); // 1 SEUL DRAW CALL POUR 91 420 ENTITÉS

Le gain d'ingénierie est spectaculaire : Les 91 420 points sont rendus en un unique appel unifié au GPU (single pass). Le processeur central (CPU) ne consomme que 2 % de ses ressources pour orchestrer la scène, laissant toute la bande passante pour le raycasting tactile et la synthèse sonore.

L'Orchestre Algorithmique : Biosonification en Synthèse Additive Web Audio

La visualisation seule ne suffit pas à créer l'émotion sensorielle nécessaire à la médiation scientifique. C'est ici qu'intervient notre moteur propriétaire de biosonification symphonique.

Contrairement à un simple lecteur MP3 jouant des bruitages préenregistrés, notre moteur sonore est un synthétiseur algorithmique temps réel basé sur la Web Audio API :

• Spatialisation 3D (PannerNode) : Le son émane de la zone géographique précise qui fait face au visiteur. Si l'Afrique du Sud passe au premier plan, les harmoniques des espèces locales résonnent à droite de la table tactile.
• Mapping Fréquentiel Taxonomique : Chaque embranchement fongique ou végétal pilote un oscillateur dédié. Les spores microscopiques génèrent des sinusoïdes cristallines aiguës (1 200 à 2 400 Hz), tandis que les polypores centenaires génèrent des nappes de fréquences graves modulées par un oscillateur basse fréquence (LFO).
• Auto-Cruise Polyphonique : En l'absence d'interaction pendant 45 secondes, le système bascule automatiquement en mode veille dynamique : le globe entre en lévitation orbitale autonome, survolant les points chauds de biodiversité et générant une nappe musicale ambient générative jamais identique.

Démonstration Vidéo & Walkthrough en Conditions Réelles

Voici la démonstration enregistrée en direct à 60 images par seconde de notre moteur, intégrant à la fois la navigation spatiale sur le vivant et le plongement vectoriel à 1 408 dimensions :

Budget de Performance & Profilage GPU (Métriques Observées)

L'intérêt majeur du passage à un Draw Call unique réside dans la prévisibilité de l'empreinte mémoire et du temps de trame. Voici les ordres de grandeur relevés lors des phases de profilage sous Chrome DevTools et WebGL2 Inspector pour un volume de 91 420 instances :

Robustesse Muséographique : Watchdog 7j/7 et Mode Kiosque

Un dispositif muséographique ne tolère aucun écran bleu, aucun message d'erreur système et aucun rechargement intempestif. Pour garantir une disponibilité absolue dans les salles d'exposition, Webetech intègre nativement trois couches de résilience :

1. Watchdog WebGL Context Restored : En cas de mise en veille matérielle de l'écran ou de micro-coupure du pilote graphique, le moteur intercepte l'événement webglcontextlost et réinstancie instantanément les buffers en mémoire sans interruption visible pour le public.
2. Zero Memory Leak Architecture : Toutes les géométries, textures et oscillateurs sont réutilisés selon le pattern du Object Pooling. Aucune allocation n'est effectuée durant la boucle de rendu principale (requestAnimationFrame). La courbe d'usage mémoire reste une ligne parfaitement horizontale après 48h de fonctionnement ininterrompu.
3. Gestion Multi-Touch Native : Prise en charge des gestes de pincement (pinch-to-zoom), de rotation à deux doigts et neutralisation des raccourcis natifs du système d'exploitation hôte pour interdire toute sortie du mode plein écran.

Transposition Industrielle & Décisionnelle

Si cette monographie illustre le cas naturaliste de l'écosystème FungIA, cette brique logicielle d'ingénierie spatiale est immédiatement transposable à d'autres enjeux critiques :

• Industrie 4.0 & Smart Grids : Visualiser 100 000 capteurs IoT de réseaux électriques ou hydrauliques avec retour acoustique sur anomalie thermique.
• Épidémiologie & Urgences Sanitaires : Cartographier en direct des foyers d'intoxication comme sur notre système ATROPOS (11 751 cas analysés sur maillage Uber H3).
• Surveillance Aérospatiale & Forensic : Modéliser des constellations orbitales et des faisceaux radar comme dans notre station PANview V3.

Julien Montes

Fondateur & Lead Architect R&D • Webetech SAS (Saint-Étienne)

DU de Mycologie Médicale (Faculté de Pharmacie de Lille) • 30 ans d'ingénierie logicielle.