Building a particle portrait in Three.js

Turning a photograph into a cloud of points is mostly a sampling problem. The rendering is the easy half.

Reading the image

Draw the photo to an offscreen canvas, read the pixels back, and keep one point per cell above a brightness threshold. Dark pixels are dropped, which is why the source needs a genuinely black background rather than a dark grey one.

Moving them

Position is computed in the vertex shader from the cell index and a time uniform, so the CPU never touches a single point. That is the difference between a few thousand particles and a few hundred thousand.

Making it feel deliberate

A scatter that returns to exactly where it started reads as mechanical. Offsetting each point’s phase slightly makes the cloud settle rather than snap.

This is sample article content. Replace it with your own writing.