WebGL Fluid Simulation

Web graphics have come a long way from static images and simple CSS animations. With WebGL now supported across all major browsers, developers have access to the full power of the GPU directly from JavaScript. Yet most web experiences still rely on pre-baked animations or simple particle effects that do not respond dynamically to the environment. Fluid simulation changes that equation entirely. It produces motion that is genuinely alive, because it is governed by physics rather than scripted keyframes.

The visual impact of fluid simulation is hard to overstate. Consider the difference between a smoke effect that loops a pre-rendered video versus one that actually responds to where the user moves their mouse. The interactive version feels fundamentally different. It creates a sense of presence and agency that static or looping effects simply cannot match. This quality is increasingly important in web design, interactive art, and game development, where user engagement depends on experiences that feel responsive and real.

Beyond aesthetics, fluid simulation has practical applications across many domains. Scientific visualization tools use it to help researchers understand flow patterns in biological systems or atmospheric models. Engineering education platforms use it to demonstrate concepts like laminar versus turbulent flow. Game developers use it for water surfaces, smoke trails, and explosion effects. Data visualization designers use fluid-inspired motion to make abstract information feel intuitive and dynamic. The techniques you learn here apply across all of these contexts.

One concrete example worth considering is the work done by projects like Pavel Dobryakov's WebGL Fluid Simulation, which demonstrated that a convincing, interactive fluid simulation could run at 60 frames per second in a browser with relatively modest code.^[1] That project inspired a wave of similar experiments and showed the broader web development community that GPU-accelerated physics was not just for game engines anymore. It was accessible, deployable, and visually stunning.

The timing is also right from a technology standpoint. WebGL 2.0 is now widely supported, bringing with it floating-point texture formats, multiple render targets, and other features that make fluid simulation significantly more practical. WebGPU is emerging as the next step, offering even more direct access to GPU compute capabilities. Understanding fluid simulation in WebGL today puts you in an excellent position to take advantage of those newer APIs as they mature and gain adoption.

Perhaps most importantly, fluid simulation teaches you to think about computation differently. When you implement a fluid solver, you are not writing sequential logic that processes one thing at a time. You are designing massively parallel algorithms where thousands of grid cells are updated simultaneously. That mental model, once internalized, makes you a better GPU programmer across every domain, not just fluid simulation.

To understand why WebGL is such a powerful platform for fluid simulation, it helps to think about what fluid simulation actually requires computationally. At each frame, you need to update the velocity and density values at every cell in a grid. For a 512x512 simulation grid, that is over 260,000 cells. Each cell needs to sample its neighbors, perform arithmetic, and write a result. Do that naively on the CPU in JavaScript, and you will be lucky to get a few frames per second. Do it on the GPU through WebGL shaders, and you can hit 60 frames per second with room to spare.

The reason for that difference is parallelism. A modern GPU contains thousands of small processing cores designed to execute the same operation on many data points simultaneously. This architecture is called SIMD (Single Instruction, Multiple Data), and it is perfectly suited to grid-based simulation. When you write a fragment shader that updates a fluid cell, the GPU runs that shader for every pixel of your render target at the same time. What would take milliseconds on the CPU takes microseconds on the GPU.

WebGL exposes this power through a relatively straightforward API. You write shaders in GLSL (OpenGL Shading Language), a C-like language that runs directly on the GPU. You pass data to those shaders through textures and uniform variables. You render to framebuffer objects to store intermediate results. The entire fluid simulation state, including velocity fields, pressure fields, and density fields, lives in GPU textures. Computation happens entirely on the GPU, with minimal data transfer back to the CPU.

This texture-based approach is one of the key insights that makes WebGL fluid simulation practical. Instead of thinking of textures as images, you think of them as two-dimensional arrays of floating-point data. A velocity field becomes a texture where each pixel stores an (x, y) velocity vector. A pressure field becomes a texture where each pixel stores a scalar pressure value. Updating the simulation means reading from one set of textures and writing to another, a pattern called ping-pong buffering that you will use extensively throughout this book.

Think of your GPU textures not as pictures, but as spreadsheets. Each cell holds a number. Your shaders are the formulas. The GPU evaluates every formula in every cell at the same time, every frame.

WebGL also benefits from being universally accessible. Unlike native graphics APIs such as Vulkan or Metal, WebGL runs in any modern browser without installation. Your fluid simulation can be shared as a URL, embedded in a webpage, or deployed as part of a web application. That accessibility is a genuine advantage for developers who want to reach broad audiences without requiring users to install anything.

There are trade-offs, of course. WebGL operates within the security constraints of the browser sandbox, which limits certain low-level optimizations. Floating-point precision can vary across hardware and drivers, which matters for numerical stability in simulations. And the API itself has some quirks that require workarounds, particularly around texture formats and extension support. This book addresses all of those challenges directly, giving you practical strategies for writing simulations that work reliably across different devices and browsers.

It is also worth noting that WebGL 2.0 significantly expanded what is possible compared to WebGL 1.0. Features like OES_texture_float becoming core, support for 3D textures, and transform feedback open up simulation techniques that were previously awkward or impossible. Where relevant, this book highlights which features require WebGL 2.0 and how to handle fallbacks for broader compatibility.

This book is structured as a progressive journey. Each chapter builds on the previous one, adding a new layer of understanding or capability to your fluid simulation toolkit. By the end, you will have assembled a complete, working fluid solver and will understand every component well enough to modify, extend, and optimize it for your own projects.

The journey begins with physics. Chapter 1 covers the foundational principles of fluid dynamics, including pressure, velocity, density, and the Navier-Stokes equations that govern how these quantities evolve over time. You do not need a physics degree to follow along. The goal is to build enough intuition about the underlying mathematics to make sense of the algorithms that follow. The chapter also introduces the concept of discretization, which is how you translate continuous physics equations into discrete grid-based computations that a computer can actually perform.

Chapter 2 shifts to the WebGL side of the equation. It reviews the essential WebGL concepts you need for simulation work, with particular focus on framebuffer objects, texture formats, and shader design patterns. Even if you have WebGL experience, this chapter is worth reading because it establishes the specific patterns and conventions used throughout the rest of the book.

Chapters 3 through 7 form the core of the book, covering the main components of a fluid solver in detail:

• Chapter 3 walks through building your first complete fluid solver, establishing the overall pipeline architecture and giving you a working system to experiment with from the start.
• Chapter 4 covers advection, the process of moving fluid quantities through the velocity field. This is where the fluid actually flows, and getting it right is essential for visual quality.
• Chapter 5 tackles pressure projection, the step that enforces incompressibility and prevents your fluid from compressing or expanding unrealistically.
• Chapter 6 addresses diffusion and viscosity, which control how quickly velocity and density spread through the fluid and determine whether it behaves like water, smoke, or honey.
• Chapter 7 covers forces and interactions, including how to apply gravity, wind, and user input, and how to handle collisions with solid boundaries.

Chapter 8 focuses on rendering. A physically accurate simulation is only as good as its visual output, and this chapter covers techniques ranging from simple color mapping to particle systems to more advanced lighting effects. You will learn how to transform raw simulation data into visuals that are genuinely compelling.

Chapter 9 addresses performance optimization, which is critical for real-world deployment. You will learn how to manage simulation resolution, control timesteps, handle memory efficiently, and profile your simulation to find and fix bottlenecks. The techniques here are what separate a demo that works on a high-end desktop from one that runs smoothly across a range of devices.

Chapter 10 explores advanced topics including multi-phase fluids, turbulence modeling, adaptive grids, and a look ahead at WebGPU and compute shaders. These topics extend the core solver in directions that open up more sophisticated and visually interesting simulations. The book closes with a conclusion that maps out paths for continued learning, and an appendix containing shader templates, mathematical references, and a troubleshooting guide you can return to whenever you hit a snag.

This book is written for intermediate web developers and graphics programmers. It assumes you are comfortable with JavaScript and have at least a basic familiarity with WebGL. You should know what a shader is, understand the difference between vertex and fragment shaders, and have some experience creating WebGL programs, even simple ones. If you have never written a WebGL program before, spending a few hours with an introductory WebGL tutorial before starting this book will make the early chapters much smoother.

On the mathematics side, you should be comfortable with basic linear algebra, specifically vectors and vector operations like dot products and cross products. Familiarity with partial derivatives is helpful but not strictly required. The book explains the mathematical concepts it uses in plain language, with enough context to follow the reasoning even if your calculus is rusty. What matters more than mathematical fluency is a willingness to sit with an equation long enough to understand what it is saying physically, not just symbolically.

Here is a practical checklist of what you should have in place before diving in:

• A modern browser with WebGL 2.0 support (Chrome, Firefox, Edge, or Safari 15+)
• A code editor you are comfortable with (VS Code is a popular choice)
• A local development server for serving HTML and JavaScript files (the live-server npm package or Python's http.server module both work well)
• Basic familiarity with GLSL syntax, including variable types like vec2, vec4, and sampler2D
• Comfort reading and writing JavaScript ES6 or later

You do not need any special hardware. A laptop with integrated graphics is sufficient for most of the simulations in this book, though a dedicated GPU will give you more headroom for higher resolutions and more complex effects. The performance optimization chapter will help you tune your simulation to run well on whatever hardware you have available.

In terms of how to use this guide, the recommended approach is to read each chapter in order and implement the code as you go. Fluid simulation is a system where all the pieces interact, and understanding each component in context makes the whole much easier to grasp than jumping around. That said, if you already have solid fluid dynamics knowledge, you can skim Chapter 1 and use it primarily as a reference. Similarly, if you are very comfortable with WebGL, Chapter 2 can serve as a quick review rather than a deep study.

Each chapter includes code examples that are meant to be run, not just read. The examples are written to be clear and educational rather than maximally optimized, so you can follow the logic without getting lost in performance tricks. The optimization chapter then revisits those examples and shows you how to make them faster. This two-pass approach, clarity first, then performance, is intentional. It mirrors how experienced developers actually work: get it right, then get it fast.

When you encounter a concept that does not click immediately, the best approach is usually to implement it and experiment. Change a parameter, break something intentionally, and observe what happens. Fluid simulation has a wonderful property: errors are usually visible. If your advection is wrong, the fluid will smear or explode. If your pressure projection is off, the fluid will compress or develop strange artifacts. Those visual signals are your debugging tools, and learning to read them is one of the most valuable skills this book will help you develop.

Finally, do not be discouraged if your first fluid solver does not look perfect. Numerical simulation involves a lot of subtle interactions between parameters, and getting a feel for them takes time and experimentation. The goal of this book is not to hand you a finished product. The goal is to give you the understanding to build your own, debug it when it misbehaves, and push it in directions that serve your creative and technical vision. That kind of deep ownership over a complex system is genuinely satisfying, and it starts right here.