The Hand

La idea partió de la típica foto de manos borrosas detrás de un vidrio azulado: una mano que se ve mejor cuanto más se acerca al vidrio. En una segunda etapa, que el vidrio se comporte como una tela tipo lycra cuando la mano lo empuja.

El objetivo era resolver todo en WebGPU con TSL, y que la mano no fuera una animación grabada: la pose y los movimientos se calculan en cada frame sobre un rig hecho por script en Blender.

El blur de cada píxel depende de qué tan lejos del vidrio está la mano en ese punto.

• La mano se renderiza con MRT en dos salidas: el color y la distancia al vidrio.
• Una pirámide de blur de 6 niveles, como la del bloom, borronea las dos a la vez.
• En el composite, la distancia se estima sumando todos los niveles pesados por la cobertura. Así el borde de la mano se borronea igual que su interior y no aparecen halos.
• El nivel de blur sale de la distancia y se interpola entre los dos niveles más cercanos. Lejos, además, baja la opacidad.

Cuando la mano atraviesa el plano del vidrio, el vidrio se levanta como una tela que la envuelve.

• Una cámara ortográfica renderiza la profundidad de la mano del lado de la cámara: eso dice cuánto atraviesa el vidrio en cada punto.
• Compute shaders sobre texturas de almacenamiento convierten esa profundidad en altura. Con jump flooding, cada texel busca el punto de contacto que más lo levanta, y salen carpas redondas con crestas entre los dedos.
• La altura se suaviza y cada texel la persigue con un resorte, así la tela tiene inercia y rebote. Los bordes quedan fijos, como en un bastidor.
• En el material del vidrio, la altura desplaza los vértices y la normal sale por diferencias finitas.

La malla final es la mano y el antebrazo del cuerpo masculino realista de Human Base Meshes, simplificada a unos 15.000 vértices. El rig, de 17 huesos, lo generan scripts de Python en Blender: ubican las articulaciones con cortes de la malla y proporciones anatómicas, calculan los pesos y los corrigen para que los nudillos no arrastren la palma y la muñeca doble de forma gradual.

Las poses se guardan como datos (grados por articulación) y se revisan en Blender antes de llevarlas a la escena. Siguen reglas sacadas de referencias: los dedos se doblan en cascada, la última falange casi no se dobla en reposo y el meñique acompaña al anular, porque comparten tendones.

La interacción tiene tres capas, cada una con su rango:

• Apuntar: solo cuando el mouse está cerca de la muñeca. El antebrazo gira sobre su eje, la muñeca y el nudillo del índice terminan el ajuste, con límites por eje para que la malla no se deforme.
• Estirarse: cuanto más cerca de la punta del índice, más se estira el índice, y en menor medida el resto.
• Idle: un vaivén suave por dedo, que el índice pierde cuando está por señalar.

• El rendimiento con el vidrio sigue siendo un problema. Con el vidrio prendido los fps bajan mucho respecto de la escena sin vidrio, y más en pantallas con alta densidad de píxeles. Midiendo por partes, el mayor costo eran las pasadas del blur: las reduje a la mitad, uniendo las dos pirámides con MRT y con muestreo lineal, sin cambiar la imagen, pero no alcanzó para resolverlo del todo. Trabajar a menos resolución se veía peor, así que lo descarté, y saltear la tela cuando la mano no la toca no cambió nada.
• La mano se dibuja tres veces por frame: para el esmerilado, para la profundidad de la tela y en la escena.
• La tela no es física de verdad: la forma es un objetivo geométrico con un resorte por texel, sin ondas que se propaguen.
• Apuntar hacia arriba queda corto: la muñeca parte flexionada y los límites, que evitan deformaciones, no dejan llegar del todo.
• Solo probado en Chromium con WebGPU.

• Malla de la mano: cuerpo masculino realista de Human Base Meshes (Blender Studio, CC0).
• Estructura del proyecto y técnica de profundidad de la tela, a partir de las lecciones Post-processing y Snow del curso WebGPU & TSL de Three.js Journey.
• La primera versión usó un modelo generado con IA (Rodin), que terminó reemplazado.