DEV Community: Bayram Ali Basgul

Recolouring a t-shirt photo to any colour without losing the folds

Bayram Ali Basgul — Tue, 27 Oct 2026 16:54:42 +0000

A shop that prints t-shirts sells them in twenty colours, but it has one photo: a white tee on a hanger. Photographing every colour isn't realistic, so the product page has to make the other nineteen from that one photo. And the folds have to stay, or the shirt looks like a flat sticker.

Here's the approach I use. It's about 90 lines, a pure function over RGBA bytes, so the same code runs on a canvas in the browser and in Node at build time.

1. Decide which pixels are fabric

The photo also has a wooden hanger, maybe a label, maybe a background. Those must keep their colour. The test is simple: a fabric pixel is opaque and nearly colourless.

const FABRIC_MAX_SATURATION = 0.14;

function isFabric(data, i) {
    if (data[i + 3] < 5) return false;
    const r = data[i], g = data[i + 1], b = data[i + 2];
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    return max > 0 && (max - min) / max < FABRIC_MAX_SATURATION;
}

(max - min) / max is HSV saturation. White and grey cloth sits near 0; the hanger's wood is far above 0.14, so it's left alone.

2. Find the shirt's "true colour" level

A white shirt in a photo isn't one white. Highlights are near 255, folds are much darker. To map white to the target colour I need one reference level: the brightness that should come out as exactly the colour the customer picked.

The mean doesn't work well, because a big shadow pulls it down. I take the 70th percentile of the fabric's luminance from a histogram:

export function fabricReference(data, width, height) {
    const histogram = new Uint32Array(256);
    let count = 0;
    for (let i = 0; i < width * height * 4; i += 4) {
        if (isFabric(data, i)) {
            histogram[Math.round(luminance(data[i], data[i + 1], data[i + 2]))]++;
            count++;
        }
    }
    let seen = 0;
    for (let level = 0; level < 256; level++) {
        seen += histogram[level];
        if (seen >= count * 0.7) return level / 255;
    }
    return 1;
}

For the photo above it's 0.937. It's computed once per photo, not per colour.

3. Shade, then put the folds back

The first idea is to multiply: each fabric pixel becomes the target colour times how bright that pixel is relative to the reference.

const shade = lum / reference;
out = colour * shade;

That works for light colours. For dark ones it doesn't: multiplying a near-black colour by anything gives near-black, so the folds disappear. Left is plain multiplication, right is the version below:

The fix is to add the photo's own contrast back, and more of it the darker the target colour is:

const foldStrength = 0.55 - 0.35 * ((cr + cg + cb) / 3);
// per fabric pixel
const lum = luminance(r, g, b) / 255;
const shade = lum / reference;
const fold = (lum - reference) * foldStrength;
out[i]     = (cr * shade + fold) * 255;
out[i + 1] = (cg * shade + fold) * 255;
out[i + 2] = (cb * shade + fold) * 255;

lum - reference is positive on highlights and negative in folds, so it brightens one and darkens the other by the same amount on every channel. On pure black, foldStrength is 0.55 and the folds come back. On white it's 0.2, so light colours don't get over-contrasted. The output is a Uint8ClampedArray, so anything past 0 or 255 clamps for free.

4. One more thing: dark shirts need light ink

When the shirt changes to navy or black, a default black text colour stops being readable. I use WCAG's relative luminance on the shirt colour and call anything under 0.25 "dark":

export function isDarkShirt(hex) {
    const [r, g, b] = hexToRgb(hex).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
    return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.25;
}

Where it falls short

Heather and melange fabrics: their flecks are part of the colour, and this flattens them.
A photo of a coloured shirt: the fabric test assumes white or light grey to start with.
Anything printed on the photographed shirt gets recoloured with it if it's grey.

Using it

Because it works on plain RGBA bytes, the browser calls it with ctx.getImageData() and draws the result back with putImageData(). In Node I read the same photo with sharp's .raw() and write each colour as a file at build time. Same function, same numbers.

I wrote this for PrintBlob, a product designer for WooCommerce, where it recolours every product photo. You can try it on a t-shirt in the live demo, or make free PNG mockups of a design in every colour with the t-shirt mockup generator, which runs the same code in your browser.

This post was written with AI assistance and checked against the code it describes. The images are that code's real output on the photo shown.

Turning a flat product photo into 3D with a distance field

Bayram Ali Basgul — Tue, 20 Oct 2026 08:00:16 +0000

I needed a t-shirt preview that turns in 3D, from nothing but two photos: a front and a back, each cut out on a transparent background. No 3D model, no modelling step. Here's the approach that ended up working, in four parts.

1. Get the outline from alpha

A cut-out PNG already knows where the object ends. Sample the alpha channel on a grid (I use 240 points across the image) and trace the contour where alpha crosses 0.5. Marching squares does the job. The shape now ends exactly where the photo ends, so the texture always lines up with the geometry.

2. Turn distance into thickness

A flat outline extruded straight looks like a cookie. What made it read as fabric was a distance field: for each point inside the outline, the distance to the nearest seam. I compute it once with an exact Euclidean distance transform (Felzenszwalb and Huttenlocher's separable one), then blur the inside a little so the surface doesn't crease along the middle. The outline itself stays at zero.

Then thickness is two terms added together: a rounded rim near the seam and the body filling out further in.

// d: distance to the nearest seam, as a fraction of the image width
const depthAt = (d) => {
  const st = Math.min(d / tubeRadius, 1); // the rim: a quarter circle, vertical at the seam
  const sb = Math.min(d / bodyRadius, 1); // the body: a gentle curve towards the middle
  return tube * Math.sqrt(1 - (1 - st) ** 2) + body * (1 - (1 - sb) ** 2);
};

At the seam the surface leaves vertically, like cloth rounding over a fold. Towards the middle it barely grows. For a t-shirt it tops out at about 3.2% of the image width per side. A nice side effect: narrow parts like sleeves have small distances everywhere, so they come out slim without any special handling.

3. Build the mesh on the same grid

Keep the grid points inside the outline, and add a point wherever the outline crosses a grid line so the silhouette follows the photo instead of stair-stepping. Triangulate each cell from the points it kept.

For the back, reuse the exact same points, push them the other way, and map the back photo mirrored left to right. Because both surfaces share their edge vertices, there's no seam to see through when the object turns edge-on.

If the object has real openings (sleeve ends, a hem), mark those edge segments and don't join front to back there. Everywhere else the outline is a closed seam.

4. Shade the print from the photo

If you lay a design on top, don't bake it into the texture. In the fragment shader, take the cloth's own lighting from the photo, meaning how much brighter or darker each pixel is than the fabric around it, clamp it to a sensible range (I use 0.55 to 1.12), and multiply the ink by it. Keep the ink premultiplied, or you get dark fringes where it ends:

color.rgb = color.rgb * (1.0 - ink.a) + ink.rgb * light; // ink is premultiplied

Folds now run through the print, and recolouring the cloth never touches the design.

Keeping it cheap

Load the 3D code only when someone asks for it.
Render on demand: only while the object moves, never while it's scrolled out of view.
Dispose of the geometry and textures when the view closes.
Skip the 3D option entirely on browsers without WebGL 2 or a GPU.

Where it falls short

It isn't a scan. Everything comes from the silhouette, so it works for things whose shape the outline explains, like a shirt or a bag, and the sides between front and back are inferred, not seen. Photos matter more than code: a back photo shot from a different distance shows up as a sliver along the edge, and harsh shadows make the print look blotchy.

If you've done "3D from 2D" for product previews another way, I'd love to hear what worked.

If you want to have this with one click in your e-commerce store you can check it here: PrintBlob