Two favourites just got an upgrade
Pixel sorting and flow fields are two of the most popular techniques in Fragments — and two of the ones I get asked about most. Thanks to the awesome work of the Three.js team, both just got huge upgrades under the hood.
I've always loved the extreme, glitchy looks you can get with pixel sorting — particularly when it comes to animation. The original sorter I made did the job, but it was both slow and limited to still images. This upgrade finally makes it practical, with a much faster bitonic sort algorithm and the ability to sort video frames independently.
For flow fields, the upgrade is a bit more subtle, but it's still a big deal. Previously, particles were always rendered as flat sprites — just camera-facing dots. Now you can render them as lit 3D geometry.
This means you can now create some really interesting, sculptural effects, where the particles have real form and can catch and reflect light.
Here's what changed, and why it's worth a look.
Pixel sorting is faster — and works on video
The original sorter did one comparison pass per frame, so a wide image took hundreds of frames to fully sort. It looked great as a slow crawl, but it wasn't practical for anything moving. Three things changed:
- Bitonic sorting. A new sort mode that fully sorts a row in far fewer passes — around
36instead of256for a 256-wide image. It gives the same look for a fraction of the work. - Single-frame convergence. The sorter can now finish an entire sort in one frame. Want the slow crawl back? Drop
passesPerFrameto a small number and watch it settle in real time. - Media and video inputs. Feed it a photo or a live video and it sorts every frame independently — so a sorted clip actually plays back as a sorted clip.
The full write-up, with code, lives in the pixel sorting technique.
Flow fields you can light
Flow field particles used to be sprites — flat, camera-facing dots. Lovely for glowing, painterly pieces, but a sprite can't catch light or point anywhere. That was mostly a limitation in Three.js and TSL, but it's now caught up.
Now there's a mesh mode:
- Particles render as real 3D geometry — little metallic boxes or gems — one instance each.
- Each one
orients along the flowandstretches with speed, so fast particles read as sharp shards. - They're
physically lit, with metalness and roughness, so you get proper highlights and reflections instead of flat colour. - Sprites are still the default, so nothing you've already made will change.
From here you can create some beautiful fields of particles. I've been heavily inspired by the work of Jaume Sanchez Elias (@thespite) here, and have had a lot of fun trying to capture some of his style:
Details and the full component are in the flow field technique.
Why this matters
Both of these started as nice to have experiments and turned into things I now use all the time. Faster pixel sorting means you can treat it as a live effect, not a render-and-wait. Lit mesh particles push flow fields from 2D glow into something that feels physical and sculptural.
These are relatively small changes to the API, but big changes to what you can make. Both are live in Fragments now.