Bluestone Lane

Description

Bluestone Lane est une œuvre en temps réel de trois à quatre minutes qui tourne dans le navigateur. Le crépuscule tombe sur une vieille rue en attente de démolition : en face, tous les rideaux de fer sont baissés, les murs portent le caractère 拆 (« démolir ») peint dans des cercles, et un immeuble est déjà à moitié abattu. Un seul rideau est encore à demi levé — celui d’un petit atelier de réparation d’électroménager, où le robot qu’un vieux réparateur a assemblé avec un boîtier de radio, un objectif d’appareil photo et des tuyaux de plomberie est toujours assis sur un tabouret, à côté de l’établi.

Cliquez pour commencer : la caméra entre depuis la rue et fait le tour du robot pour se placer face à lui. Restez appuyé sur le bouton gauche de la souris ou sur la barre d’espace pour ouvrir le diaphragme de son objectif — la première tentative échoue toujours : relâchez et recommencez. Sans relâcher, déplacez la souris : sa tête suit le mouvement, et partout où tombe sa lumière, le passé revient.

Le premier acte se déroule dans l’atelier. Hors du faisceau, c’est le présent : tout est poussiéreux et terni, des toiles d’araignée couvrent les étagères, des écailles de plâtre et des éclats de verre jonchent le sol, et la télévision posée sur le carton, l’horloge murale, le ventilateur de table et la radio à lampes sont tous hors d’usage. Là où tombe la lumière, les choses sont telles qu’elles étaient : la télévision diffuse ses programmes, la radio, cadran allumé, joue un air, et le balancier de l’horloge oscille.

Au bout d’un moment, le même air parvient faiblement de l’autre côté de la rue. Le robot tourne la tête pour l’écouter tandis que la vue recule jusqu’au pas de la porte ; sa lumière vacille, des parasites s’insinuent dans la chanson, l’image ne cesse de perdre sa synchronisation, et sur une dernière déchirure, on bascule dans le second acte.

Le second acte se déroule dans la rue. Dès que le faisceau se pose sur l’une des cinq boutiques d’en face, celle-ci retrouve un soir du milieu des années 1990 — lumières allumées à l’intérieur, linge aux balcons, voisins assis sur de petits tabourets devant la porte — et l’on entend les sons de cette boutique. Les boutiques déjà trouvées restent éclairées ; les autres vous appellent de leurs enseignes et de leurs sons. L’énergie baisse à mesure que vous regardez. Le dernier regard du robot revient sur la boutique d’électronique d’où vient l’air, et toute la rue s’illumine un instant ; puis l’énergie s’épuise, le faisceau hoquette et s’éteint, la chanson s’interrompt en pleine phrase, et la rue redevient ce qu’elle est aujourd’hui. Le dernier plan regarde au-dehors depuis l’intérieur de l’atelier : le robot fait toujours face à la rue plongée dans le noir, une lampe s’allume en face, et la dernière phrase dit : « Il se souvient de la rue aux lumières allumées. »

Après le carton de fin, cliquez pour revoir l’œuvre. L’interface est en anglais par défaut, avec un lien sur l’écran titre pour passer au chinois ; sur téléphone, maintenez le doigt sur l’écran et faites-le glisser. Un casque est recommandé, de même qu’un navigateur compatible WebGPU, comme une version récente de Chrome ou d’Edge ; les navigateurs sans WebGPU basculent automatiquement sur WebGL2. Le premier chargement prend un moment, le temps de télécharger les modèles et de précompiler les shaders.

Comment Tripo a été utilisé

Tripo a généré plus de vingt objets de l’atelier de réparation : le robot, deux radios à lampes (l’une ouverte pour réparation, l’autre fermée), deux téléviseurs à tube cathodique, un ventilateur de table, une horloge murale, un réveil, un magnétophone à cassettes, une lampe de bureau, un fer à souder, une loupe, une boîte à outils, un casier à pièces détachées, l’établi, un vélo roadster de 28 pouces, un thermos, une tasse émaillée, ainsi que le bras, la jambe et le torse de rechange — auxquels s’ajoutent quatre versions abîmées réalisées tout exprès. Les murs et le sol de la pièce, les étagères et les cartons qui y sont posés, les câbles, le mur à outils et les menus objets posés sur l’établi sont de la géométrie construite en code ; la rangée de boutiques d’en face se compose de deux photographies générées (« aujourd’hui » et « autrefois »), et non de modèles.

• De la référence au modèle : chaque objet part d’un rendu produit sur fond uni gris clair, qui est ensuite confié à Tripo. Avant la modélisation, trois approches ont été comparées sur la radio ouverte — l’image-to-3D direct, le passage de l’image à la multivue puis à la 3D, et la conversion en 3D d’une planche de quatre vues assemblée à la main — et la plupart des modèles ont suivi la voie image → multivue → 3D, avec géométrie et textures détaillées, maps PBR, et l’éclairage précalculé retiré des textures, pour que ce soient la lampe de bureau, le crépuscule au-dehors et le faisceau du robot qui éclairent la scène.
• Le robot : Tripo l’a livré en un seul maillage — tête, corps et tabouret fusionnés. Plutôt que de couper la tête, l’auteur lui a donné un « cou souple » dans le vertex shader : un poids calculé à partir de la position vaut 1 dans la tête (le boîtier de radio), 0 dans le corps et les épaules, et varie progressivement le long du cou et des câbles qui l’entourent ; ainsi, quand la tête tourne, chaque sommet pivote autour du cou selon sa part de l’angle. Rien n’est coupé, donc aucune jointure ne peut s’ouvrir, et les câbles s’enroulent autour du cou à mesure que la tête tourne. Le tabouret a été séparé à l’aide d’un script Blender, si bien qu’au second acte le robot tout entier pivote dessus pour faire face à la rue. L’emblème chromé « 上海 » (Shanghai) sur son visage et la plaque « 人民电器 » (Appareils électriques du peuple) sur sa poitrine font partie de la géométrie du modèle lui-même, et c’est du même design que sont issus le bras, la jambe et le torse de rechange suspendus aux crochets du mur et appuyés contre l’établi.
• Versions abîmées : pour que le présent hors du faisceau et le passé à l’intérieur concordent, la télévision posée sur le carton, l’horloge murale, le ventilateur de table et la radio à lampes ont chacun reçu une seconde version, délabrée — l’image de référence a été retouchée pour paraître endommagée, puis modélisée avec les mêmes réglages Tripo. Les deux versions occupent le même emplacement : les pixels touchés par le faisceau affichent la version intacte, les autres la version abîmée.
• Maillages bruts sur le web : chaque modèle brut issu de Tripo compte environ 1,9 million de triangles, avec des textures 4K (8K pour le robot). Plutôt que de les décimer dans Blender — ce qui déchire les coutures de texture et laisse des fissures blanches visibles de près —, l’auteur les a simplifiés avec meshopt en préservant les coutures, en plusieurs niveaux de détail, chacun assorti de son erreur mesurée. À l’exécution, chaque objet n’affiche que le niveau dont l’erreur reste inférieure à un pixel d’écran et dont la texture n’est pas plus grossière que l’écran : des niveaux simplifiés au loin, plus fins à mesure qu’on s’approche. Sur le site en ligne, le niveau le plus fin ne s’écarte du maillage brut que d’une fraction de millimètre. Les niveaux les plus grossiers se chargent en premier et les autres arrivent en streaming selon les besoins, puis sont de nouveau libérés quand la mémoire vidéo dépasse son budget.
• Visionneuse de modèles : ajoutez ?review à l’adresse pour passer en mode inspection, avec un éclairage d’inspection vif ; faites glisser pour orbiter, faites défiler pour zoomer et appuyez sur 1–8 pour des vues prédéfinies. Double-cliquez sur n’importe quel modèle : la caméra glisse jusqu’à lui, et son nom ainsi que le nombre de triangles de son modèle Tripo brut s’affichent en bas à gauche.

Fonctionnement dans le navigateur

Pas de moteur de jeu : l’œuvre repose directement sur le renderer WebGPU de three.js, avec Vite, et les navigateurs sans WebGPU basculent automatiquement sur WebGL2.

Le passé est calculé pixel par pixel. L’œil du robot projette un cône de lumière, et chaque pixel est testé par rapport à ce cône au moment de son rendu : dans le cône, on obtient les modèles intacts, les téléviseurs allumés et un étalonnage plus chaud ; hors du cône, le présent poussiéreux et terni — et c’est selon ce même masque que s’échangent les versions abîmées et intactes. Les deux photographies d’en face basculent de la même façon entre aujourd’hui et autrefois, et la vitrine de la boutique d’électronique est une vraie petite boutique en 3D, dont les téléviseurs diffusent eux aussi des programmes.

L’œuvre s’ouvre vite et tourne sans à-coups grâce à trois choses. Tous les shaders se compilent de façon asynchrone et en parallèle, et un objet dont le shader n’est pas encore prêt est simplement ignoré pour cette image au lieu de la retarder. L’écran de chargement dessine chaque objet une fois dans chaque passe (pré-passe de profondeur, passe principale et chaque shadow map), si bien qu’une fois que vous avez cliqué pour commencer, plus rien ne se compile en cours de récit. Enfin, le rendu est plafonné à environ 2,1 millions de pixels (à peu près du 1080p), et la résolution baisse automatiquement quand le temps de calcul des images s’allonge. Quand un modèle change de niveau, les deux niveaux sont dessinés en même temps sur des ensembles complémentaires de pixels aléatoires et se fondent l’un dans l’autre en 0,35 seconde, lissés par l’anticrénelage temporel, de sorte que rien ne « saute » de près. Ajoutez ?q=low pour un mode basse qualité (sans occlusion ambiante ni réflexions en espace écran, avec des shadow maps réduites de moitié).

Le son superpose des enregistrements de terrain CC0 et de la synthèse Web Audio : la rue au crépuscule au-dehors, le bourdonnement du néon et le ronflement du secteur, le tic-tac du balancier, une tonalité de mire de télévision, les servomoteurs du robot et le bruit de son œil qui s’ouvre — et l’air de la radio est une mélodie pentatonique originale. Au second acte, chaque boutique d’en face a sa propre ambiance sonore.

En chemin, l’auteur a aussi corrigé un bug du renderer WebGPU de three.js r186 : quand deux modèles ne diffèrent que par la façon dont leurs normales sont stockées (Int8 contre Int16), le renderer leur fait partager un même pipeline, si bien que celui qui est dessiné en second lit ses sommets dans le mauvais format et que sa surface s’éclaire en un fouillis façon camouflage. WebGL2 n’est pas concerné.