A million particles and a lot of smoke
Here's the breakdown of an ethereal flow field I built with a new creative coding tool I've been working on.
It starts with a compute shader. One million particles packed into a dense ball, pushed around by curl noise, drawn as tiny additive sprites, then fed through several layers of post-processing effects.
If you want the same starting point, Fragments has the flow field technique. This piece stays on sprites rather than the mesh mode I shipped recently. The glow comes from additive sprites, not lit meshes.
Even with this many particles, and this much post-processing, we're still pushing 120fps on my laptop. I'm so impressed with what Three.js and TSL can do on WebGPU.
Feedback that builds on itself
Each layer builds on the last, and the first layer builds on itself. A feedback pass samples the previous frame so the shapes have a history and leave a trail. Without this pass you get a particle ball. With it, the field smears into smoke. It's a simple trick, but it creates a lot of depth and character. I'll be exploring this one a lot more.
Oversaturate, then bloom
Then I oversaturate the result so the brightest parts of the image blow out and bloom. The middle of the field turns into a really intense core. The rest of the wisp stays thinner because it never got that bright. It's the yang to the feedback's yin. Feedback made the smoke. Bloom gives the core its punch.
Vignette, always a good idea
People who've followed me for a while know I put a vignette on almost everything. I love how dramatic the scene gets once the edges go dark. The smoke has a place to sit instead of floating in a flat rectangle. Dark edges, bright core. Bloom and vignette are doing the same job from opposite ends, and the piece suddenly has a focal point.
Chromatic aberration into the spirit realm
The last step is a very heavy chromatic aberration. RGB splits hard. The whole thing goes dreamy and a bit wrong, which is the point. I played a lot with this one to get the look I wanted.
Tying it all together
Most of the code lives in a single compute shader. Everything after that is a chain of post-processing effects, processed into oblivion. The creative coding tool I'm building makes it extremely easy to stack and tweak this kind of chain. I've been using it every day to build things like this. Total game changer.
From left to right:
- A curled noise sim in a compute shader
- Additive sprite rendering. Three.js doing its thing
- Feedback layer
- Bloom layer
- Vignette layer
- Chromatic aberration
All of it in Three.js, TSL, and React Three Fiber, plus a ton of utilities from Fragments that you can use today. The tool itself is still in heavy development, but I'm getting really close to a proper announcement and a beta launch. More on that soon.
Fragments is turning 1!
Fragments is going on sale to celebrate the 1-year anniversary of launch (wow!) and Three.js Conf at the start of September. On September 3, it's 33% off until September 17. I'll send out an email with a code for anyone who wants to jump in.