{"id":13523739,"url":"https://github.com/kishimisu/WebGPU-Fluid-Simulation","last_synced_at":"2025-04-01T01:33:30.031Z","repository":{"id":60139697,"uuid":"540979585","full_name":"kishimisu/WebGPU-Fluid-Simulation","owner":"kishimisu","description":"Implementation of Jos Stam's Real-Time Fluid Dynamics for Games paper using javascript as a playground for learning the WebGPU API.","archived":false,"fork":false,"pushed_at":"2023-08-28T20:37:37.000Z","size":31826,"stargazers_count":63,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-21T12:52:40.553Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kishimisu.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-09-24T22:05:59.000Z","updated_at":"2024-05-02T08:38:53.000Z","dependencies_parsed_at":"2024-01-13T22:32:20.430Z","dependency_job_id":"4d94b26c-9b52-4168-96c3-303bbbb442b2","html_url":"https://github.com/kishimisu/WebGPU-Fluid-Simulation","commit_stats":null,"previous_names":["kishimisu/webgpu-fluid-simulation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishimisu%2FWebGPU-Fluid-Simulation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishimisu%2FWebGPU-Fluid-Simulation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishimisu%2FWebGPU-Fluid-Simulation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kishimisu%2FWebGPU-Fluid-Simulation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kishimisu","download_url":"https://codeload.github.com/kishimisu/WebGPU-Fluid-Simulation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246567267,"owners_count":20798144,"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":[],"created_at":"2024-08-01T06:01:03.273Z","updated_at":"2025-04-01T01:33:25.011Z","avatar_url":"https://github.com/kishimisu.png","language":"JavaScript","funding_links":[],"categories":["Demos"],"sub_categories":["Try out WebGPU"],"readme":"# WebGPU Fluid Simulation\n\nThis is my attempt at implementing Jos Stam's [Real-Time Fluid Dynamics for Games](https://www.dgp.toronto.edu/public_user/stam/reality/Research/pdf/GDC03.pdf) paper using javascript as a playground for learning the WebGPU API.\n\n![Demo](assets/demo.gif)\n\n## Live Demo\n\nAs WebGPU is still in development, it is not yet available in release builds of recent navigators.\nIn order for this demo to run properly, you will have to enable WebGPU experimental features in your browser.\nI'll update this readme once it will be officially supported.\n\nThe simplest solution that worked for me was to download [Google Chrome Canary](https://www.google.com/chrome/canary/), then navigate to `chrome://flags` and enable `Unsafe WebGPU` \u0026 `WebGPU Developer Features` (for better security, don't navigate the web with these features on).\nOther methods can be found [here](https://developer.chrome.com/en/docs/web-platform/webgpu/#use).\n\nOnce you have WebGPU enabled, you can start [playing with the live demo](https://kishimisu.github.io/WebGPU-Fluid-Simulation/) !\n\n## Context\n\nI've already tried to create a fluid simulation a few years ago using plain javascript and no GPU, but quickly came to the limitations of intense CPU computing on the web.\n\nIt's also been some time now since I've wanted to learn WebGPU and I thought it would be the perfect opportunity to tackle back on implementing fluid simulation using the power of this new API optimized for parallel computing and graphic rendering.\n\nFor this simulation, I'm making use of compute shaders to do the calculations instead of fragment shaders that can be found in usual OpenGL/WebGL implementations.\n\n## Project Structure\n\n- `index.html` : web page containing the demo\n- `src/main.js` : simulation setup \u0026 render loop\n- `src/init.js` : initialization functions (webgpu context, render size \u0026 gui)\n- `src/utils.js` : utility wrappers to handle WebGPU buffers, uniforms and programs\n- `src/render.js` : program used to render on the canvas\n- `src/shaders.js` : WGSL strings containing each program's compute shader code\n- `libraries/` : contains the CCapture.js library for canvas recording and the dat.gui.js library for GUI elements\n\n![Symmetry Demo](assets/demo1.gif)\n\n## References\n\n### Fluid Simulation References\n- Jos Stam Paper : https://www.dgp.toronto.edu/public_user/stam/reality/Research/pdf/GDC03.pdf\n- Nvidia GPUGem's Chapter 38 : https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-38-fast-fluid-dynamics-simulation-gpu\n- Jamie Wong's Fluid simulation : https://jamie-wong.com/2016/08/05/webgl-fluid-simulation/\n- PavelDoGreat's Fluid simulation : https://github.com/PavelDoGreat/WebGL-Fluid-Simulation\n\n### WebGPU References\n- WebGPU Official Reference : https://www.w3.org/TR/webgpu/\n- WGSL Official Reference : https://www.w3.org/TR/WGSL/\n- Get started with GPU Compute on the web : https://web.dev/gpu-compute/\n- Raw WebGPU Tutorial : https://alain.xyz/blog/raw-webgpu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishimisu%2FWebGPU-Fluid-Simulation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkishimisu%2FWebGPU-Fluid-Simulation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishimisu%2FWebGPU-Fluid-Simulation/lists"}