Mandelbrot Deep Zoom — Interactive Tutorial

Phase 1 — Quality

1

The Aliasing Problem

Why edges look jagged
2

Edge Detection

Finding boundaries with dFdx/dFdy
3

Adaptive Supersampling

More samples where it matters
4

Perturbation Glitches

Why pixels go wrong at deep zoom
5

Glitch Detection

Finding |Z_n| near zero
6

Rebasing

Fixing glitches with shifted references

1 of 6 steps complete

Visual Quality

The Aliasing Problem

When rendering the Mandelbrot set, each pixel gets exactly one sample. The GPU computes the iteration count at the pixel's center and assigns a color. But at the boundary of the set, the iteration count can change dramatically between adjacent pixels — creating harsh, jagged "staircase" edges.

Key Insight

The Mandelbrot boundary has infinite detail at every scale. No matter how high your resolution, one sample per pixel will always miss sub-pixel detail along the boundary. The fix: take multiple samples per pixel, but only where it matters.

This is the same problem as aliasing in any computer graphics — when a signal (the fractal boundary) has higher frequency than our sampling rate (pixel grid). The standard solution is supersampling: evaluate multiple points within each pixel and average the results. But doing this for every pixel is expensive. Adaptive supersampling detects which pixels are on the boundary and only supersamples those.

edge_strength = |dFdx(iteration)| + |dFdy(iteration)| if edge_strength > threshold: color = average of 4x4 sub-pixel samples else: color = single center sample

Iterations: 200

Samples/px: 1

Before — 1 sample per pixel

Iterations: 200

Samples/px: adaptive

After — Adaptive supersampling

Parameters
GLSL
JS

Enable adaptive AA

Show edge detection

Show sample count heatmap

Edge threshold 0.5

Lower = more pixels get supersampled (slower but smoother)

Max samples per pixel 16

Higher = sharper edges but slower rendering

Iterations 200

Color speed 0.050

// Adaptive supersampling in fragment shader

// 1. Compute base iteration at pixel center
float base_iter = mandelbrot(uv);

// 2. Detect edges using screen-space derivatives
float edge = abs(dFdx(base_iter))
           + abs(dFdy(base_iter));

// 3. If on edge, supersample with sub-pixel grid
if (edge > u_threshold) {
    vec3 accum = vec3(0.0);
    for (int sy = 0; sy < grid; sy++)
    for (int sx = 0; sx < grid; sx++) {
        vec2 offset = (vec2(sx, sy) + 0.5)
                    / float(grid) - 0.5;
        float it = mandelbrot(uv + offset * px);
        accum += palette(it * u_color_speed);
    }
    color = accum / float(grid * grid);
} else {
    color = palette(base_iter * u_color_speed);
}

// Glitch detection during reference orbit
// computation (JavaScript, dd128 precision)

function computeOrbit(maxIter) {
  const glitchPoints = [];

  for (let i = 0; i < maxIter; i++) {
    // Store orbit point Z[i]
    storeOrbit(i, ZxHi, ZyHi, ZxLo, ZyLo);

    // Detect potential glitch: |Z_n|^2 near 0
    const r2 = ZxHi*ZxHi + ZyHi*ZyHi;
    if (r2 < GLITCH_THRESHOLD) {
      glitchPoints.push(i);
    }

    // Continue iteration...
    iterate();
  }

  // If glitches found, compute backup
  // reference with shifted center
  if (glitchPoints.length > 0) {
    computeBackupOrbit(shiftedCenter);
  }
}