Dilmer Valecillos published a Unity VFX particle study that is exactly the kind of thing you should not scroll past if you build particle systems for a living: suns, flames, plasma structures, all with that dense, rich quality Unity's VFX Graph produces when someone knows what they are doing. I decided to find out how far a WebGL particle system could go toward the same visual language. Not a port, the pipelines are too different for that word to mean anything, but an honest interpretation, built in Three.js over four rounds. This is the write up of what transferred, what had to be reinvented, and what the browser still cannot fake.
Two pipelines, two philosophies
The gap to understand first: VFX Graph is a GPU simulation authoring environment sitting on top of an HDR pipeline. Millions of particles, accumulation into high dynamic range buffers, bloom that feeds on that range, all of it composable in a node graph. The web gives you none of that for free. You build the simulation yourself in shaders, you manage your own render targets, and the default particle budget that feels responsive across devices is maybe a tenth of what a desktop Unity scene shrugs at.
That constraint shaped the whole study. The architecture I landed on runs GPU simulation with particles rendered as instanced soft quads, stretched along their velocity so fast particles read as streaks of energy instead of dots. Everything draws into offscreen accumulation buffers with temporal feedback, meaning each frame inherits a faded copy of the last, then blur and compositing passes build the glow. Where Unity gets density from particle count, the web version gets it from accumulation: fewer particles, remembered longer.
Concretely, every preset runs the same frame skeleton, and only the forces, ramps, and blend settings change between them:
each frame:
1. simulate positions and velocities update on the GPU
2. draw instanced quads, stretched by velocity, additive
3. accumulate composite over last frame * fade (temporal feedback)
4. glow downsample + blur the accumulation buffer
5. composite accumulation + glow + preset color ramp to screenThe fade factor in step three is the soul of the whole system. Push it high and trails become plasma but motion smears into mud. Pull it low and the structure sharpens but density collapses back into visible dots. Nearly every preset in the study ended up being tuned around that single number first, and everything else second.
Round one: suns
The first presets were the Sun and Sun Movement examples: a churning spherical mass shedding particles along magnetic-looking paths. The web version came out lighter and more exposed than the original, with the particle structure still visible where Dilmer's version reads as continuous plasma. That difference became the recurring theme of the whole study. HDR accumulation hides individual particles inside glow; a browser-budget system shows its skeleton, so the choreography of the particles has to be beautiful on its own, because the audience can see it.
Round two: fire, and the papers that fixed it
Fire humbled me twice. The first attempt treated it as a particle emission problem, spawn at the base, rise, fade, and it looked like every mediocre fire effect on the internet. The fix came from an unexpected direction: production research papers. Reading "Structural Modeling of Flames for a Production Environment" reframed fire as a controllable visual structure rather than an emission statistic, so the rebuilt version grew simplified flame spines with tapering profiles, procedural turbulence and flicker, and particles sampled through the whole flame volume instead of only streaming up from the bottom.
The second pass borrowed from "Physically-Based Realistic Fire Rendering": temperature-based color ramps instead of hand-picked oranges, soot-like density shaping the opacity, a forward-scattering style glow, and a subtle heat distortion pass over the background. The honest verdict: the result sometimes feels closer to alien fire than natural fire, but the quality now comes from structure, accumulation, shading, and motion rather than particle count, which is exactly the trade the browser forces you into. It is also a lesson I keep relearning: when an effect looks wrong, the fix is usually upstream of the shader, in how the thing is modeled.
Round three: space fields and carpet flames
The Space preset is a curved particle field, red and cyan regions folding into each other. The key was keeping particles attached to an invisible target structure, spiral and spherical sampling with orbital force, turbulence, and attraction balanced against each other, so the field deforms without dispersing. Pure noise scatters particles into fog; pure structure freezes them into a shape. The life is in the tension between the two, and tuning that balance taught me more about force design than any shading work in the study.
Carpet Flame went the other way: sheet-based emission from a wide base, wind bias, lift, and turbulence, with the velocity-stretched quads doing heavy lifting to make the flow read as a continuous energy surface. This round crystallized the study's second lesson: motion design matters as much as shading. A perfectly shaded particle moving wrong looks worse than a plain one moving well.
Round four: the hard ones
The final round took on the two most difficult presets. Circle Red Rays became a pulsing, morphing ring, a red core with a pink and magenta outer structure, held together by temporal accumulation and soft additive rendering, because at browser particle budgets a static ray formation just looks sparse. Three Dimensional, a flowing volumetric plasma in the original, resisted the longest: my folded-sheet rendering with layered red and magenta regions kept drifting between particle-cloud and glowing-blob, neither of which is the silky volume Unity produces. I shipped the closest iteration and kept two bonus presets that leaned into what the web version does well instead, Alien Essence and Dark Plasma Veil, original effects exploring that airy, liquid, slightly wrong material the accumulation pipeline naturally produces.
What Unity still wins, and what the web taught me
The honest scoreboard: the VFX Graph originals still have a richer, more natural plasma quality, and the reasons are structural. HDR accumulation, deeper particle budgets, and a bloom pipeline that feeds on real dynamic range are exactly the things a broadly-compatible browser build spends carefully. Closing more of the gap means better accumulation, softer sheet-based rendering, stronger color separation, and preset-specific behavior replacing anything generic, which is the direction the lab keeps moving.
Dynamic range deserves one more sentence, because it is the least visible difference and the most decisive. Unity accumulates into buffers where a bright particle can be a hundred times brighter than white, and the bloom pass mines that headroom for the rich halos the originals are known for. A standard browser pipeline tone maps a much narrower range, so glow has to be composed rather than discovered: you build the halo in passes because the physics of overexposure is not there to build it for you. WebGPU narrows this gap with float buffers becoming routine, which is half the reason the lab has a compute-shader future on its roadmap.
But the constraint was the education. When you cannot throw a million particles at a problem, you learn what actually makes an effect read: structure before count, accumulation before brightness, motion before shading. Those lessons transfer straight back into client work, where the particle budget is always smaller than the ambition, and they are the reason I recommend this kind of study to any web developer who envies the game engine showreels. The whole lab runs live at vfx-lab.dubralex.com, all presets included, and the case study with stills is in my projects. Credit where it belongs: go watch Dilmer Valecillos' original Unity study, it is the better teacher.