Technologie de simulation de fluides WebGL

 (paveldogreat.github.io)
2 points par GN⁺ 2024-12-30 | 1 commentaires | Partager sur WhatsApp
  • Une application de simulation de fluides qui s’exécute directement dans le navigateur, permettant à l’utilisateur d’ajuster la qualité du rendu et les valeurs liées aux calculs physiques
  • Permet de modifier des paramètres de simulation comme density diffusion, velocity diffusion, pressure, vorticity et splat radius, principalement autour de quality et sim resolution
  • Les effets visuels sont divisés en shading, colorful, Bloom et Sunrays, avec des réglages détaillés distincts pour Bloom et Sunrays
  • Le déroulement de l’exécution se contrôle avec paused et Random splats, tandis que la zone Capture gère la couleur d’arrière-plan, le fond transparent et les captures d’écran
  • Des éléments Github, Twitter, Discord et application mobile sont également proposés pour accéder à des ressources externes à la simulation

Paramètres de réglage de la simulation

  • La page WebGL Fluid Simulation propose un écran d’exécution de simulation de fluides accompagné du message « Try Fluid Simulation app! »
  • Paramètres de base ajustables par l’utilisateur :
    • quality
    • sim resolution
  • Les valeurs de simulation comprennent les éléments suivants :
    • density diffusion
    • velocity diffusion
    • pressure
    • vorticity
    • splat radius

Exécution et effets à l’écran

  • Options liées à l’exécution :
    • Case à cocher shading
    • Case à cocher colorful
    • Case à cocher paused
    • Random splats
  • Réglages Bloom :
    • Case à cocher enabled
    • intensity
    • threshold
  • Réglages Sunrays :
    • Case à cocher enabled
    • weight

Capture et éléments externes

  • Réglages de Capture :

    • background color

      • Case à cocher transparent
      • take screenshot
      • En bas figurent des éléments Github, Twitter, Discord et mobile app

À lire aussi

1 commentaires

 
GN⁺ 2024-12-30
Avis sur Hacker News

  • J’ai forké ça et inversé le modèle d’éclairage, en passant du mélange additif au mélange soustractif ; d’un coup, ça a commencé à ressembler à de l’encre dans l’eau
    https://observablehq.com/@tomlarkworthy/ink

    • Quand j’ai créé une simulation de fluide, c’est aussi la première chose que j’ai faite. J’ai longtemps creusé la question de savoir comment obtenir, dans des créations numériques, des effets de couleur soustractive, c’est-à-dire la richesse des pigments et cette impression qui change avec la lumière, sans grand succès la plupart du temps ; mais dès que l’occasion se présente, j’essaie quand même
    • À quel point serait-ce difficile d’empêcher l’encre de disparaître ? J’aimerais l’intégrer dans une appli de dessin, donc tout conseil serait vraiment utile
    • Ça vaudrait aussi le coup d’envisager de passer l’encre en couleur CMYK : mutable ink = [255, 0, 255]

  • Je ne sais pas pourquoi, mais à chaque fois que je vois ce genre de simulation physique haute résolution ou d’effets visuels, c’est là que je ressens le plus concrètement toute la quantité de traitement qui se déroule dans le CPU/GPU
    Plus tôt aujourd’hui, j’ai regardé une vidéo de 2 minutes en vue cockpit d’un avion déclarant une urgence et s’engageant sur la piste d’un aéroport ; ce n’est qu’à la fin que j’ai compris que ce n’était pas une vraie vidéo, mais un simulateur ou un jeu vidéo. Et pourtant, voir des couleurs tourbillonner à l’écran me frappe encore davantage. Étrange

  • Parmi les anciennes implémentations, j’ai toujours eu une affection particulière pour cette version. En basse résolution, elle a une esthétique de netrunner cyberpunk, et en haute résolution elle dégage quelque chose de presque spirituel, fantomatique : https://haxiomic.github.io/projects/webgl-fluid-and-particle...

    • Il y a aussi un commentaire de 2020 où le créateur de ce projet parle de celui-ci ; intéressant. Je me suis toujours demandé quel était le lien entre les deux, ou s’ils avaient appliqué indépendamment la même prémisse : https://news.ycombinator.com/item?id=24065857
    • J’aime bien jouer avec la qualité UltraHigh et les itérations du solveur réglées sur 1. Ça me rappelle la sensation, en cuisine, d’incorporer lentement un ingrédient dans un autre, par exemple mélanger de la farine dans des œufs quand on fait des pâtes

  • Quelqu’un connaît d’autres exemples de simulation d’eau en WebGL ? Je cherche comment implémenter des vagues avec de l’écume
    J’aime beaucoup la démo Pool d’Evan
    https://madebyevan.com/webgl-water/

    • J’ai lu quelque part que ce n’était pas vraiment une simulation, mais plutôt un ensemble de trucs astucieux pour donner l’apparence de l’eau, d’une piscine et d’objets dedans

  • Si le rendu de fluides vous intéresse, Sebastian Lague a récemment fait une vidéo sur le sujet : https://www.youtube.com/watch?v=kOkfC5fLfgE

    • Les vidéos de Lague sont constamment étonnantes et inspirantes. Je les recommande vivement à quiconque s’intéresse à ce domaine

  • oimo.io propose aussi quelques simulations de fluides WebGL mentionnées dans ce fil
    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/

  • On dirait que ça produit vraiment du HDR sur mon iPhone 15 Pro. Ce n’est pas si fréquent, et l’écran paraît beaucoup plus vivant
    Vraiment superbe

    • C’est joli et très fluide, mais un abonnement à une appli de dynamique des fluides, vraiment ?

  • C’est la première fois que j’apprécie vraiment l’écran tactile de mon ordinateur portable

  • Ça me rappelle Plasma Pong
    Ce serait vraiment dommage que quelqu’un en fasse une version gratuite en ligne ;)

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