Auteur: Theodore
Essayer en direct Description
Willow Ferry est un village d’eau du Jiangnan rendu en temps réel dans le navigateur : murs blancs et tuiles sombres, pignons en tête de cheval, devantures à treillis de bois sous des avant-toits garnis de lanternes, pont de pierre en arc enjambant le canal, barques wupeng amarrées au pied des marches et saules qui retombent sur une eau vert jade. L’écran de chargement donne le ton : « Follow the water. Come home a little late. »
Le village vit au rythme de sa propre journée — heure dorée, heure bleue, nuit de lune, aube, matin, après-midi — qui boucle en sept minutes environ, avec un soleil et une lune toujours en mouvement et des ombres qui tournent lentement à leur suite. Maintenez T pour accélérer le cours des heures, ou appuyez sur 1–5 pour passer directement à l’après-midi, à l’heure dorée, à l’heure bleue, au clair de lune ou à la pluie brumeuse. La pluie brumeuse relève de la météo plutôt que de l’heure : la choisir arrête l’horloge jusqu’à ce que vous sélectionniez une autre heure.
Les touches ←/→ font défiler six points de vue : Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist et The Slow Boat. Chacun s’accompagne d’une courte phrase, dont certaines changent selon l’heure — à l’heure dorée, Willow Bank affiche « The sun rests in the arch. » — et celle de Moon Bridge revisite le poème « Fragment » (断章) de Bian Zhilin : « You stand on the bridge to watch the view. / From a window, someone watches you. »
Faites glisser pour regarder autour de vous, faites défiler pour avancer en glissant, marchez avec WASD (Shift pour aller plus vite, Q/E pour monter et descendre) et cliquez pour faire la mise au point. Le bouton d’ouverture va de f/1,4 à f/16, et le dernier cran désactive la profondeur de champ pour que tout soit net ; la caméra a un léger balancement, comme tenue à la main (Drift), que l’on peut désactiver, et H masque l’interface. Appuyez sur « Ride the boat » et la caméra descend en douceur jusqu’à la proue tandis que la barque dérive au fil du canal : ←/→ (A/D) pour gouverner, ↑ (W) pour ramer plus fort, ↓ (S) pour ralentir, et quand vous relâchez, elle retrouve sa trajectoire. L’écart qu’elle peut prendre a été mesuré tout le long du parcours, si bien qu’elle ne heurte jamais les quais, les barques amarrées ni l’arche du pont.
Tout le village est créé par le code : les maisons, le pont de pierre en arc, les barques wupeng, les lanternes, les saules, les pêchers ainsi que les blocs et les marches des quais sont tous générés par des scripts Blender Python et exportés en GLB. Le générateur de maisons découpe les parcelles, choisit les types de maisons, règle les pignons en tête de cheval selon la hauteur et glisse entre elles de petits jardins clos de murs ; seule la maison principale, près des marches de l’embarcadère, est placée à la main. Les ciels et une partie des surfaces d’enduit, de pierre, de bois et de galets sont des ciels photographiques et des textures scannées CC0 de Poly Haven ; le reste des textures et la totalité du son proviennent également des scripts.
L’interface est uniquement en anglais, et le son démarre à votre premier clic. L’expérience est optimale dans Chrome, Edge ou Safari sur ordinateur, et bascule sur WebGL2 en l’absence de WebGPU ; la première visite télécharge un peu plus de 40 Mo, si bien que l’écran de chargement reste affiché un moment.
Fonctionnement dans le navigateur
Côté web, tout repose sur le renderer WebGPU de three.js r186, avec Vite, et les modèles sont compressés avec meshopt. À leur arrivée depuis Blender, les matériaux des modèles sont reconstruits en TSL d’après leur nom : traces de ligne d’eau, mousse, caustiques, vieillissement, balancement au vent et lueur nocturne des fenêtres et des lanternes sont tous calculés dans les shaders, et ces mêmes matériaux TSL fonctionnent aussi sous WebGL2.
L’essentiel du travail a porté sur l’eau : réflexion, réfraction, turbidité et absorption, scintillement du soleil et de la lune et chemin de lune, ronds de pluie, risées, sillage de la barque et eau repoussée par sa proue. Le ciel, une photographie de Poly Haven, passe en fondu enchaîné d’une heure à l’autre et fournit aussi la lumière ambiante ainsi que la direction du soleil et de la lune ; les ombres des nuages glissent sur le village, les collines et l’eau, des bancs de brume bas s’étendent sur le canal, et il y a des lucioles, des poussières en suspension et des traînées de pluie.
Le post-traitement ajoute le SSAO (sur la seule lumière ambiante), les bancs de brume, le bloom, la profondeur de champ, l’étalonnage et le FXAA. L’autofocus fonctionne comme celui d’un reflex numérique, en lançant un rayon depuis le centre de l’image (accéléré par three-mesh-bvh), ou bien vous pouvez cliquer pour choisir où faire la mise au point. Pour que tout reste fluide, la scène est répartie en calques : les détails fins comme les tuiles de couvert, les treillis et le laiton ne sont dessinés que dans la vue principale et disparaissent complètement au-delà de 28 mètres ; le lit du canal et les galets n’apparaissent pas dans les reflets ; et la maçonnerie et les arbres sont exclus de la pré-passe SSAO. Les ombres de la lumière principale sont redessinées quand celle-ci bouge et, sinon, une image sur cinq ; les pièces de la barque sont fusionnées par matériau au chargement, et l’herbe ainsi que les pierres des quais sont dessinées par instanciation.
Tout le son est synthétisé en direct avec Web Audio — il n’y a pas un seul fichier audio : clapotis et égouttement de l’eau (plus forts quand on s’en approche), vent dans les saules, oiseaux le jour, grillons et grenouilles la nuit, cloche lointaine d’un temple, coups de rame quand vous êtes en barque, et, en guise de musique, de rares notes pincées sur une gamme pentatonique.
