Introduction

It goes without say that this may be one of the coolest effects, and has been a staple in Webgl for years now. For my fluid dynamics simulation, I utilized React Three Fiber and Drei. Although I'm not a math expert, grasping the core concepts of fluid dynamics was incredibly helpful. This setup involved defining various constants, which are managed by uniforms directly within the shaders of the render pipeline. Here’s a breakdown of how I organized the shaders involved in this simulation:

Fluid Dynamics Shader Setup

Vertex Shader

The vertex shader prepares the geometry of the fluid, passing necessary information to the fragment shaders, although in this case the vertex shader just provides calculations for each neighboring pixel in the UV.

Fragment Shaders

• clearFrag: Clears the previous frame's data to initialize the fluid simulation.
• curlFrag: Computes the curl of the velocity field, capturing the rotational motion of the fluid.
• divergenceFrag: Calculates the divergence of the velocity field, identifying sources and sinks within the fluid flow.
• gradientSubtractFrag: Updates the velocity field by subtracting pressure gradients, helping maintain incompressibility in the fluid.
• pressureFrag: Updates the pressure field based on the divergence of the velocity, enforcing the incompressibility condition.
• splatFrag: Applies external forces (like splashes or interactions) to the fluid simulation, modifying the velocity based on user interactions.
• advectionFrag: Advances the fluid's state using its velocity, ensuring realistic motion as it evolves over time.
• vorticityFrag: Computes the vorticity, or local spinning motion, of the fluid, enhancing the simulation's realism.

FXAA Shader

To enhance visual quality, I included a Fast Approximate Anti-Aliasing (FXAA) shader, which helps smooth out jagged edges, improving the overall resolution of the rendered output.

Final Output

Once each of these shaders processes the data, the final main fragment shader blends the effects of all the previous shaders, producing a cohesive and visually appealing fluid dynamics simulation. This combination allows for dynamic and interactive fluid movements that can respond to user inputs and environmental factors in real-time.

Understanding Frame Buffer Objects (FBO)

Frame Buffer Objects (FBOs) are crucial for off-screen rendering in WebGL. They allow you to render your scenes or effects to textures instead of directly to the screen. Here's how they fit into the fluid dynamics setup:

• Off-Screen Rendering: By using FBOs, you can render intermediate results (like velocity fields, pressure maps, etc.) without displaying them immediately. This is essential for fluid simulations where each frame's computation relies on the results from previous frames.
• Texture Output: Each shader can output its results to a texture attached to the FBO. This texture can then be used as input for subsequent shader passes, allowing for complex multi-pass rendering techniques.
• Performance Optimization: FBOs help optimize performance by minimizing the need for additional draw calls and enabling advanced effects like post-processing and off-screen rendering.

Further Reading/Resources

• NVIDIA | Real-Time Simulation and Rendering of 3D Fluids
• Mofu | Stable Fluids with three.js
• 29a.ch | WebGL Fluid Simulation
• @MartinRGB | stable_fluid_r3f

Conclusion

In conclusion, by leveraging React Three Fiber and FBO Drei for my fluid dynamics simulation, I was able to create a visually stunning and responsive environment. The combination of well-structured shaders and the power of FBOs played a significant role in achieving real-time fluid dynamics that I hope inspires others to explore the depths of computer graphics.