WebGL-Technik für Fluidsimulation

 (paveldogreat.github.io)
2 Punkte von GN⁺ 2024-12-30 | 1 Kommentare | Auf WhatsApp teilen
  • Eine Fluidsimulations-App, die direkt im Browser läuft und bei der Nutzer Werte für Rendering-Qualität und physikalische Berechnungen anpassen können
  • Rund um quality und sim resolution lassen sich Simulationsparameter wie density diffusion, velocity diffusion, pressure, vorticity und splat radius ändern
  • Die visuellen Effekte sind in shading, colorful, Bloom und Sunrays unterteilt; für Bloom und Sunrays gibt es jeweils eigene Detailwerte
  • Der Ablauf wird über paused und Random splats gesteuert; im Bereich Capture geht es um Hintergrundfarbe, transparenten Hintergrund und Screenshots
  • Prüfpunkte für Github, Twitter, Discord und die mobile App sind ebenfalls platziert, sodass man zu externen Ressourcen der Simulation wechseln kann

Einstellmöglichkeiten der Simulation

  • Die Seite WebGL Fluid Simulation bietet zusammen mit dem Hinweis „Try Fluid Simulation app!“ eine Oberfläche zum Ausführen der Fluidsimulation
  • Grundlegende Optionen, die Nutzer anpassen können:
    • quality
    • sim resolution
  • Die Simulationswerte setzen sich aus folgenden Punkten zusammen:
    • density diffusion
    • velocity diffusion
    • pressure
    • vorticity
    • splat radius

Ausführung und Bildschirmeffekte

  • Optionen zur Ausführung:
    • Checkbox shading
    • Checkbox colorful
    • Checkbox paused
    • Random splats
  • Bloom-Einstellungen:
    • Checkbox enabled
    • intensity
    • threshold
  • Sunrays-Einstellungen:
    • Checkbox enabled
    • weight

Capture und externe Punkte

  • Capture-Einstellungen:

    • background color

      • Checkbox transparent
      • take screenshot
      • Unten befinden sich Prüfpunkte für Github, Twitter, Discord und die mobile app

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-12-30
Hacker-News-Kommentare

  • Ich habe das geforkt und das Lichtmodell von additiver Mischung auf subtraktive Mischung umgestellt – plötzlich sah es aus wie Tinte unter Wasser.
    https://observablehq.com/@tomlarkworthy/ink

    • Als ich meine Fluidsimulation gebaut habe, war das auch das Erste, was ich gemacht habe. Ich habe lange versucht, in digitalen Ergebnissen subtraktive Farbeffekte hinzubekommen, also die Sattheit von Pigmenten und dieses vom Licht abhängige Gefühl – meist ohne großen Erfolg. Aber wann immer sich die Gelegenheit bietet, probiere ich es wieder.
    • Wie schwierig wäre es, dafür zu sorgen, dass die Tinte nicht verschwindet? Ich würde das gern in eine Zeichen-App integrieren; Tipps wären wirklich hilfreich.
    • Man könnte auch überlegen, die Tinte auf CMYK-Farben umzustellen: mutable ink = [255, 0, 255]

  • Ich weiß nicht genau warum, aber bei solchen hochauflösenden Physiksimulationen oder visuellen Effekten wird mir am stärksten bewusst, wie viel Verarbeitung in CPU/GPU passiert.
    Vorhin habe ich ein zweiminütiges Video aus Cockpitperspektive gesehen, in dem ein Notfall gemeldet und eine Landebahn angeflogen wird; erst am Ende habe ich gemerkt, dass es kein echtes Video war, sondern ein Simulator oder Videospiel. Trotzdem beeindruckt mich der Anblick der wirbelnden Farben auf dem Bildschirm immer noch stärker. Seltsam.

  • Von älteren Implementierungen habe ich für diese Version immer eine Schwäche. Bei niedriger Auflösung hat sie eine Ästhetik wie Cyberpunk Netrunner, bei hoher Auflösung wirkt sie fast spirituell-geisterhaft: https://haxiomic.github.io/projects/webgl-fluid-and-particle...

    • Interessant: In einem Kommentar von 2020 spricht der Ersteller dieses Projekts auch über dieses Projekt. Ich habe mich immer gefragt, wie die beiden zusammenhängen – oder ob sie dieselbe Prämisse unabhängig voneinander angewendet haben: https://news.ycombinator.com/item?id=24065857
    • Ich spiele gern mit UltraHigh-Qualität und nur 1 Solver-Iteration. Es erinnert mich daran, wie man beim Kochen eine Zutat langsam in eine andere einarbeitet, zum Beispiel beim Pastamachen Mehl in Eier einarbeitet.

  • Kennt jemand weitere Beispiele für Wassersimulationen in WebGL? Ich suche nach einer Möglichkeit, Wellen mit Schaum umzusetzen.
    Ich mag Evans Pool-Demo:
    https://madebyevan.com/webgl-water/

    • Ich habe irgendwo gelesen, dass das keine Simulation ist, sondern eher ein cleverer Trick, der wie Wasser, ein Schwimmbecken und Objekte darin aussieht.

  • Wenn ihr euch für Fluid-Rendering interessiert: Sebastian Lague hat dazu kürzlich ein Video gemacht: https://www.youtube.com/watch?v=kOkfC5fLfgE

    • Lagues Videos sind durchweg erstaunlich und inspirierend. Wer sich für dieses Gebiet interessiert, dem kann ich sie sehr empfehlen.

  • Auf oimo.io gibt es auch ein paar WebGL-Fluidsimulationen, die in diesem Thread erwähnt wurden.
    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/

  • Das scheint auf meinem iPhone 15 Pro tatsächlich HDR auszugeben. Das passiert nicht oft, und dadurch wirkt der Bildschirm deutlich lebendiger.
    Wirklich cool.

    • Sieht gut aus und läuft sehr flüssig, aber ein Abo für eine Fluiddynamik-App – ernsthaft?

  • Zum ersten Mal habe ich den Touchscreen meines Laptops richtig zu schätzen gewusst.

  • Erinnert mich an Plasma Pong.
    Eine kostenlose Online-Version davon umzusetzen, wäre sicher sehr bedauerlich ;)

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