Bluestone Lane

Descripción

Bluestone Lane es una obra en tiempo real, de tres a cuatro minutos, que se ejecuta en el navegador. Cae la tarde sobre una vieja calle que espera la demolición: enfrente, todas las persianas metálicas están bajadas, en las paredes aparece el carácter 拆 («demoler») dentro de círculos pintados y un edificio ya está a medio derribar. Solo una persiana sigue a medio subir: la de un pequeño taller de reparación de electrodomésticos, donde el robot que un viejo reparador montó con la caja de una radio, la lente de una cámara y tubos de agua sigue sentado en un taburete junto a la mesa de trabajo.

Haz clic para empezar: la cámara entra desde la calle y rodea al robot hasta quedar frente a su cara. Mantén pulsado el botón izquierdo del ratón o la barra espaciadora para abrir el diafragma de su lente: el primer intento siempre falla, así que suelta y mantén pulsado otra vez. Sin soltar, mueve el ratón: la cabeza del robot lo sigue y, allí donde cae su luz, vuelve el pasado.

El primer acto transcurre en el taller. Fuera del haz está el presente: todo polvoriento y descolorido, telarañas en los estantes, trozos de yeso desprendido y vidrios rotos en el suelo, y el televisor sobre la caja de cartón, el reloj de pared, el ventilador de mesa y la radio de válvulas, todos averiados. Donde cae la luz, las cosas están como estaban: el televisor emite sus programas, el dial de la radio se ilumina y suena una melodía, y el péndulo del reloj se balancea.

Al cabo de un rato, la misma melodía llega, tenue, desde el otro lado de la calle. El robot gira la cabeza para escuchar mientras el plano retrocede hasta la puerta; su luz vacila, la estática se cuela en la canción, la imagen pierde la sincronización una y otra vez y, con un último desgarro, se pasa al segundo acto.

El segundo acto transcurre en la calle. Cualquiera de las cinco tiendas de enfrente sobre la que se pose el haz vuelve a un atardecer de mediados de los años noventa —luces encendidas dentro, ropa tendida en los balcones, vecinos sentados en taburetes bajos junto a la puerta— y se oyen los sonidos de esa tienda. Las tiendas que ya has encontrado siguen iluminadas; las que aún no, te llaman con sus letreros y sus sonidos. La energía se va agotando mientras miras. La última mirada del robot vuelve a la tienda de electrónica de donde sale la melodía, y toda la calle se ilumina por un instante; luego se acaba la energía, el haz parpadea y se apaga, la canción se corta a mitad de frase y la calle vuelve a ser lo que es hoy. El final mira hacia fuera desde el interior del taller: el robot sigue de cara a la calle a oscuras, enfrente se enciende una lámpara y la última frase dice: «Recuerda la calle con sus luces encendidas».

Tras el rótulo final, haz clic para volver a verla. La interfaz está en inglés por defecto, con un enlace en la pantalla de título para cambiar al chino; en un teléfono, mantén pulsada la pantalla y desliza el dedo. Se recomienda usar auriculares y un navegador con WebGPU, como una versión reciente de Chrome o Edge; los navegadores sin WebGPU pasan automáticamente a WebGL2. La primera carga tarda un poco, porque hay que descargar los modelos y precompilar los shaders.

Cómo se usó Tripo

Tripo generó más de veinte objetos del taller: el robot, dos radios de válvulas (una abierta para repararla y otra cerrada), dos televisores CRT, un ventilador de mesa, un reloj de pared, un despertador, una grabadora de casete, una lámpara de escritorio, un soldador, una lupa, una caja de herramientas, un armario de piezas, la mesa de trabajo, una bicicleta roadster de 28 pulgadas, un termo, una taza esmaltada y el brazo, la pierna y el torso de repuesto, más cuatro versiones deterioradas hechas expresamente. Las paredes y el suelo de la sala, las estanterías y las cajas de cartón que hay en ellas, los cables, el panel de herramientas y los objetos pequeños de la mesa de trabajo son geometría construida con código; la hilera de tiendas de enfrente son dos fotografías generadas («ahora» y «antes»), no modelos.

• De la referencia al modelo: cada objeto parte de un render de producto sobre un fondo liso gris claro, que después pasa a Tripo. Antes de modelar se compararon tres enfoques tomando como prueba la radio abierta —image-to-3D directo, de imagen a multivista y de ahí a 3D, y de una lámina de cuatro vistas montada a mano a 3D—, y la mayoría de los modelos siguió la ruta imagen → multivista → 3D, con geometría y texturas detalladas, mapas PBR y la iluminación horneada eliminada de las texturas, para que sean la lámpara de escritorio, el atardecer de la calle y el haz del robot los que iluminen.
• El robot: Tripo lo entregó como una sola malla, con la cabeza, el cuerpo y el taburete fusionados. En lugar de cortarle la cabeza, el autor le dio un «cuello blando» en el vertex shader: un peso calculado a partir de la posición vale 1 en la cabeza hecha con la caja de la radio, 0 en el cuerpo y los hombros, y varía gradualmente a lo largo del cuello y de los cables que lo rodean, de modo que, al girar la cabeza, cada vértice se tuerce alrededor del cuello en la parte del ángulo que le corresponde. Como no se corta nada, no puede abrirse ninguna costura, y los cables se enroscan alrededor del cuello cuando este gira. El taburete se separó con un script de Blender, así que en el segundo acto el robot entero gira sobre él para quedar de cara a la calle. El emblema cromado «上海» (Shanghái) de su cara y la placa «人民电器» (Eléctrica del Pueblo) de su pecho son geometría del propio modelo, y con el mismo diseño se generaron el brazo, la pierna y el torso de repuesto que cuelgan de los ganchos de la pared y descansan junto a la mesa de trabajo.
• Versiones deterioradas: para que el presente fuera del haz y el pasado dentro de él encajaran, el televisor sobre la caja de cartón, el reloj de pared, el ventilador de mesa y la radio de válvulas recibieron cada uno una segunda versión, deteriorada: la imagen de referencia se retocó para que pareciera dañada y después se modeló con los mismos ajustes de Tripo. Ambas versiones ocupan el mismo sitio: los píxeles que toca el haz muestran la intacta, y el resto, la deteriorada.
• Mallas en bruto en la web: cada modelo en bruto de Tripo tiene unos 1,9 millones de triángulos y texturas 4K (8K en el caso del robot). En lugar de diezmarlos en Blender —lo que rasga las costuras de las texturas y deja grietas blancas visibles de cerca—, el autor los simplificó con meshopt conservando las costuras, en varios niveles de detalle, cada uno con su error medido. En tiempo de ejecución, cada objeto muestra solo el nivel cuyo error se mantiene por debajo de un píxel de pantalla y cuya textura no tiene menos resolución que la pantalla: niveles más simples a lo lejos y más finos a medida que te acercas. En el sitio publicado, el nivel más fino difiere de la malla en bruto en apenas una fracción de milímetro. Los niveles menos detallados se cargan primero y el resto llega en streaming según hace falta, y se libera de nuevo cuando la memoria de vídeo supera su presupuesto.
• Visor de modelos: añade ?review a la dirección para entrar en el modo de inspección, con una iluminación de inspección intensa; arrastra para orbitar, usa la rueda para hacer zoom y pulsa 1–8 para las vistas predefinidas. Haz doble clic en cualquier modelo y la cámara se desliza hasta él, con su nombre y el número de triángulos de su modelo en bruto de Tripo en la esquina inferior izquierda.

Cómo funciona en el navegador

No hay motor de juego: todo está construido directamente sobre el renderizador WebGPU de three.js con Vite, y los navegadores sin WebGPU pasan automáticamente a WebGL2.

El pasado se calcula píxel a píxel. El ojo del robot proyecta un cono de luz y, durante el renderizado, cada píxel se comprueba contra él: dentro del cono aparecen los modelos intactos, los televisores encendidos y una gradación de color más cálida; fuera, el presente polvoriento y descolorido. Con esa misma máscara se intercambian las versiones deterioradas y las intactas. Las dos fotografías de enfrente alternan entre el ahora y el antes de la misma manera, y el escaparate de la tienda de electrónica es una pequeña tienda 3D de verdad, cuyos televisores también emiten programas.

Se abre rápido y funciona con fluidez gracias a tres cosas. Todos los shaders se compilan de forma asíncrona y en paralelo, y un objeto cuyo shader aún no está listo simplemente se omite en ese fotograma, en lugar de retrasarlo. La pantalla de carga dibuja cada objeto una vez en cada pasada (prepasada de profundidad, pasada principal y cada mapa de sombras), así que, una vez que haces clic para empezar, no se compila nada a mitad de la historia. Por último, el renderizado se limita a unos 2,1 millones de píxeles (aproximadamente 1080p), y la resolución baja automáticamente cuando los fotogramas tardan demasiado. Cuando un modelo cambia de nivel, ambos niveles se dibujan a la vez sobre conjuntos complementarios de píxeles aleatorios y se funden entre sí en 0,35 segundos, suavizados por el antialiasing temporal, para que de cerca nada «salte». Añade ?q=low para un modo de baja calidad (sin oclusión ambiental ni reflejos en espacio de pantalla, y con mapas de sombras a mitad de tamaño).

El sonido superpone grabaciones de campo CC0 y síntesis con Web Audio: la calle al atardecer, fuera del taller; el zumbido del tubo fluorescente y de la red eléctrica; el tictac del péndulo; un tono de prueba de televisión; los servos del robot y el sonido de su ojo al abrirse. La melodía de la radio es una composición pentatónica original. En el segundo acto, cada tienda de enfrente tiene su propio sonido.

Por el camino, el autor también corrigió un error del renderizador WebGPU de three.js r186: cuando dos modelos solo se diferencian en cómo se almacenan sus normales (Int8 frente a Int16), el renderizador les deja compartir una misma pipeline, de modo que el que se dibuja en segundo lugar lee sus vértices en un formato equivocado y su superficie se ilumina con un caos de manchas que parece camuflaje. WebGL2 no se ve afectado.