Concept
Respiration est une installation numérique contemplative qui transforme les données temps réel du réseau STIB en une sculpture lumineuse vivante. Le spectateur flotte au-dessus de Bruxelles, dans le noir absolu. Il n'y a pas de carte, pas de rues, pas de bâtiments — seulement la géométrie pure du réseau, ses lumières, ses mouvements.
Ce qu'on voit, c'est l'invisible rendu visible : la structure sous-jacente qui fait circuler 400 000 personnes par jour à travers la ville. Séparé de tout contexte géographique, le réseau révèle sa propre beauté — ses symétries, ses densités, ses rythmes.
L'œuvre fonctionne comme un aquarium urbain : elle vit seule, on la regarde. La caméra orbite lentement, le réseau respire, les véhicules pulsent. Mais si l'on touche la souris, on peut explorer librement l'espace 3D.
Les trois couches visuelles
Couche 1 Le Squelette — les tracés
Les 89 lignes STIB deviennent des fibres lumineuses suspendues dans le vide. Chaque ligne est un tube 3D (TubeGeometry) qui suit la géométrie réelle de la route. La troisième dimension sépare les types de transport en couches géologiques :
| Type | Altitude (Y) | Épaisseur | Opacité | Lignes |
|---|---|---|---|---|
| Métro | 0 (au fond) | 0.35 | 90% | 4 |
| Tram | 20 | 0.18 | 65% | 18 |
| Bus | 50 (en altitude) | 0.07 | 35% | 67 |
Vu de côté, ça forme une stratigraphie — un terrain géologique du transport. Vu du dessus, c'est la carte abstraite de Bruxelles. Vu en perspective, c'est une sculpture lumineuse flottante.
Couche 2 Le Sang — les véhicules
Des points de lumière intense glissent le long des fibres. Ce sont les ~600 véhicules STIB en circulation. Chaque point :
- Émet un halo de sa couleur de ligne (bloom post-processing)
- Laisse une traînée éphémère qui s'efface en 4 secondes (blending additif)
- Pulse quand il approche d'un arrêt — comme un battement de cœur
- Se déplace en douceur entre les mises à jour (interpolation cubique sur 2.5s)
Aux heures de pointe, les fibres sont saturées de points lumineux. La nuit, presque rien ne circule — quelques lueurs solitaires. L'œuvre montre le rythme circadien de la ville.
Couche 3 Les Synapses — les arrêts
Les ~2 500 arrêts sont des micro-sphères translucides (InstancedMesh), normalement presque invisibles. Quand un véhicule les traverse :
- Flash bref : la sphère gonfle et brille pendant 800ms
- Décroissance quadratique : le flash s'estompe naturellement
Les hubs majeurs (De Brouckère, Gare du Midi, Simonis, Arts-Loi…) sont des nœuds plus gros, en activité quasi permanente — les ganglions du réseau nerveux.
Système d'animation — les 4 rythmes
La pièce superpose plusieurs temporalités, comme un organisme vivant a un pouls, une respiration et des cycles circadiens simultanés.
easeInOutCubic sur 2.5 secondes.La Caméra — le regard
Mode contemplatif (par défaut)
La caméra suit une orbite elliptique lente autour du réseau — rotation complète en ~3 minutes. Le mouvement est assez lent pour être subliminal. Simultanément :
- Respiration verticale : monte et descend sur l'axe Y (cycle de 50s, amplitude ±35 unités)
- Zoom pulsé : micro-variation du champ de vision (±1°, cycle 8s)
Mode exploration (interaction)
Dès que l'utilisateur touche la souris ou le trackpad, l'orbite automatique s'arrête et OrbitControls prend le relais. Après 8 secondes d'inactivité, la caméra reprend son orbite en douceur (transition lerpée sur ~3 secondes).
Effets visuels
Bloom (UnrealBloomPass)
L'effet le plus important. Tout objet lumineux « bave » dans l'espace environnant, transformant des géométries simples en fibres optiques et étoiles. Paramètres : strength 1.5, radius 0.4, threshold 0.15.
Brume exponentielle
Un FogExp2 noir-bleuté (#000005) fait disparaître progressivement les éléments lointains. Ça évite l'effet « boîte » et crée un espace qui semble infini.
Blending additif (traînées)
Les traînées de véhicules utilisent le AdditiveBlending : quand deux traînées se croisent, leurs couleurs s'additionnent optiquement (rouge + bleu = magenta lumineux). Les traînées n'ajoutent que de la lumière, sans masquer ce qui est derrière.
Tone mapping ACES Filmic
Le tone mapping cinématographique compresse les hautes lumières naturellement, évitant les blancs brûlés et donnant un rendu organique aux zones les plus brillantes.
Les données
L'œuvre se nourrit de données ouvertes fournies par la STIB (Société des Transports Intercommunaux de Bruxelles) via leur API Open Data v2.1.
| Donnée | Source | Quantité | Refresh |
|---|---|---|---|
| Tracés de lignes | routes.json | 89 lignes (~2.5 MB de géométrie) | Au démarrage |
| Arrêts | stops.json | 2 960 arrêts avec GPS | Au démarrage |
| Couleurs officielles | line-colors.json | 86 lignes | Au démarrage |
| Positions véhicules | vehicles.json | ~591 véhicules en circulation | Toutes les 7 secondes |
Projection GPS → 3D
Les coordonnées GPS bruxelloises (latitude ~50.85°N, longitude ~4.39°E) sont projetées dans un espace 3D centré sur l'origine :
x = (longitude - 4.388) × 1200
z = -(latitude - 50.846) × 1200
y = altitude selon le type de transportLe facteur d'échelle (1200) est calibré pour que le réseau tienne dans un espace d'environ 200 × 80 × 200 unités Three.js.
Pipeline technique
Architecture des modules
Les moments
Ce qui transforme une visualisation en œuvre d'art, ce sont les moments — les instants où la pièce surprend.
L'Aube
Les premières lignes de métro s'allument. Les fibres dorées émettent leurs premiers véhicules. Puis les trams se réveillent. Puis les bus. En 30 minutes, le réseau passe du noir quasi total à un organisme illuminé.
L'Heure de pointe
La densité de véhicules explose. Les fibres sont saturées de points lumineux, les nœuds clignotent sans arrêt, les traînées se chevauchent. Le réseau devient incandescent.
La Synapse en cascade
Quand un véhicule passe rapidement par plusieurs arrêts consécutifs, les nœuds s'allument en séquence — comme un influx nerveux qui traverse une chaîne de neurones.
Le Croisement
Quand deux véhicules de lignes différentes se croisent au même nœud, leurs halos se mêlent brièvement. Le blending additif mélange leurs couleurs en un flash plus lumineux.
L'Extinction
Les derniers véhicules disparaissent un par un. Les fibres deviennent sombres. Seules les lignes Noctis émettent encore quelques lueurs solitaires — les derniers signaux d'un organisme qui s'endort.
Optimisations de performance
| Technique | Gain |
|---|---|
InstancedMesh pour arrêts (2960) | 1 draw call au lieu de 2960 |
InstancedMesh pour véhicules (~600) | 1 draw call au lieu de ~600 |
Un seul LineSegments pour toutes les traînées | 1 draw call pour ~4800 segments |
| Downsampling des coordonnées de routes | 200-500 points par ligne au lieu de milliers |
| Segments radiaux réduits (3-5) sur les tubes | Moins de polygones sans perte visible |
DynamicDrawUsage sur les matrices d'instance | GPU optimisé pour les mises à jour fréquentes |
| Delta time cappé à 100ms | Pas de sauts après une tab inactive |
Palette de couleurs STIB
Les couleurs sont les couleurs officielles du réseau STIB. Quelques exemples :
Stack technique
| Technologie | Rôle |
|---|---|
| Three.js r162 | Moteur 3D WebGL |
| ES Module importmap | Chargement natif sans bundler |
| UnrealBloomPass | Post-processing bloom |
| OrbitControls | Navigation manuelle |
| STIB Open Data API | Données temps réel |
| PHP (fetch-vehicles.php) | Daemon de cache des positions |
Crédits
Données : STIB-MIVB Open Data — données ouvertes sous licence Open Data.
Moteur 3D : Three.js par Ricardo Cabello (Mr.doob) et contributeurs.
Concept et réalisation : STIB Data Art.