# paveldogreat/webgl-fluid-simulation architecture

> Architecture diagram of the GitHub repository paveldogreat/webgl-fluid-simulation, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/paveldogreat/webgl-fluid-simulation
- Repository: https://github.com/paveldogreat/webgl-fluid-simulation

## Overview

This is a browser-based WebGL fluid simulation: users interact with a canvas and adjust simulation and visual settings. The visible code shows pointer event handling, GPU-based fluid calculations, and optional bloom and sunray effects during rendering. The implementation is concentrated in one source file. Because excerpts omit portions of the runtime loop, links from pointer input to simulation updates and from rendering to the displayed canvas are not asserted.

Main entry points: [`script.js`](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js) (Fluid solver)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Interaction and controls"]
  node_pointer["Pointer input<br/>[script.js]"]
  node_settings["Simulation settings<br/>[script.js]"]
end

subgraph group_simulation["GPU simulation"]
  node_fluid["Fluid solver<br/>[script.js]"]
  node_gpu_buffers[("GPU buffers<br/>[script.js]")]
  node_shader_programs["Shader programs<br/>[script.js]"]
end

subgraph group_rendering["Rendering effects"]
  node_renderer["Renderer<br/>[script.js]"]
  node_bloom["Bloom effect<br/>[script.js]"]
  node_sunrays["Sunray effect<br/>[script.js]"]
end

node_user(("User"))

node_user -->|"moves pointer"| node_pointer
node_user -->|"adjusts controls"| node_settings
node_pointer -.->|"updates input"| node_fluid
node_settings -->|"configures solver"| node_fluid
node_fluid -->|"updates fields"| node_gpu_buffers
node_fluid -->|"dispatches passes"| node_shader_programs
node_renderer -->|"applies optionally"| node_bloom
node_renderer -->|"applies optionally"| node_sunrays

click node_pointer "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_settings "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_fluid "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_gpu_buffers "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_shader_programs "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_renderer "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_bloom "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"
click node_sunrays "https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_pointer,node_settings,node_user toneBlue
class node_fluid,node_gpu_buffers,node_shader_programs toneAmber
class node_renderer,node_bloom,node_sunrays toneMint
```

## Components

### Interaction and controls

- [Pointer input](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`
- [Simulation settings](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`

### GPU simulation

- [Fluid solver](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`
- [GPU buffers](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`
- [Shader programs](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`

### Rendering effects

- [Renderer](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`
- [Bloom effect](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`
- [Sunray effect](https://github.com/paveldogreat/webgl-fluid-simulation/blob/master/script.js): `script.js`

### Other components

- **User**

## Connections

- User → Pointer input: moves pointer (evidence: `script.js`)
- User → Simulation settings: adjusts controls (evidence: `script.js`)
- Pointer input → Fluid solver: updates input (evidence: `script.js`)
- Simulation settings → Fluid solver: configures solver (evidence: `script.js`)
- Fluid solver → GPU buffers: updates fields (evidence: `script.js`)
- Fluid solver → Shader programs: dispatches passes (evidence: `script.js`)
- Renderer → Bloom effect: applies optionally (evidence: `script.js`)
- Renderer → Sunray effect: applies optionally (evidence: `script.js`)