Tecnología de simulación de fluidos con WebGL

 (paveldogreat.github.io)
2 puntos por GN⁺ 2024-12-30 | 1 comentarios | Compartir por WhatsApp
  • Una app de simulación de fluidos que se ejecuta directamente en el navegador, donde el usuario puede ajustar la calidad de renderizado y los valores relacionados con los cálculos físicos
  • Centrada en quality y sim resolution, permite cambiar parámetros de la simulación como density diffusion, velocity diffusion, pressure, vorticity y splat radius
  • Los efectos visuales se dividen en shading, colorful, Bloom y Sunrays, y Bloom y Sunrays tienen valores de detalle por separado
  • El flujo de ejecución se controla con paused y Random splats, y en la sección Capture se manejan el color de fondo, el fondo transparente y las capturas de pantalla
  • También incluye accesos a Github, Twitter, Discord y la app móvil para ir a recursos externos además de la simulación

Opciones de ajuste de la simulación

  • La página de WebGL Fluid Simulation ofrece la pantalla de ejecución de la simulación de fluidos junto con el mensaje “Try Fluid Simulation app!”
  • Elementos básicos que el usuario puede ajustar:
    • quality
    • sim resolution
  • Los valores de simulación están compuestos por los siguientes elementos:
    • density diffusion
    • velocity diffusion
    • pressure
    • vorticity
    • splat radius

Ejecución y efectos visuales

  • Opciones relacionadas con la ejecución:
    • casilla shading
    • casilla colorful
    • casilla paused
    • Random splats
  • Configuración de Bloom:
    • casilla enabled
    • intensity
    • threshold
  • Configuración de Sunrays:
    • casilla enabled
    • weight

Captura y elementos externos

  • Configuración de Capture:

    • background color

      • casilla transparent
      • take screenshot
      • En la parte inferior hay elementos para revisar Github, Twitter, Discord y la mobile app

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-12-30
Opiniones de Hacker News

  • Hice un fork de esto y probé invertir el modelo de luz de mezcla aditiva a mezcla sustractiva, y de repente empezó a verse como tinta bajo el agua
    https://observablehq.com/@tomlarkworthy/ink

    • Cuando hice una simulación de fluidos, esto también fue lo primero que hice. Durante mucho tiempo investigué cómo conseguir en resultados digitales un efecto de color sustractivo, es decir, esa riqueza de los pigmentos y la sensación de que cambian según la luz, casi siempre sin mucho éxito, pero aun así lo intento cada vez que tengo oportunidad
    • ¿Qué tan difícil sería hacer que la tinta no desaparezca? Me gustaría integrarlo en una app de dibujo, así que cualquier tip sería de mucha ayuda
    • También valdría la pena considerar cambiar la tinta a color CMYK: mutable ink = [255, 0, 255]

  • No sé por qué, pero cada vez que veo una simulación física de alta resolución o efectos visuales de este tipo es cuando más siento cuánta computación está ocurriendo dentro de la CPU/GPU
    Más temprano hoy vi un video de 2 minutos desde la cabina de un avión, declarando una emergencia y entrando a la pista de un aeropuerto, y recién hacia el final me di cuenta de que no era video real sino un simulador o videojuego. Aun así, ver los colores arremolinándose en pantalla me impacta más. Es raro

  • Siempre le tuve cariño a esta versión de las implementaciones antiguas. En baja resolución tiene una estética tipo cyberpunk netrunner, y en alta resolución se siente casi como un fantasma espiritual: https://haxiomic.github.io/projects/webgl-fluid-and-particle...

    • Es interesante que en un comentario de 2020 el creador de ese proyecto también hablara de este proyecto. Siempre me pregunté cómo estaban conectados, o si simplemente aplicaron la misma premisa de forma independiente: https://news.ycombinator.com/item?id=24065857
    • Me gusta jugar con calidad UltraHigh y las iteraciones del solver en 1. Me recuerda a cuando, al cocinar, uno va incorporando lentamente un ingrediente en otro; por ejemplo, mezclar harina con huevo al hacer pasta

  • ¿Alguien conoce más ejemplos de simulaciones de agua hechas con WebGL? Estoy buscando cómo implementar olas con espuma
    Me gusta la demo Pool de Evan
    https://madebyevan.com/webgl-water/

    • Leí en alguna parte que eso no es una simulación, sino más bien un truco ingenioso para que parezca agua, una piscina y objetos dentro de ella

  • Si te interesa el renderizado de fluidos, Sebastian Lague hizo hace poco un video al respecto: https://www.youtube.com/watch?v=kOkfC5fLfgE

    • Los videos de Lague son constantemente sorprendentes e inspiradores. Muy recomendados para cualquiera que tenga interés en este campo

  • En oimo.io también hay algunas simulaciones de fluidos en WebGL como las mencionadas en este hilo
    https://news.ycombinator.com/item?id=37026592 - Water (2023-08-06, 133 comments)
    https://oimo.io/works/water/
    https://oimo.io/works/water3d/
    https://oimo.io/works/fluid/

  • Esto parece estar generando HDR de verdad en mi iPhone 15 Pro. No pasa muy seguido, así que la pantalla se ve mucho más viva
    Realmente genial

    • Se ve bien y es muy fluido, pero ¿una suscripción a una app de dinámica de fluidos, en serio?

  • Por primera vez aprecié de verdad la pantalla táctil de mi laptop

  • Me recordó a Plasma Pong
    Sería una verdadera lástima si alguien implementara una versión gratuita online ;)

  • https://news.ycombinator.com/item?id=19963640
    https://news.ycombinator.com/item?id=23955527