{"id":26140741,"url":"https://github.com/matsuoka-601/splash","last_synced_at":"2026-01-20T02:23:35.566Z","repository":{"id":278916696,"uuid":"933783371","full_name":"matsuoka-601/Splash","owner":"matsuoka-601","description":"Fluid simulation with a white splash🌊","archived":false,"fork":false,"pushed_at":"2025-02-22T13:58:59.000Z","size":5547,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T14:37:48.372Z","etag":null,"topics":["fluid","parallel","webgpu"],"latest_commit_sha":null,"homepage":"https://splash-fluid.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matsuoka-601.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-16T17:21:46.000Z","updated_at":"2025-02-22T13:59:02.000Z","dependencies_parsed_at":"2025-02-22T14:37:52.606Z","dependency_job_id":"ef494c38-b95d-47a7-a92f-8b81257de4d5","html_url":"https://github.com/matsuoka-601/Splash","commit_stats":null,"previous_names":["matsuoka-601/splash"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matsuoka-601%2FSplash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matsuoka-601%2FSplash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matsuoka-601%2FSplash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matsuoka-601%2FSplash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matsuoka-601","download_url":"https://codeload.github.com/matsuoka-601/Splash/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242961723,"owners_count":20213316,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fluid","parallel","webgpu"],"created_at":"2025-03-11T02:57:12.658Z","updated_at":"2026-01-20T02:23:35.560Z","avatar_url":"https://github.com/matsuoka-601.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Splash\n**Splash** is a real-time fluid simulation with the following features. [Try Demo Here!](https://splash-fluid.netlify.app)\n- Smoother fluid surface thanks to **Narrow-Range Filter (PACMCGIT 2018)** by Truong and Yuksel.\n- **Shadows using ray marching** through the density field (particle mode only)\n- Improved simulation performance due to the reduced number of substeps\n- More interaction 🌊 (see the demo video)\n\n![Splash_ An Interactive Fluid Simulation in Browsers](https://github.com/user-attachments/assets/6ca3b430-3337-46c3-b378-c582b1dea5e9)\n\nThe simulation and rendering is implemented in WebGPU. The Simulation is based on an algorithm called **MLS-MPM (Moving Least Squared Material Point Method)** and the rendering is based on **Screen-Space Fluid Rendering**. For more detail, see [my article on Codrops](https://tympanus.net/codrops/2025/02/26/webgpu-fluid-simulations-high-performance-real-time-rendering/).\n## Demo Video\n[![demo video](http://img.youtube.com/vi/9C7DRSdh88g/0.jpg)](https://www.youtube.com/watch?v=9C7DRSdh88g)\n## Narrow-Range Filter for Depth Smoothing\nFor rendering fluids, I have used a Bilateral Filter for depth smoothing in past two projects ([WebGPU-Ocean](https://github.com/matsuoka-601/webgpu-ocean) and [WaterBall](https://github.com/matsuoka-601/waterball)). The fluid surface obtained with a Bilateral Filter has a decent quality, but it can have some visible artifacts.\n\nTo mitigate these artifacts, more sophisticated filters than Bilateral Filter have been proposed. The one I'm using for this project is a [Narrow-Range Filter (PACMCGIT 2018)](https://ttnghia.github.io/pdf/NarrowRangeFilter.pdf) by Troung and Yuksel. This filter aims to render a smoother and cleaner fluid surface compared to other filters, while maintaining real-time performance.\n\nThanks to a Narrow-Range Filter, I could get a more beautiful reflections \u0026 refractions like below compared to past projects where I used a Bilateral Filter. The computational overhead was not that much (I haven't done timing seriously though) compared to Bilateral Filter, which made me decide to use it.\n\n![splash-demo-long - frame at 0m5s](https://github.com/user-attachments/assets/97a703c4-1f6d-4f9c-b977-f1974ca5c7d8)\n## Shadows Using Raymarching\nWhen switching to Particle mode, you can see shadows are rendered on the surface of the fluid particles. \n\n![スクリーンショット 2025-03-22 165158](https://github.com/user-attachments/assets/891a4229-30df-4dbf-891a-7ecea6e26017)\n\nFor rendering these shadows, I'm using **ray marching** using the density grid obtained in the simulation. Additional P2G stage is performed in order to build a density grid. This P2G adds extra performance overhead, but it's not that much since only single floating point number is scattered.\n## Single Simulation Substep\nThe number of simulation steps per frame is very important for real-time performance. In the two previous projects ([WebGPU-Ocean](https://github.com/matsuoka-601/webgpu-ocean/) and [WaterBall](https://github.com/matsuoka-601/waterball)), 2 simulation steps per frame were required for stability. On the other hand, only 1 simulation step is required per frame in this simulation!\n\nIn this simulation, I use [Tait equation](https://en.wikipedia.org/wiki/Tait_equation) to calculate pressure like below. \n\n$$\n  p=k\\times \\left\\\\{ \\left(\\frac{\\rho}{\\rho_0}\\right)^\\gamma-1  \\right\\\\}\n$$\n\n($k$: stiffness of the fluid, $\\rho$: the density of the fluid, $\\rho_0$: rest density, $\\gamma$: a parameter which determines the incompressibility of the fluid)\n\n$\\gamma$ seems have a large influence on the stability of the simulation. In the past projects, I've used $\\gamma=5$, but I changed this to $\\gamma=1$ in this simulation. This appears to increase the stability of the simulation at the expense of incompressibility. To mitigate the decreased incompressibility, I increased $k$ (the stiffness of the fluid) by a lot.\n## How to run \n```\nnpm install\nnpm run serve\n```\nIf you have trouble running the sim, feel free to open an issue.\n\n`million` branch is for you who want to heat your GPU up! In this branch, `very large` mode amounts to 1.6M particles, which is a very close to the memory limit of the buffer size.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuoka-601%2Fsplash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatsuoka-601%2Fsplash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatsuoka-601%2Fsplash/lists"}