HidImg

Hidden image · autostereogram generator · John B. Wilson · DOS 1993 → Java 2000 → JavaScript 2021 → C# → one page

Starting up… Separation — Shift —
Move the pointer over the image to read pixel values.
Use your own depth map
Drop an image here, or press Ctrl-V ▸ Ctrl-V lands here

Brightness becomes height: white comes forward, black stays at the back plane. Loads and renders in one step.

Drop a tile here, or click then Ctrl-V ▸ Ctrl-V lands here

Scaled to the repeat width and stacked down the strip, then selected as the pattern. Small, busy, high-contrast tiles hide the picture best.

Right-click a greyscale image anywhere on the web, copy it, and paste it here or straight onto the page.

These all publish greyscale height fields. HidImg reads white as nearest; if a source uses the opposite convention the picture will look punched in rather than raised, and the Invert tick box fixes it.

Ready-made libraries

  • Poly Haven Hundreds of CC0 texture sets, no login. Each asset page offers a Displacement download alongside the colour map — tileable surface relief rather than objects.
  • Easy Stereogram Builder 210 ready-made masks — its word for depth maps — plus 176 patterns, all built for stereograms specifically. Same white-is-nearest convention as HidImg.
  • Wikimedia Commons Small but freely licensed. Includes a 4,000×4,000 elevation render of the Moon's near side, which makes a fine stereogram.

Make one from any photograph

  • Upsampler Monocular depth model, no account and no watermark. Outputs white-as-nearest, so it drops straight in. Free runs are capped per day.
  • Sirv AI Studio Runs Intel's MiDaS model. Handles cluttered scenes with several depth layers well.
  • Vector Witch Brightness-based rather than AI, entirely in the browser with contrast and edge controls. Better on high-contrast graphics than on photographs.

Real terrain

  • Tangram Heightmapper Any landscape on Earth as an auto-exposed greyscale heightmap, exported straight from the browser. Wants a free API key for anything past the lowest zoom levels.

Portraits and single objects on a plain background fuse most easily. Busy scenes with many depth layers tend to read as noise — and a photo-derived map usually wants a smaller Max depth than the built-in shapes, since its gradients are far less clean.

Algorithm tuning & equations

Symmetric algorithm only. Lower values exaggerate perspective.

Sub-pixel depth interpolation

Fixes a stale-variable bug that disabled it in the Java original.

x, y run −1…1 from the centre. r and th are polar. Result 0–255.

Plotted over −π…2π as a raised ridge.

Fit to screen (in the panel above) scales the canvas to the window — handy on a phone, though scaling changes the repeat width your eyes actually see. Off is truest.

Re-render on every change

Turn off for very large canvases, then use Render.

How to see it

  1. Leave the guide dots on. Two white marks sit under the image.
  2. Look through the screen, as if focusing well behind it, until the two dots drift into three.
  3. Hold that convergence and let your attention rise into the picture.
  4. Keep your head level. Tilting breaks the fusion.

Some people can't fuse these at all. If one eye carries much more than half the visual load, or you have significant astigmatism, the effect may never appear. Solution ghosts the depth map over the stereogram so they can at least see what they are missing — and it is the quickest way to check that a picture came out the way you intended.

Which algorithm

Thimbleby builds an equivalence class per scanline and tests visibility, so a near surface properly hides what is behind it. Best silhouettes; the default.

Symmetric propagates constraints outward from the centre rather than dragging error to one side. This is the HidImg original, and the far-field constant only applies here.

Quick shift is the one-pass sweep from the DOS program — fast, with the characteristic smear trailing one way. L→R and R→L smear opposite ways.

Oversampling renders wider internally and averages back down; it kills the stairsteps on curved surfaces at the cost of time.

Every pattern is noise-driven on purpose. One carrying a horizontal period shorter than the repeat width would offer the eye a second, wrong separation to lock onto, and the picture would fuse at several depths at once — which is exactly what Test does. Its 5-pixel rules make a fine ruler for measuring the repeat and a poor stereogram. The plain dot patterns hide a picture most thoroughly; the textured ones hide it slightly less but are easier to fuse and better to look at.

Image width and height set the shape of the picture — the depth objects are drawn to those proportions. Canvas width and height only change the size of the finished stereogram; the picture keeps its shape and sits centred, with plain pattern filling any extra room. Untick Canvas = image to separate them.

Render (or the spacebar) rebuilds everything from scratch with fresh random values — a new dot pattern, and a new roll of any picture that has a random element. Changing a single control re-uses what it can, so you can compare two algorithms on the identical pattern.

What went into this page

SourceWhat it contributed
HidImgJava.class
Java 2 applet, ~2000		 Symmetric algorithm with power-of-two oversampling and the far-field constant; both quick-shift sweep directions; the dot, band, plasma, sky and test patterns; BlackHole, Cross, EggCrate, Ellipsoid, GrillWork, Kryptos, Mobius, Plasma, Pyramid, Random, Ripple, Spiral, Stairs, Terrain, Torus, YinYang; the guide dots.
Stereograms.html
JavaScript page, 2021		 Free canvas size, dot-count control, clipboard paste of a depth map, inline data-URL loading, the live pixel probe, and the equation plotter.
LoraJBWProg_StereogramStuff.cs
C# WinForms module		 The Thimbleby algorithm with hidden-surface visibility testing, linear oversampling, and forty more depth objects — Saddle through SandCastle, including the Eiffel Tower lattice and the fractal-mountain castle scene.

Everything runs client-side in one file with no dependencies and no network access. Depth objects marked in the menus by group; the red channel of the depth map carries height, as in the C# module.