Fireflies Meadow WebGL — Point-Sprite Swarm Simulation
About This Simulation
Fireflies Meadow renders up to 260 fireflies as GPU point sprites, each with its own random flicker frequency and phase so the swarm never pulses in unison. Their wandering paths are simulated on the CPU each frame — a gently curving random walk rather than a straight line — and streamed into a dynamic position buffer the vertex shader reads directly. Hover the cursor nearby and the swarm drifts toward it out of curiosity; press and hold, and the same force reverses, scattering them outward. Beneath it all, three parallax layers of wind-swayed grass silhouette sway independently against a star-scattered night sky, all drawn with nothing but sine waves and simple 2D noise.
Rendering
Additive Point Sprites
Motion
Randomised Wander + Cursor Steering
Background
Parallax Grass Silhouette
Swarm Size
Up to 260 Fireflies
Frequently Asked Questions
What is a point sprite?
A point sprite is a single vertex rendered as a small square (or, with a discard test, a circle) whose size is set entirely inside the vertex shader via gl_PointSize. Each firefly in this scene is one point sprite, so hundreds of them can be drawn with a single draw call instead of hundreds of individual quads or sprite images.
How does the glow use additive blending instead of real bloom?
The canvas is set to additive blending (gl.ONE, gl.ONE), so overlapping firefly glows add their brightness together rather than one covering the other. Where several fireflies cluster, the light naturally becomes brighter and slightly desaturates toward white, mimicking the way real bioluminescent light accumulates without a separate blur or bright-pass render target.
Why does hovering attract fireflies but holding the pointer down scatters them?
Each firefly checks its distance to the cursor every frame. A gentle attraction force pulls nearby fireflies toward a hovering cursor, echoing how they are drawn to movement and warmth. Pressing down flips that same force negative and roughly doubles its strength, sending the swarm scattering outward — a simple sign flip in the steering calculation with two very different visual results.
How does each firefly flicker independently?
Every firefly is given its own random flicker seed at creation, which shifts both the frequency and the phase of a sine wave driving its brightness in the vertex shader. Because no two seeds match, the swarm never pulses in unison — some fireflies flare brightly while their neighbours are dim, then the pattern reverses moments later.
How is the grass silhouette animated without any wind physics engine?
The horizon line is drawn as three overlapping sine-wave silhouettes at different heights, frequencies and phase speeds — far, mid and near — each nudged by a slower secondary sine wave to fake gusts of wind. Layering three independently swaying silhouettes gives a sense of parallax depth using nothing but 2D trigonometry in the fragment shader.
What do the density and colour controls change?
Density controls how many of the 260 simulated fireflies are actually drawn each frame, from a sparse handful to the full swarm — all of them keep wandering in the background regardless, so switching density never causes a jump or restart. Colour switches between warm amber-gold, cool cyan-green, and a shifting rainbow palette keyed to each firefly's individual hue seed.
Why do the fireflies never fly off the edge of the screen?
When a firefly's wandering path carries it past the meadow's boundary, its position quietly wraps to the opposite edge rather than being deleted or bounced. This toroidal wrap keeps the swarm's density visually constant everywhere on screen without ever needing to spawn or remove fireflies.
What sound pairs best with the Fireflies Meadow?
Crickets or a Summer Night ambience from the Sound Mixer is the natural match. Soft Wind or Gentle Rain also pair nicely if you would like a quieter backdrop while watching the swarm drift.
Does the Fireflies Meadow work offline?
Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches the page and all assets, so the firefly swarm runs fully offline with no internet connection required.
My device is struggling — any performance tips?
Lower the Density control to Few, which reduces how many point sprites are drawn per frame while the background shader cost stays the same. Shrinking the browser window or zooming in reduces the pixel count both passes must fill. Pausing stops the render loop entirely, halting both the swarm simulation and the additive glow rendering.