Een interactieve fractalverkenner bouwen

Drie uitdagingen

Het Lab Fractalverkenner laat bezoekers inzoomen op de Mandelbrot- en Julia-verzamelingen met vloeiende pinch-to-zoom en realtime parameteraanpassing. Het bouwen ervan vroeg om drie belangrijke uitdagingen op te lossen: performance, precisie en progressieve detaillering.

GPU-versnelde rendering

Voor de performance draait de escape-time-iteratie in een WebGL fragment shader. Elke pixel berekent onafhankelijk zijn eigen aantal iteraties, waardoor de Mandelbrot-verzameling embarrassingly parallel — perfect voor uitvoering op de GPU. Zelfs op mobiele apparaten rendert dit een 1024×1024 weergave in minder dan 16 ms.

// 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-precisie

Precisie wordt een probleem bij diepe zoomniveaus. Standaard float32 verliest nauwkeurigheid rond een 10⁻⁷ zoom. De oplossing is perturbation theory: bereken een hoogprecisie-referentie‑baan op de CPU en bereken vervolgens elke pixel als een kleine verstoring ten opzichte van die referentie op de GPU.

Progressieve rendering

Progressieve rendering begint met een grove grid (elke 8e pixel) en verfijnt bij elk frame, waardoor je direct visuele feedback krijgt, zelfs bij dure deep-zoom weergaven. Gecombineerd met vloeiende orbit-trap-kleuring in OKLCH kleurruimte ontstaat zo een fractalverkenner die net zo responsief aanvoelt als het scrollen op een kaart.