{"id":47066921,"url":"https://github.com/jeantimex/fluid","last_synced_at":"2026-03-12T05:06:13.450Z","repository":{"id":334593530,"uuid":"1141984069","full_name":"jeantimex/fluid","owner":"jeantimex","description":"WebGPU fluid simulation using Smoothed Particle Hydrodynamics (SPH) and PIC/FLIP methods.","archived":false,"fork":false,"pushed_at":"2026-02-19T06:48:51.000Z","size":4629,"stargazers_count":29,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-02-19T11:39:26.274Z","etag":null,"topics":["fluid-simulation","webgpu"],"latest_commit_sha":null,"homepage":"https://jeantimex.github.io/fluid/","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/jeantimex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-25T19:07:14.000Z","updated_at":"2026-02-19T06:48:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jeantimex/fluid","commit_stats":null,"previous_names":["jeantimex/fluid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jeantimex/fluid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Ffluid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Ffluid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Ffluid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Ffluid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeantimex","download_url":"https://codeload.github.com/jeantimex/fluid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Ffluid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30416310,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T04:41:02.746Z","status":"ssl_error","status_checked_at":"2026-03-12T04:40:12.571Z","response_time":114,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-simulation","webgpu"],"created_at":"2026-03-12T05:06:12.828Z","updated_at":"2026-03-12T05:06:13.445Z","avatar_url":"https://github.com/jeantimex.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebGPU Fluid Simulation\n\nWebGPU fluid simulation using Smoothed Particle Hydrodynamics (SPH) and PIC/FLIP methods.\n\nThis project is ported from [Sebastian Lague](https://github.com/SebLague)'s [Fluid-Sim](https://github.com/SebLague/Fluid-Sim) Unity project and [David Li](https://github.com/dli)'s [Fluid Particles](https://github.com/dli/fluid) WebGL project. It explores various rendering and simulation techniques for real-time fluids in the browser, leveraging the power of WebGPU for both compute-heavy physics and advanced visualization pipelines.\n\n## Key Features\n\n- **GPU-Accelerated Physics**: SPH calculations (Density, Pressure, Viscosity) and PIC/FLIP grid-based solving run entirely in WebGPU compute shaders.\n- **Efficient Spatial Sorting**: Uses a parallel Prefix-Sum and Linear Grid approach to handle tens of thousands of particles at 60 FPS.\n- **Diverse Renderers**: From simple billboards to complex screen-space refraction and volumetric raymarching.\n- **Interactive Simulation**: Real-time particle interaction (push/pull), dynamic obstacle manipulation, and smoothly interpolating bounding boxes.\n- **Cross-Platform UI**: Responsive settings panel with Material Icons and performance statistics.\n\n## Project Structure\n\n### 2D Simulations\n\nhttps://github.com/user-attachments/assets/6559bca9-59b1-4ca3-9723-de5a8d6c1b95\n\n- **Canvas 2D**: A baseline implementation using the standard HTML5 Canvas API.\n  - [Live Demo](https://jeantimex.github.io/fluid/canvas2d.html)\n- **WebGPU 2D**: A 2D simulation utilizing WebGPU compute shaders for physics and a custom render pipeline.\n  - [Live Demo](https://jeantimex.github.io/fluid/webgpu2d.html)\n\n### 3D Simulations\n\nhttps://github.com/user-attachments/assets/26b13e45-8f26-4896-9a95-ab9bfaddc907\n\n[Live Demo](https://jeantimex.github.io/fluid/)\n\nThe project features several specialized 3D rendering techniques and simulation methods:\n\n#### 1. Billboard Particles (webgpu_particles)\n\nRenders fluid particles as camera-facing quads.\n\n- **Techniques**: Vertex pulling, indirect instanced rendering, and frustum culling.\n- **Shading**: Features dynamic shadow mapping and velocity-based color gradients.\n\n#### 2. Marching Cubes (webgpu_marching_cubes)\n\nExtracts a polygonal mesh from the fluid density field in real-time.\n\n- **Techniques**: GPU-based Marching Cubes algorithm, density probing, and hardware-accelerated mesh rendering.\n- **Visuals**: Classic \"metaball\" look with a solid, reflective surface.\n\n#### 3. Volumetric Raymarching (webgpu_raymarch)\n\nVisualizes the fluid by marching rays through a density field.\n\n- **Techniques**: Signed Distance Fields (SDF) approximation from particles, volumetric lighting, and refraction.\n- **Visuals**: Provides a thick, jelly-like or deep-water aesthetic with realistic light extinction.\n\n#### 4. Screen-Space Fluid (webgpu_screen_space)\n\nA high-end rendering pipeline that treats fluid as a continuous surface.\n\n- **Pipeline**:\n  1. **Depth Pass**: Renders particle depth to a texture.\n  2. **Smoothing Pass**: Applies a bilateral blur to remove \"bumpy\" particle artifacts.\n  3. **Thickness Pass**: Calculates fluid volume for light absorption.\n  4. **Normal Pass**: Reconstructs surface normals from the depth buffer.\n  5. **Foam Simulation**: Advects foam particles based on trapped air and kinetic energy.\n  6. **Composite**: Final shading with refraction, Fresnel effects, and shadows.\n\n#### 5. FLIP Fluid (webgpu_flip)\n\nA high-performance PIC/FLIP hybrid simulation with dynamic boundaries.\n\nhttps://github.com/user-attachments/assets/c08f3cfe-9c4f-4e7b-96e9-47bd4d6f9934\n\n[Live Demo](https://jeantimex.github.io/fluid/src/flip/3d/webgpu_flip/)\n\n- **Techniques**: Hybrid particle-grid solver using a staggered MAC grid for pressure projection.\n- **Red-Black Gauss-Seidel Solver**: Optimized pressure solver that converges ~2x faster than standard Jacobi iteration by updating cells in alternating parity phases.\n- **Dynamic Boundaries**: Features a smoothly interpolating bounding box that reacts to physics in real-time.\n- **Visual Decoupling**: Particle rendering radius is independent of physical spacing, allowing for highly customizable visual densities.\n\n#### 6. Unified Dashboard (webgpu_fluid)\n\nThe main entry point that allows hot-swapping between all 3D renderers while preserving the simulation state (gravity, bounds, particle positions).\n\n## Getting Started\n\n### Prerequisites\n\n- A browser with WebGPU support (Chrome 113+, Edge 113+, or Firefox Nightly with flags).\n- Node.js (v20.19.0 or higher recommended).\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/jeantimex/fluid.git\n\n# Install dependencies\nnpm install\n```\n\n### Development\n\n```bash\n# Start the Vite development server\nnpm run dev\n```\n\n### Production\n\n```bash\n# Build the project\nnpm run build\n```\n\n## Inspiration and Credits\n\n- Inspired by [Sebastian Lague](https://github.com/SebLague)'s \"[Coding Adventure: Simulating Fluids](youtube.com/watch?si=oe9BznpAUnMWUslT\u0026v=rSKMYc1CQHE\u0026feature=youtu.be)\" and \"[Rendering Fluids](https://www.youtube.com/watch?v=kOkfC5fLfgE)\".\n- Based on the Smoothed Particle Hydrodynamics (SPH) formulation for incompressible flow and the PIC/FLIP hybrid method.\n- Heavily influenced by [David Li](https://github.com/dli)'s work on real-time WebGL fluid simulations.\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeantimex%2Ffluid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeantimex%2Ffluid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeantimex%2Ffluid/lists"}