When Matsuoka’s WebGPU-powered water simulations began making waves on X, they amazed builders and graphics lovers alike with their breathtaking realism and unimaginable efficiency. These simulations aren’t simply stunning—they’re a showcase of what’s doable with WebGPU. Naturally, we needed to know extra. So, we invited him to share the methods behind these mesmerizing simulations and the way WebGPU is pushing the boundaries of what’s doable within the browser!
Over the previous few months, I’ve carried out two fluid simulations utilizing WebGPU: WebGPU-Ocean and WaterBall. On this article, I wish to share some insights and methods I gained whereas implementing them.
Whereas growing these two simulations, I persistently targeted on two key elements:
- The simulation have to be extremely performant.
- My aim is to implement large-scale fluid simulations that run easily in browsers throughout as many gadgets as doable. They need to carry out effectively on laptops with built-in graphics (iGPU), and ideally, they need to additionally run properly on lower-end gadgets, akin to my six-year-old iPad Air 3!
- The visualization have to be visually interesting.
- Even when the simulation performs exceptionally properly, poor visualization can fully break the expertise. Due to this fact, I have to rigorously choose and implement a rendering methodology that enhances the fluid’s visible enchantment.
Trying again, I can confidently say that these targets have been efficiently achieved! The primary was completed utilizing MLS-MPM (Shifting Least Squares Materials Level Technique) carried out with WebGPU, whereas the second was achieved by means of a rendering method known as Display screen-Area Fluid Rendering. On this article, I’ll present an in depth rationalization of those strategies.
Fast Tour of My Initiatives
Earlier than diving into the main points of fluid simulation, let’s briefly evaluation the 2 fluid simulations I’ve carried out up to now.
The primary venture is WebGPU-Ocean (GitHub Repository):
The second is WaterBall (GitHub Repository):
After studying this text, I feel you’ll have a greater understanding of what’s taking place inside these simulations.
Fluid Simulation: Physics
There are lots of completely different strategies for simulating fluids, usually categorized into three approaches.
Particle-based approaches
- Fluids are represented as a set of particles, with their bodily habits simulated by means of the motion of those particles.
- Examples: SPH (Smoothed Particle Hydrodynamics), MPS (Shifting Particle Semi-Implicit) methodology
Grid-based approaches
- Fluids are simulated utilizing a grid that divides area into small, uniform cells. These approaches are notably efficient for simulating gases.
- Examples: VOF (Quantity of Fluid) methodology
Hybrid approaches combining particle-based and grid-based strategies
- Some strategies combine each particles and grids to leverage the benefits of every.
- Examples: FLIP (Fluid Implicit Particle), MPM (Materials Level Technique)
Right here, I’ll clarify SPH, a classical particle-based strategy, and MLS-MPM, a comparatively new hybrid strategy. Please notice that this might be a really temporary rationalization for simplicity. If you wish to be taught extra, I like to recommend watching Coding Journey: Simulating Fluids for SPH and studying the MPM Information for (MLS-)MPM.
SPH (Smoothed Particle Hydrodynamics)
SPH (Smoothed Particle Hydrodynamics) is a well known particle-based methodology for fluid simulation, the place the fluid is represented as a set of particles. Since its introduction to interactive fluid simulation within the seminal paper Particle-Primarily based Fluid Simulation for Interactive Purposes by Müller et al. in 2003, SPH has been extensively utilized in many purposes.
A single simulation step of SPH proceeds as follows:
- Calculate the density and stress of every particle by summing the densities of close by particles inside a set distance.
- Compute forces akin to stress drive and viscosity drive by summing the contributions of close by particles. Exterior forces are additionally included on this step.
- Carry out integration utilizing the forces calculated within the earlier step and replace the particle positions accordingly.
Probably the most computationally costly process within the SPH methodology is the neighborhood search, which identifies close by particles. A brute-force search requires quadratic time relative to the variety of particles, making it very gradual. To speed up this course of, numerous optimization methods have been proposed. Utilizing WebGPU, I carried out a quick neighborhood search algorithm on the GPU based mostly on the strategy offered within the slide FAST FIXED-RADIUS NEAREST NEIGHBORS: INTERACTIVE MILLION-PARTICLE FLUIDS. This considerably improved the closest neighbor search efficiency in comparison with brute-force strategies, enabling real-time simulation of roughly 30,000 particles on an iGPU.
Nevertheless, I used to be not happy with this efficiency since my aim was to match the effectivity of Fluid Particles by David Li, which achieves real-time simulation of round 100,000 particles on an iGPU on my laptop computer. After additional investigation, I found that this implementation makes use of the PIC/FLIP methodology, a hybrid strategy combining particle-based and grid-based methods. I additionally realized that the first purpose for its superior efficiency (in addition to different hybrid approaches) is that it’s fully free from neighborhood searches, which was a significant bottleneck in my SPH implementation.
Due to this fact, I made a decision to shift towards implementing a hybrid strategy to realize increased simulation efficiency. Since implementing PIC/FLIP appropriately appeared fairly difficult, I opted for a unique hybrid methodology, which I’ll clarify under: MLS-MPM (Shifting Least Squares Materials Level Technique).
MLS-MPM (Shifting Least Squares Materials Level Technique)
MPM (Materials Level Technique) is an algorithm for simulating numerous supplies that may be modeled utilizing a constitutive equation. In MPM, a fabric is represented as a set of small particles known as “materials factors.” These materials factors don’t work together immediately however as an alternative affect one another not directly by means of a background grid.
It’s well-known that Disney used this algorithm for snow simulation within the film Frozen, showcasing how successfully MPM can deal with a variety of supplies.
MLS-MPM (Shifting Least Squares Materials Level Technique), proposed by Hu et al. in 2018, is a sooner model of MPM (paper right here). That is the simulation algorithm I carried out for WebGPU-Ocean and WaterBall to realize high-performance simulation.
Like different hybrid approaches, MPM and MLS-MPM simulate the motion of particles by repeatedly transferring bodily portions between particles and the grid—first by scattering information from particles to the grid (P2G stage), then gathering it again from the grid to the particles (G2P stage). Crucially, these algorithms don’t require neighborhood searches, since data is exchanged through the grid moderately than by means of direct particle-to-particle interactions, as seen in particle-based strategies. In consequence, these algorithms are anticipated to be considerably sooner than SPH, the place neighborhood search was a significant bottleneck in my implementation.
Now, let’s study how MLS-MPM, carried out in WebGPU, improves simulation efficiency in comparison with SPH. The simulation runs on an iGPU on an AMD Ryzen 7 5825U.
The distinction is clear! Ultimately, we’ve achieved real-time simulation of 100,000 particles on an iGPU, because of MLS-MPM.
Fluid Simulation: Rendering
Now that we now have a quick fluid simulation, let’s transfer on to rendering the fluid. Broadly, there are two important strategies for real-time fluid rendering based mostly on particle information: Marching Cubes and Display screen-Area Fluid Rendering. Beneath is a short overview of those strategies.
Marching Cubes
- A mesh representing the fluid floor is generated from the particle information and used for rendering.
- Execs: The computational value stays comparatively unaffected by will increase in rendering decision.
- Cons: Low mesh decision can lead to visible artifacts.
Display screen-Area Fluid Rendering
- In contrast to Marching Cubes, this methodology performs all the rendering course of in display area with out establishing a mesh.
- Execs: Permits the real-time technology of a clean and clear fluid floor.
- Cons: Computational value will increase quickly with increased rendering decision.
For WebGPU-Ocean and WaterBall, I selected Display screen-Area Fluid Rendering because the rendering methodology. This determination was primarily influenced by the beautiful rendering outcomes showcased within the GDC 2010 slide. Beneath, I present a extra detailed rationalization of this methodology.
Display screen-Area Fluid Rendering
Display screen-Area Fluid Rendering (abbreviated as SSFR under) is a comparatively new method for rendering fluids in real-time. In SSFR, all the rendering course of is carried out in display area with out producing a mesh. Every step of SSFR is described under. (Word: For a extra in-depth understanding of this methodology, I like to recommend studying the GDC 2010 slide and the Technical Implementation Particulars within the Babylon.js documentation.)
Step 1: Render the depth of every particle
Step 2: Render the thickness of every particle utilizing additive mixing
Step 3: Apply smoothing to the depth map and thickness map utilizing filters such because the Bilateral Filter and Gaussian Filter.
Step 4: Compute floor normals from the smoothed depth map.
Step 5: Utilizing floor normals, compute reflection, refraction, and specular lighting to render the ultimate outcome.
The thickness calculated within the earlier step can be utilized for refraction calculations.
In my view, fluid rendered utilizing SSFR seems very clear and visually interesting! If high-resolution output is just not a requirement, this methodology is a wonderful selection for fluid rendering.
A disadvantage of SSFR is that its computational value will increase quickly with increased rendering resolutions. To mitigate this, I restrict the rendering decision to half the window measurement in WaterBall. Moreover, saharan (@shr_id) talked about in their article (Japanese) that they use Marching Cubes as an alternative of SSFR for fluid rendering within the VRChat World as a result of want for high-resolution rendering.
First Challenge: WebGPU-Ocean
Now, let’s return to my first fluid simulation carried out in WebGPU: WebGPU-Ocean.
By now, you may most likely guess how that is carried out—sure, the simulation algorithm is MLS-MPM, and the fluid is rendered utilizing Display screen-Area Fluid Rendering. You possibly can toggle between simulation algorithms to match the efficiency variations between MLS-MPM and SPH. (Word: On Mac, switching to SPH seems to freeze the simulation.)
Second Challenge: WaterBall
As a follow-up venture to WebGPU-Ocean, I carried out the following fluid simulation: WaterBall.
The inspiration for this venture got here from the video under. It made me actually need to create one thing related that permits real-time interplay!
The excellent news is that this simulation runs easily even on my six-year-old iPad Air 3!
The simulation algorithm and rendering methodology are primarily the identical as in WebGPU-Ocean, however I carried out some rendering enhancements to make it look extra visually hanging.
Regulate particle measurement based mostly on density
- In the usual implementation of SSFR, all particles are rendered on the identical measurement. Nevertheless, this seems considerably unnatural, as actual water droplets differ in measurement.
- To enhance realism, I modify every particle’s measurement based mostly on its density obtained from the simulation, making remoted particles seem smaller.
Stretch particles within the path of their velocity
- Rendering all particles as circles works properly, however stretching them based mostly on their velocity provides a way of movement and makes the simulation seem extra dynamic.
Edging
- When rendering the fluid, edges are highlighted at depth discontinuities. This enhances the visibility of fluid circulate and droplets, making the movement extra distinct.
I discovered these methods by carefully observing simulations and finding out the supply code by saharan (@shr_id), a grasp of real-time physics simulation in browsers. An enormous because of them!
Conclusion
By combining MLS-MPM for simulation and Display screen-Area Fluid Rendering for visualization, it’s doable to realize real-time, high-quality fluid simulations within the browser. WebGPU makes this strategy each environment friendly and sensible, permitting advanced physics to run easily even on built-in graphics.
- MLS-MPM (Shifting Least Squares Materials Level Technique), a hybrid strategy combining particle-based and grid-based strategies, was used for high-performance fluid simulation. By implementing this methodology with WebGPU, real-time simulation of ~100,000 particles on an iGPU is now doable.
- Display screen-Area Fluid Rendering was employed to render a clear and dynamic fluid floor.
- Utilizing MLS-MPM and Display screen-Area Fluid Rendering, I developed the next fluid simulations:
In my view, because of compute shader assist in WebGPU, implementing physics simulations for browsers utilizing GPGPU has develop into extra accessible than ever. For example, implementing the P2G stage in MPM utilizing WebGL could be difficult, because it requires additive mixing to scatter particle information to the grid. In distinction, WebGPU makes this course of extra intuitive by offering atomicAdd within the compute shader. Equally, I consider many different simulation algorithms have develop into simpler to implement because of WebGPU.
At the moment, WebGPU assist remains to be restricted in some browsers. Nevertheless, as adoption grows, we are able to anticipate to see much more thrilling physics simulations operating within the browser. Hopefully, at some point, browser-based physics simulations will rival these created with highly effective engines like Unreal Engine!
