flag-cloth

Performance

Keep simulation cost, fill rate, and shading work proportional to what viewers can see.

The default 32 × 20 grid, two substeps, and six iterations creates 693 particles and 3,890 precomputed constraints. For a more aggressive performance profile, test one substep before lowering the grid. Increase one dimension at a time while profiling.

Highest-impact controls

  1. Pixel ratio: fill rate often costs more than the solver on large canvases.
  2. Segment count: particles, triangles, constraints, wind work, and normal work all grow.
  3. Constraint iterations and substeps: these multiply solver work directly.
  4. Shadows and normal frequency: use the performance preset for grids or multiple flags.

Lifecycle work already handled

  • Fixed timestep and capped frame deltas
  • Page visibility and optional viewport pausing
  • Resize only when dimensions change
  • Typed arrays and precomputed endpoints
  • No temporary vectors in particle, triangle, or constraint loops
  • Animation cancellation, listeners, observers, textures, programs, and buffers disposed on destroy

The debug panel is opt-in. It measures FPS, simulation time, render time, particles, constraints, and draw calls; do not use its number as a refresh-rate target because browsers normally synchronize animation to the display.

On this page