Skip to main content
Back to the graphics atlas
FoundationsSegmentation & edges Algorithm Intro

Thresholding

Convert a grayscale image into a binary mask by splitting values into foreground and background.

Segmentation & edges is nested under Foundations , so the broader pipeline usually still applies here.

graphicsimage-processingsegmentationmaskwebgpu

Interactive playground

Tweak the operator or scene live so the article connects to an immediate visual result.

Thresholding

Turn continuous grayscale values into a binary foreground/background mask.

Source image

Procedural input

WebGPU result

Thresholded mask

Controls

Adjust the neighborhood size, repeat count, or decision threshold to see how the shader compounds the result.

Checking WebGPU support...

Family

Foundations -> Segmentation & edges

Turn raw pixels into masks, boundaries, and simpler structural signals.

Builds on

1 topic

Read these first if you want the surrounding pipeline context.

Unlocks

7 next topics

Use these follow-ups when you want to keep turning the image-processing pipeline forward.

Learning paths

2

This topic appears in curated graphics progressions so the next step is obvious.

Choose this over that

Thresholding is the bridge from tone to mask

Choose thresholding when the output should become binary, then decide whether later cleanup should expand, shrink, or repair that mask.

Filtering & convolution Open topic

Gaussian Blur

Choose this when: The image should stay continuous and only needs smoothing.

Choose something else when: You need a hard mask for later morphology.

Current topic

Thresholding

Choose this when: The pipeline needs a binary split between foreground and background.

Choose something else when: A soft grayscale representation still matters downstream.

Morphology Open topic

Opening and Closing

Choose this when: The mask already exists, but noise removal or hole filling is still needed.

Choose something else when: The main missing step is still converting tone into a mask in the first place.

Segmentation & edges Open topic

Sobel Edge Detection

Choose this when: You want outlines and gradient changes, not a filled binary region.

Choose something else when: The output should represent inside vs. outside regions.

Problem

Sometimes the real question is not “what exact intensity is this pixel?”

It is:

  • foreground or background?
  • selected or not selected?
  • inside the object or outside it?

Thresholding is the simplest way to turn a continuous image into that binary decision.

Intuition

Pick a cutoff value TT.

For each pixel:

  • if the value is at least TT, output foreground
  • otherwise, output background

That gives you a binary mask.

This is why thresholding is such a pivotal topic: it moves the pipeline from continuous image space into mask space.

The basic algorithm

For a grayscale pixel value v:

if v >= T:
    output 1
else:
    output 0

That is the entire global-thresholding algorithm.

Worked example

Suppose the grayscale row is:

30 60 130 180 220

With threshold T=128T = 128:

0 0 1 1 1

Now the output is a mask instead of a smooth signal.

That mask can be passed to:

  • dilation
  • erosion
  • opening
  • closing

Where it succeeds

Thresholding works best when foreground and background are reasonably separable in intensity.

Good fit:

  • bright objects on dark backgrounds
  • masks for later morphology
  • simple segmentation problems

Poor fit:

  • heavily varying lighting
  • low contrast
  • texture-heavy scenes where intensity alone is not enough

Variants

Global threshold

One threshold value for the whole image.

Adaptive threshold

The threshold changes by region, using local context.

The global version is the foundational one, but in real scenes adaptive thresholding is often more robust.

Complexity

For an image with W×HW \times H pixels:

  • thresholding costs O(WH)O(WH)
  • memory overhead can be just one output image

It is one of the cheapest useful image-processing operators you can run.

GPU implementation note

Thresholding is embarrassingly parallel:

  • each pixel is independent
  • there is no reduction step
  • the shader only reads one source pixel and writes one destination pixel

That makes it a great first WebGPU image-processing demo.

When to choose it

Choose thresholding when:

  • the end product should be a mask
  • later stages expect binary data
  • intensity already carries most of the needed separation

Choose something else when:

  • you need smoothing, not binarization
  • the goal is edges rather than regions
  • the mask already exists and only needs repair

Key takeaways

  • Thresholding converts a continuous image into a binary mask
  • It is often the bridge between filtering and morphology
  • It is cheap, parallel, and easy to implement
  • Its weakness is that a bad threshold throws away useful information immediately
  • Good thresholding often depends on decent input quality, which is why blur frequently comes first

Practice ideas

  • Apply several threshold values to the same grayscale image and describe how the mask changes
  • Blur an image first, then threshold it, and compare with thresholding the noisy original
  • Feed a thresholded mask into dilation and erosion to see how binary-mask processing differs from grayscale filtering

Relation to other topics

  • Gaussian blur often stabilizes thresholding by reducing noise first
  • Sobel edge detection answers a different question: where boundaries are, not which region is foreground
  • Dilation and erosion operate naturally on the masks thresholding produces
  • Opening and closing repair thresholded masks when they are speckled or hole-ridden

Build on these first

These topics supply the mental model or preceding stage that this page assumes.

What this enables

Once the current operator feels natural, these are the most useful follow-up jumps.

Related directions

These topics live nearby conceptually, even if they are not strict prerequisites.

More from Segmentation & edges

Stay in the same family when you want parallel operators built from the same mental model.

Paths that include this topic

Follow one of these sequences if you want a guided next step instead of open-ended browsing.

From the blog

Pair the graphics atlas with recent writing from the broader site whenever you want a wider engineering lens.