Tecnologia de simulação de fluidos em WebGL

 (paveldogreat.github.io)
2 pontos por GN⁺ 2024-12-30 | 1 comentários | Compartilhar no WhatsApp
  • Um app de simulação de fluidos executado diretamente no navegador, em que o usuário pode ajustar valores relacionados à qualidade de renderização e aos cálculos físicos
  • É possível alterar parâmetros da simulação centrados em quality e sim resolution, como density diffusion, velocity diffusion, pressure, vorticity e splat radius
  • Os efeitos visuais se dividem em shading, colorful, Bloom e Sunrays, e Bloom e Sunrays têm valores detalhados separados
  • O fluxo de execução é controlado por paused e Random splats, e a área Capture lida com cor de fundo, fundo transparente e captura de tela
  • Itens para Github, Twitter, Discord e app mobile ficam dispostos junto com a interface, permitindo acessar recursos externos à simulação

Itens de ajuste da simulação

  • A página WebGL Fluid Simulation oferece a tela de execução da simulação de fluidos junto com o aviso “Try Fluid Simulation app!”
  • Itens básicos que o usuário pode ajustar:
    • quality
    • sim resolution
  • Os valores da simulação são compostos pelos seguintes itens:
    • density diffusion
    • velocity diffusion
    • pressure
    • vorticity
    • splat radius

Execução e efeitos visuais

  • Opções relacionadas à execução:
    • caixa de seleção shading
    • caixa de seleção colorful
    • caixa de seleção paused
    • Random splats
  • Configurações de Bloom:
    • caixa de seleção enabled
    • intensity
    • threshold
  • Configurações de Sunrays:
    • caixa de seleção enabled
    • weight

Captura e itens externos

  • Configurações de Capture:

    • background color

      • caixa de seleção transparent
      • take screenshot
      • Na parte inferior, há itens para verificar Github, Twitter, Discord e mobile app

Leituras relacionadas

1 comentários

 
GN⁺ 2024-12-30
Opiniões no Hacker News

  • Fiz um fork disso e inverti o modelo de luz de mistura aditiva para mistura subtrativa, e de repente começou a parecer tinta dentro d’água
    https://observablehq.com/@tomlarkworthy/ink

    • Quando fiz uma simulação de fluidos, isso também foi a primeira coisa que tentei. Passei muito tempo investigando como obter em resultados digitais um efeito de cor subtrativa, ou seja, a riqueza dos pigmentos e aquela sensação que muda conforme a luz, mas quase sempre sem muito resultado; mesmo assim, sempre que surge uma oportunidade, acabo tentando de novo
    • Quão difícil seria fazer a tinta não desaparecer? Quero tentar integrar isso a um app de desenho, então qualquer dica ajudaria muito
    • Também vale considerar transformar a tinta em cores CMYK: mutable ink = [255, 0, 255]

  • Não sei bem por quê, mas sempre que vejo uma simulação física ou efeito visual em alta resolução desse tipo, é quando mais sinto quanta coisa está acontecendo dentro da CPU/GPU
    Mais cedo hoje vi um vídeo de 2 minutos da perspectiva da cabine de um avião declarando emergência e entrando na pista de um aeroporto, e só no fim percebi que não era filmagem real, mas um simulador ou videogame. Mesmo assim, ver as cores rodopiando na tela ainda me causa um impacto mais forte. Estranho

  • Sempre tive carinho por esta versão entre as implementações antigas. Em baixa resolução ela tem uma estética meio cyberpunk netrunner, e em alta resolução fica com uma sensação quase espiritual, fantasmagórica: https://haxiomic.github.io/projects/webgl-fluid-and-particle...

    • Interessante: há um comentário de 2020 em que o criador desse projeto fala sobre este outro projeto. Sempre fiquei curioso sobre como os dois se conectam, ou se foi apenas a mesma premissa aplicada de forma independente: https://news.ycombinator.com/item?id=24065857
    • Gosto de brincar com a qualidade UltraHigh e o solver com 1 iteração. Me lembra cozinhar, quando você incorpora lentamente um ingrediente em outro — por exemplo, misturar farinha aos ovos ao fazer massa

  • Alguém conhece mais exemplos de simulação de água feita em WebGL? Estou procurando uma forma de implementar ondas com espuma
    Gosto da demo Pool do Evan
    https://madebyevan.com/webgl-water/

    • Li em algum lugar que aquilo não é exatamente uma simulação, mas mais um conjunto de truques inteligentes para fazer parecer água, uma piscina e objetos dentro dela

  • Se você se interessa por renderização de fluidos, Sebastian Lague fez recentemente um vídeo relacionado: https://www.youtube.com/watch?v=kOkfC5fLfgE

    • Os vídeos do Lague são consistentemente incríveis e inspiradores. Recomendo muito para quem se interessa por essa área

  • O oimo.io também tem algumas simulações de fluidos em WebGL que apareceram nesta thread
    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/

  • Isso parece realmente estar exibindo HDR no meu iPhone 15 Pro. Não vejo isso com frequência, então a tela parece muito mais viva
    Muito legal

    • É bonito e bem suave, mas assinatura de app de dinâmica dos fluidos, sério?

  • Pela primeira vez, passei a valorizar de verdade a tela sensível ao toque do meu laptop

  • Me lembrou Plasma Pong
    Seria uma pena se alguém implementasse uma versão online gratuita ;)

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