16.7K ·GitHub
What is this?
It is an interactive WebGL demo that simulates fluid dynamics in real time, letting you swirl colorful liquid-like effects with your mouse or finger directly in the browser.
It is an interactive WebGL demo that simulates fluid dynamics in real time, letting you swirl colorful liquid-like effects with your mouse or finger directly in the browser.Is this a library I can integrate, or just something to play with?It is a self-contained interactive demo, not a packaged library - the repo is the simulation code plus a page you open and play with directly.
It is a self-contained interactive demo, not a packaged library - the repo is the simulation code plus a page you open and play with directly.How do I try it?Open the hosted demo linked in the README to play with it instantly, or clone the repository and open the page locally if you want to tinker with the code.
Open the hosted demo linked in the README to play with it instantly, or clone the repository and open the page locally if you want to tinker with the code.Do I need to install anything special to run it?No installs, accounts, or API keys are needed - just a browser with WebGL support, since the simulation runs entirely client-side using GPU shaders.
No installs, accounts, or API keys are needed - just a browser with WebGL support, since the simulation runs entirely client-side using GPU shaders.Does it work smoothly on every device?Performance depends on the device's WebGL support; it is designed to work even on mobile, but very old browsers without WebGL won't be able to run it at all.
Performance depends on the device's WebGL support; it is designed to work even on mobile, but very old browsers without WebGL won't be able to run it at all.Does it need a powerful graphics card?It relies on WebGL/GPU shaders to solve the fluid math each frame, but it is lightweight enough to run on integrated graphics and mobile GPUs.
It relies on WebGL/GPU shaders to solve the fluid math each frame, but it is lightweight enough to run on integrated graphics and mobile GPUs.What are the Navier-Stokes equations it's based on?They are the equations describing how fluids move; this project solves a simplified version of them on the GPU every frame to produce the swirling color effects.
They are the equations describing how fluids move; this project solves a simplified version of them on the GPU every frame to produce the swirling color effects.Can I reuse this fluid effect on my own website?Yes - since the code is MIT-licensed and self-contained, you can copy the shader and simulation logic into your own site and adapt it for custom visual effects.
Yes - since the code is MIT-licensed and self-contained, you can copy the shader and simulation logic into your own site and adapt it for custom visual effects.Why does the mouse interaction also work with touch on mobile?The input handling treats touch and pointer events the same way the mouse is handled, so swiping a finger stirs the fluid just like moving the mouse does on desktop.
The input handling treats touch and pointer events the same way the mouse is handled, so swiping a finger stirs the fluid just like moving the mouse does on desktop.What are similar projects?natural-disasters, LinearAbilityExtThreeJS, Jelly-Baby, tidewater, paper.js, zdog, Viscose-carousel, multipleWindow3dScene
natural-disasters, LinearAbilityExtThreeJS, Jelly-Baby, tidewater, paper.js, zdog, Viscose-carousel, multipleWindow3dSceneWhich topics is it in?physics-simulation, mobile-web, demo, shaders, creative-coding, computer-graphics, interactive, canvas, simulation, webgl, rendering, gpu-acceleration
physics-simulation, mobile-web, demo, shaders, creative-coding, computer-graphics, interactive, canvas, simulation, webgl, rendering, gpu-acceleration