El chiste de “Verlet solo es Verlet si viene de la región francesa de Verlet; si no, es solo Euler espumoso” es excelente
Tiene curiosidad por cómo se da el salto desde conocimientos de desarrollo web, Gradle y Java a la etapa de hacer algo así
Como no estudió una licenciatura en CS, a veces siente que por más lenguajes de programación que aprenda, nunca podrá entender algo como esto. Ha probado un poco OPENLY, LIBGDX, GODOT y Unity, pero hacer una simulación de tela desde cero realmente se siente abrumador
Es mucho más simple de lo que parece. Hizo el demo de “tela que se desgarra” enlazado en otra parte de este hilo incluso antes de empezar su carrera como ingeniero de software
Aquí se usa integración de Verlet básica: se actualizan vectores 2D que forman una cuadrícula a partir de la posición actual y la anterior, y se les restringe para mantener cierta distancia con los puntos vecinos inmediatos. Si dibujas líneas entre esos puntos, tienes tela. Empezó con eso porque se enganchó con las simulaciones físicas y, al investigar, era de las cosas más fáciles de implementar. La relación esfuerzo/resultado era muy buena. Claro, después de eso todo se vuelve mucho más complejo
También se sintió así al querer aprender simulación física. Con el tiempo aprendió que hay que separar las áreas de conocimiento como la física de las herramientas de programación con las que se implementan
En especial si empiezas por desarrollo de juegos, da la impresión de que para cada simulación importante —cuerpos rígidos, tela, resortes, fluidos— existe una forma natural e idiomática de programarla. Al principio pensaba que incluso una simulación de fluidos se expresaría de manera natural dentro del lenguaje, como crear una cuadrícula y elegir reglas de actualización por paso de tiempo. Pero en la práctica se trata de modelar el problema con matemáticas y física, y luego mapear eso al lenguaje y a las herramientas, y esas herramientas no siempre lo expresan de forma idiomática
Hay algoritmos que se traducen fácilmente a código, como una simulación de tela basada en posiciones de partículas y resortes, pero al intentar avanzar más eso incluso le llevó a malentendidos. Al final tuvo que profundizar más en física y análisis numérico, y luego traducir el problema a código; el código resultante puede ser tosco y estar lleno de números mágicos
El desarrollo web no se limita a Java y en general está dominado por problemas de integración de componentes. Hay mucha estructura pero poco contenido; el cálculo se delega a bibliotecas; en build time el problema es la complejidad de integración, y en runtime la escala de los sistemas distribuidos
En cambio, escribir simulaciones implica mucho cálculo, así que la mayor parte del código es contenido real. Si el desarrollo web es una combinación de cosas heterogéneas, la simulación es más homogénea. El problema es que está limitada por el rendimiento de un solo proceso dentro del presupuesto de tiempo que marcan los frames por segundo
Por eso puedes concentrarte en un solo entorno de ejecución. Recomienda el navegador, que te resuelve los problemas de despliegue. Ganja[1] quizá sea el proyecto de simulación definitivo más cercano a “contenido y no estructura”. Es muy raro y difícil de entender, así que su mantenimiento se detuvo, pero funciona. Del lado un poco más estructurado está D3, y sus autores ya implementaron algoritmos modernos de visualización/distribución como grafos dirigidos por fuerzas[2]. Un punto de partida más amigable puede ser la familia de Processing[3], que empezó en Java y luego se portó a Python, JavaScript y otros lenguajes
Aun así, una sola simulación de tela, en comparación con un motor de juegos, es como una célula de un ratón. Un motor de juegos es enorme, y aun ahí normalmente harás mucha integración interna en vez de escribir simulaciones directamente
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
Al final, todo es matemáticas y física
No preguntó específicamente por desarrollo de juegos, pero conocimientos como gráficos, matemáticas, iluminación y física están bastante difundidos en ese campo. Si buscas solo un tema de nicho como la simulación de tela, puede ser difícil encontrar información que no esté vinculada a recursos de desarrollo de juegos
Hoy leyó https://alextardif.com/LearningGraphics.html y puede servir como guía en varias direcciones. https://learnopengl.com/ sigue siendo muy bien valorado incluso ahora que existen APIs más nuevas como Vulkan, Metal y DX12. Pero conviene ver la API como alrededor del 5% del problema a resolver. Siendo sincero, quizá incluso menos, y Vulkan es más pesado de lo que había oído
Si no quieres aprender C/C++, la comunidad de WebGL es grande, así que también podrías empezar por subreddits o foros relacionados. Aun así, la API y la plataforma son más bien una carcasa alrededor de la parte realmente impresionante y novedosa, que es la simulación física
Como contexto, es desarrollador web/Gradle/Java y, después de haberlo intentado hace unos años, ahora está volviendo a crear un motor de juegos en su tiempo libre
No es tan difícil. En JavaScript, basta con representar cada punto como (x,y,z), asignarle una masa y aplicar gravedad en cada frame, añadiendo un poco de ruido si hace falta
Cada vez que una partícula intenta moverse, se transmite la fuerza a otros puntos a través de los lados usando trigonometría, y se añade algo de amortiguación para que no se dispare fuera de control. La masa determina después cuánto afectan las fuerzas a cada punto. Si 3D se siente demasiado, se puede empezar primero con 2D
Me hizo pensar en el video de Polygon que analiza el increíble diseño de telas de Elden Ring: https://youtu.be/wSSqx-Dh6ko
La parte que el video no enfatiza lo suficiente es que la tela también cumple una función práctica. La tela oculta la forma del enemigo, haciendo más difícil distinguir el modelo
En un juego centrado en el combate cuerpo a cuerpo y en las precisas hitboxes que podrían considerarse uno de los aspectos más innovadores de los juegos de FromSoft, la tela que fluye libremente dificulta calcular qué tan cerca debes estar del personaje para acertar un golpe y qué tan lejos debes estar para no recibirlo. Si además se suman movimientos y patrones de ataque impredecibles, la dificultad aumenta aún más y cada combate se vuelve único
En la realidad, la tela tiene la misma cualidad. Un enemigo con túnica o capa se ve mucho más amenazante y es más difícil de enfrentar
Personalmente no disfruto los juegos de FromSoft por la estructura repetitiva de su gameplay, pero en términos de diseño me parecen algunos de los videojuegos mejor hechos de la historia
Yo también tengo mi versión, hecha hace 14 años: https://www.youtube.com/watch?v=G05M_Y6NQVM
Coincido en que una configuración básica como esta es muy simple de implementar y el resultado se ve realmente genial
Eso lo hice yo. La versión original que subí a Codepen fue hace como 13 años
A mí tampoco me lo parece, pero cuando recuerdo que fue antes de conseguir mi primer trabajo como programador, de verdad se siente como hace muchísimo tiempo
El videojuego Hitman de 2000 también tenía tela, y Mirror's Edge de 2008 tenía tela que se desgarraba. Probablemente ninguno de los dos fue el primero
Este tipo de simuladores de tela siempre me han parecido algo inestables. Si generas una tela tipo grid, empieza a dar saltos y moverse al azar
Me pregunto si esto se debe a la acumulación de errores de coma flotante IEEE 754
Vale la pena buscar integración numérica en el contexto de simulaciones físicas o motores de juego. Como punto de partida puedes ver https://en.wikipedia.org/wiki/Numerical_methods_for_ordinary...
Según entiendo, no se debe solo a simples errores de coma flotante, sino también a la naturaleza de aproximar funciones continuas mediante pasos discretos simples. En el artículo de Wikipedia enlazado también hay una gráfica que muestra cómo el error se acumula con pasos grandes mucho antes de que la precisión de coma flotante llegue a ser el problema principal
Cada técnica de integración numérica tiene sus propios compromisos. Están el método de Euler, Verlet, Runge-Kutta y otros; algunos tienden a acumular energía total y otros tienden a perderla, y ambos comportamientos son incorrectos. Los métodos más complejos suelen funcionar un poco mejor, pero entonces aparece la cuestión de si la ganancia por hacer cada paso más complejo compensa más que repetir muchas veces un algoritmo más simple y rápido
En una simulación física, la conservación de la energía no ocurre por defecto a menos que la programes explícitamente. Por ejemplo, hace falta algo como una corrección manual periódica
No solo influyen los errores de redondeo, sino también la cuantización del tiempo y otros pequeños errores provenientes del propio modelo matemático
Si el error tiende al amortiguamiento, se obtiene el efecto de que la energía se disipa como en la realidad y el movimiento termina deteniéndose; si tiende a la aceleración, la simulación se descontrola
Quiero decirle al autor de este sitio que hizo un gran trabajo. Funciona tal cual, sin JavaScript externo, y además corre en móvil
Hoy en día no se puede decir eso de la mayoría de los sitios web basados en texto
Es un trabajo realmente impresionante. Es simple, pero te hace seguir mirándolo, y muestra muy bien lo poderosa que puede ser la integración Verlet para crear simulaciones de tela naturales y convincentes
Si les interesa, también recomiendo el paper de Jakobsen surgido del motor de Hitman. Es un clásico
Me gusta ver a alguien haciendo de verdad preguntas difíciles sobre cómo funciona algo así. Siempre me deja la sensación de que todo está hecho de muchísimos pasos pequeños acumulados a lo largo de años
Me pregunto si uno se topa con un punto en que las matemáticas se sienten como una pared, o si simplemente sigue insistiendo hasta que todo encaja
Lo más interesante es que, con apenas algunos parámetros y restricciones, se logra un movimiento tan realista
Me hace pensar que el mundo que nos rodea también podría ser solo un conjunto de modelos y fuerzas ocultas, y que nuestro trabajo consiste en descubrirlos y simularlos. Es un trabajo hermoso
1 comentarios
Comentarios de Hacker News
Otro ejemplo que se puede ver en el navegador: https://oimo.io/works/cloth/
Leyó el artículo de Marian Pekár, entendió la integración de Verlet y pudo crear por su cuenta una simulación de tela: https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
Tiene curiosidad por cómo se da el salto desde conocimientos de desarrollo web, Gradle y Java a la etapa de hacer algo así
Como no estudió una licenciatura en CS, a veces siente que por más lenguajes de programación que aprenda, nunca podrá entender algo como esto. Ha probado un poco OPENLY, LIBGDX, GODOT y Unity, pero hacer una simulación de tela desde cero realmente se siente abrumador
Aquí se usa integración de Verlet básica: se actualizan vectores 2D que forman una cuadrícula a partir de la posición actual y la anterior, y se les restringe para mantener cierta distancia con los puntos vecinos inmediatos. Si dibujas líneas entre esos puntos, tienes tela. Empezó con eso porque se enganchó con las simulaciones físicas y, al investigar, era de las cosas más fáciles de implementar. La relación esfuerzo/resultado era muy buena. Claro, después de eso todo se vuelve mucho más complejo
En especial si empiezas por desarrollo de juegos, da la impresión de que para cada simulación importante —cuerpos rígidos, tela, resortes, fluidos— existe una forma natural e idiomática de programarla. Al principio pensaba que incluso una simulación de fluidos se expresaría de manera natural dentro del lenguaje, como crear una cuadrícula y elegir reglas de actualización por paso de tiempo. Pero en la práctica se trata de modelar el problema con matemáticas y física, y luego mapear eso al lenguaje y a las herramientas, y esas herramientas no siempre lo expresan de forma idiomática
Hay algoritmos que se traducen fácilmente a código, como una simulación de tela basada en posiciones de partículas y resortes, pero al intentar avanzar más eso incluso le llevó a malentendidos. Al final tuvo que profundizar más en física y análisis numérico, y luego traducir el problema a código; el código resultante puede ser tosco y estar lleno de números mágicos
En cambio, escribir simulaciones implica mucho cálculo, así que la mayor parte del código es contenido real. Si el desarrollo web es una combinación de cosas heterogéneas, la simulación es más homogénea. El problema es que está limitada por el rendimiento de un solo proceso dentro del presupuesto de tiempo que marcan los frames por segundo
Por eso puedes concentrarte en un solo entorno de ejecución. Recomienda el navegador, que te resuelve los problemas de despliegue. Ganja[1] quizá sea el proyecto de simulación definitivo más cercano a “contenido y no estructura”. Es muy raro y difícil de entender, así que su mantenimiento se detuvo, pero funciona. Del lado un poco más estructurado está D3, y sus autores ya implementaron algoritmos modernos de visualización/distribución como grafos dirigidos por fuerzas[2]. Un punto de partida más amigable puede ser la familia de Processing[3], que empezó en Java y luego se portó a Python, JavaScript y otros lenguajes
Aun así, una sola simulación de tela, en comparación con un motor de juegos, es como una célula de un ratón. Un motor de juegos es enorme, y aun ahí normalmente harás mucha integración interna en vez de escribir simulaciones directamente
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
No preguntó específicamente por desarrollo de juegos, pero conocimientos como gráficos, matemáticas, iluminación y física están bastante difundidos en ese campo. Si buscas solo un tema de nicho como la simulación de tela, puede ser difícil encontrar información que no esté vinculada a recursos de desarrollo de juegos
Hoy leyó https://alextardif.com/LearningGraphics.html y puede servir como guía en varias direcciones. https://learnopengl.com/ sigue siendo muy bien valorado incluso ahora que existen APIs más nuevas como Vulkan, Metal y DX12. Pero conviene ver la API como alrededor del 5% del problema a resolver. Siendo sincero, quizá incluso menos, y Vulkan es más pesado de lo que había oído
Si no quieres aprender C/C++, la comunidad de WebGL es grande, así que también podrías empezar por subreddits o foros relacionados. Aun así, la API y la plataforma son más bien una carcasa alrededor de la parte realmente impresionante y novedosa, que es la simulación física
Como contexto, es desarrollador web/Gradle/Java y, después de haberlo intentado hace unos años, ahora está volviendo a crear un motor de juegos en su tiempo libre
Cada vez que una partícula intenta moverse, se transmite la fuerza a otros puntos a través de los lados usando trigonometría, y se añade algo de amortiguación para que no se dispare fuera de control. La masa determina después cuánto afectan las fuerzas a cada punto. Si 3D se siente demasiado, se puede empezar primero con 2D
Me hizo pensar en el video de Polygon que analiza el increíble diseño de telas de Elden Ring: https://youtu.be/wSSqx-Dh6ko
En un juego centrado en el combate cuerpo a cuerpo y en las precisas hitboxes que podrían considerarse uno de los aspectos más innovadores de los juegos de FromSoft, la tela que fluye libremente dificulta calcular qué tan cerca debes estar del personaje para acertar un golpe y qué tan lejos debes estar para no recibirlo. Si además se suman movimientos y patrones de ataque impredecibles, la dificultad aumenta aún más y cada combate se vuelve único
En la realidad, la tela tiene la misma cualidad. Un enemigo con túnica o capa se ve mucho más amenazante y es más difícil de enfrentar
Personalmente no disfruto los juegos de FromSoft por la estructura repetitiva de su gameplay, pero en términos de diseño me parecen algunos de los videojuegos mejor hechos de la historia
Siempre me han gustado este tipo de animaciones de tela. La primera que vi probablemente fue el demo de tela que se desgarra de dissimulate en Codepen, y no puedo creer que ese código lo haya escrito hace 9 años
[1] - https://codepen.io/dissimulate/pen/eZxEBO
[2] - https://github.com/Dissimulate/Tearable-Cloth
Coincido en que una configuración básica como esta es muy simple de implementar y el resultado se ve realmente genial
A mí tampoco me lo parece, pero cuando recuerdo que fue antes de conseguir mi primer trabajo como programador, de verdad se siente como hace muchísimo tiempo
Este tipo de simuladores de tela siempre me han parecido algo inestables. Si generas una tela tipo grid, empieza a dar saltos y moverse al azar
Me pregunto si esto se debe a la acumulación de errores de coma flotante IEEE 754
Según entiendo, no se debe solo a simples errores de coma flotante, sino también a la naturaleza de aproximar funciones continuas mediante pasos discretos simples. En el artículo de Wikipedia enlazado también hay una gráfica que muestra cómo el error se acumula con pasos grandes mucho antes de que la precisión de coma flotante llegue a ser el problema principal
Cada técnica de integración numérica tiene sus propios compromisos. Están el método de Euler, Verlet, Runge-Kutta y otros; algunos tienden a acumular energía total y otros tienden a perderla, y ambos comportamientos son incorrectos. Los métodos más complejos suelen funcionar un poco mejor, pero entonces aparece la cuestión de si la ganancia por hacer cada paso más complejo compensa más que repetir muchas veces un algoritmo más simple y rápido
No solo influyen los errores de redondeo, sino también la cuantización del tiempo y otros pequeños errores provenientes del propio modelo matemático
Si el error tiende al amortiguamiento, se obtiene el efecto de que la energía se disipa como en la realidad y el movimiento termina deteniéndose; si tiende a la aceleración, la simulación se descontrola
Quiero decirle al autor de este sitio que hizo un gran trabajo. Funciona tal cual, sin JavaScript externo, y además corre en móvil
Hoy en día no se puede decir eso de la mayoría de los sitios web basados en texto
Es un trabajo realmente impresionante. Es simple, pero te hace seguir mirándolo, y muestra muy bien lo poderosa que puede ser la integración Verlet para crear simulaciones de tela naturales y convincentes
Si les interesa, también recomiendo el paper de Jakobsen surgido del motor de Hitman. Es un clásico
Me gusta ver a alguien haciendo de verdad preguntas difíciles sobre cómo funciona algo así. Siempre me deja la sensación de que todo está hecho de muchísimos pasos pequeños acumulados a lo largo de años
Me pregunto si uno se topa con un punto en que las matemáticas se sienten como una pared, o si simplemente sigue insistiendo hasta que todo encaja
Lo más interesante es que, con apenas algunos parámetros y restricciones, se logra un movimiento tan realista
Me hace pensar que el mundo que nos rodea también podría ser solo un conjunto de modelos y fuerzas ocultas, y que nuestro trabajo consiste en descubrirlos y simularlos. Es un trabajo hermoso