Building an Interactive Fractal Explorer

Three Challenges

The Lab's Fractal Explorer lets visitors zoom into the Mandelbrot and Julia sets with smooth pinch-to-zoom and real-time parameter adjustment. Building it required solving three key challenges: performance, precision, and progressive detail.

GPU-Accelerated Rendering

For performance, the escape-time iteration runs in a WebGL fragment shader. Each pixel computes its own iteration count independently, making the Mandelbrot set embarrassingly parallel — perfect for GPU execution. Even on mobile devices, this renders a 1024×1024 view in under 16ms.

// Fragment shader (GLSL) — core iteration
vec2 z = vec2(0.0);
for (int i = 0; i < MAX_ITER; i++) {
  if (dot(z, z) > 4.0) { iter = i; break; }
  z = vec2(
    z.x*z.x - z.y*z.y + c.x,
    2.0*z.x*z.y + c.y
  );
}

Deep Zoom Precision

Precision becomes an issue at deep zoom levels. Standard float32 loses accuracy around 10⁻⁷ zoom. The solution is perturbation theory: compute a high-precision reference orbit on the CPU, then calculate each pixel as a small perturbation from that reference on the GPU.

Progressive Rendering

Progressive rendering starts with a coarse grid (every 8th pixel) and refines on each frame, giving immediate visual feedback even for expensive deep-zoom views. Combined with smooth orbit-trap coloring in OKLCH color space, the result is a fractal explorer that feels as responsive as scrolling a map.