Autor: Theodore
Pruébalo en vivo Descripción
Willow Ferry es un pueblo acuático de Jiangnan renderizado en tiempo real en el navegador: muros blancos y tejas oscuras, hastiales de cabeza de caballo, fachadas de tiendas con celosías bajo aleros de los que cuelgan faroles, un puente de arco de piedra sobre el canal, barcas wupeng amarradas junto a las escalinatas y sauces que caen sobre el agua verde jade. La pantalla de carga marca el tono: «Follow the water. Come home a little late.»
El pueblo vive su propio día —hora dorada, hora azul, noche de luna, amanecer, mañana, tarde—, que completa una vuelta en unos siete minutos, con el sol y la luna siempre en movimiento y las sombras girando lentamente tras ellos. Mantén pulsada la T para que las horas pasen más deprisa, o pulsa 1–5 para saltar directamente a la tarde, la hora dorada, la hora azul, la luz de luna o la lluvia brumosa. La lluvia brumosa es un fenómeno meteorológico, no una hora: al elegirla, el reloj se detiene hasta que eliges otra hora.
Las teclas ←/→ recorren seis puntos de vista: Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist y The Slow Boat. Cada uno va acompañado de una frase breve, que en algunos casos cambia con la hora —en la hora dorada, la de Willow Bank dice «The sun rests in the arch.»—, y la de Moon Bridge reinterpreta el poema «Fragmento» (断章), de Bian Zhilin: «You stand on the bridge to watch the view. / From a window, someone watches you.»
Arrastra para mirar a tu alrededor, usa la rueda para deslizarte hacia delante, camina con WASD (Shift para ir más rápido, Q/E para subir y bajar) y haz clic para enfocar. El botón de apertura va de f/1.4 a f/16, y el último paso desactiva la profundidad de campo para que todo quede nítido; la cámara tiene un suave balanceo, como de cámara en mano (Drift), que se puede desactivar, y la H oculta la interfaz. Pulsa «Ride the boat» y la cámara desciende deslizándose hasta la proa mientras la barca se deja llevar por el canal: con ←/→ (A/D) se gira, con ↑ (W) se rema más fuerte, con ↓ (S) se afloja y, al soltar, la barca recupera su rumbo. El margen que tiene para desviarse se midió a lo largo de la ruta, así que nunca choca con los muros del canal, las barcas amarradas ni el arco del puente.
Todo el pueblo está hecho con código: las casas, el puente de arco de piedra, las barcas wupeng, los faroles, los sauces, los melocotoneros y los sillares y escalones de los muros del canal se generan todos con scripts de Blender Python y se exportan como GLB. El generador de casas traza las parcelas, elige los tipos de casa, dispone los hastiales de cabeza de caballo según la altura de cada casa e intercala pequeños jardines tapiados; solo la casa protagonista, junto a las escalinatas del embarcadero, se coloca a mano. Los cielos y parte de las superficies de revoque, piedra, madera y guijarros son cielos fotográficos y texturas escaneadas CC0 de Poly Haven; todas las demás texturas, y todo el sonido, salen también de los scripts.
La interfaz está solo en inglés, y el sonido empieza con tu primer clic. Funciona mejor en Chrome, Edge o Safari de escritorio, y pasa a WebGL2 cuando falta WebGPU; la primera visita descarga algo más de 40 MB, así que la pantalla de carga se mantiene unos instantes.
Cómo funciona en el navegador
La parte web está construida sobre el renderizador WebGPU de three.js r186 con Vite, y los modelos están comprimidos con meshopt. A medida que los modelos llegan de Blender, sus materiales se reconstruyen por nombre en TSL: las manchas de la línea del agua, el musgo, las cáusticas, el desgaste de la intemperie, el balanceo con el viento y el resplandor nocturno de ventanas y faroles se calculan en shaders, y los mismos materiales TSL funcionan también con WebGL2.
La mayor parte del trabajo se dedicó al agua: reflejos, refracción, turbidez y absorción, destellos del sol y de la luna y el sendero de luz lunar, ondas de lluvia, manchas de viento, la estela de la barca y el agua que aparta su proa. El cielo es un cielo fotográfico de Poly Haven que pasa de una hora a otra con un fundido cruzado y que también aporta la luz ambiental y la dirección del sol y de la luna; las sombras de las nubes se deslizan sobre el pueblo, las colinas y el agua, sobre el canal se tienden bancos bajos de niebla, y hay luciérnagas, motas flotantes e hilos de lluvia.
El postprocesado añade SSAO (solo sobre la luz ambiental), los bancos de niebla, bloom, profundidad de campo, gradación de color y FXAA. El autoenfoque funciona como el de una réflex digital, lanzando un rayo desde el centro del encuadre (acelerado con three-mesh-bvh), aunque también puedes hacer clic para elegir el punto de enfoque. Para que todo vaya rápido, la escena se divide en capas: los detalles finos, como las tejas de cobija, las celosías y los elementos de latón, solo se dibujan en la vista principal y se ocultan por completo más allá de 28 metros; el lecho del canal y los guijarros quedan fuera de los reflejos, y la cantería y los árboles se excluyen de la prepasada de SSAO. Las sombras de la luz principal se redibujan cuando la luz se mueve y, si no, cada cinco fotogramas; las piezas de la barca se fusionan por material al cargarse, y la hierba y las piedras de los muros del canal se dibujan instanciadas.
Todo el sonido se sintetiza en directo con Web Audio —no hay ni un solo archivo de audio—: el agua que chapotea y gotea (más fuerte cuanto más cerca estás), el viento entre los sauces, pájaros de día, grillos y ranas de noche, la campana lejana de un templo, golpes de remo cuando vas en la barca y, como música, un punteo pentatónico de notas espaciadas.
