Hacer que una imagen ondule es sencillo. Para que se comporte como tela, el movimiento debe viajar por la superficie: tirar de un punto debe mover sus vecinos y cada pliegue debe cambiar la manera en que recibe el viento.
flag-cloth obtiene ese comportamiento con una pequeña cuadrícula de partículas. La imagen y la cuadrícula son independientes. Una textura de alta resolución conserva su nitidez aunque la simulación utilice solo unos cientos de partículas; WebGL rellena la imagen entre ellas.
Movimiento entre frames
Cada partícula recuerda dos posiciones: la actual y la del paso anterior. La diferencia entre ambas funciona como velocidad. El viento y la gravedad añaden aceleración, mientras que la amortiguación elimina energía poco a poco.
siguiente = actual + (actual - anterior) × amortiguación + aceleración × tiempo²Esto es integración Verlet. Necesita poco estado y funciona de manera natural con restricciones de posición. Una partícula fija simplemente no tiene masa móvil, por lo que el solver la deja en su lugar.
Las conexiones forman la tela
Sin conexiones, las partículas se dispersarían. Tres familias de restricciones de distancia dan forma a la cuadrícula:
- Las conexiones estructurales unen filas y columnas vecinas.
- Las conexiones diagonales cruzan cada celda y evitan que se deforme como un rombo.
- Las conexiones de flexión abarcan dos celdas y evitan que la tela se doble como papel en cada borde.
El solver corrige esas distancias varias veces por paso. Cada corrección es pequeña, pero juntas transmiten el movimiento de una partícula al resto de la bandera.
Arrastra una partícula blanca, cambia el borde fijo u oculta una familia de restricciones. El diagrama utiliza el mismo solver que la bandera renderizada, pero sin textura ni iluminación.
El viento sigue los pliegues
Cada celda se renderiza como dos triángulos. Un triángulo proporciona dos datos útiles: su área y la dirección hacia la que apunta su superficie. Al comparar esa dirección con el viento local sabemos cuánto aire recibe.
La fuerza resultante se reparte entre las tres partículas del triángulo. Cuando esas partículas se mueven, el triángulo gira. La nueva orientación recibe una cantidad diferente de viento, de modo que la tela responde a su propia forma en lugar de seguir una onda predefinida.
La turbulencia solo modifica el viento local; nunca coloca directamente una partícula.
Una simulación estable y un renderizado adaptable
La física avanza en intervalos fijos aunque los frames de pantalla lleguen de forma irregular. El renderizador copia después las posiciones más recientes a un buffer WebGL existente. No reconstruye la cuadrícula, no crea una partícula por píxel y no pide a React que renderice cada frame.
Esa separación es el núcleo de la biblioteca: una simulación conectada y pequeña controla el movimiento, mientras la GPU mantiene suaves la imagen y la iluminación.