Ga naar hoofdinhoud
BVDART Logo

Een interactieve fractalverkenner bouwen

⚙ Tutorial• 2 min leestijd
fractalwebglperformancelab
Technische deep-dive in het implementeren van een performante Mandelbrot/Julia-set verkenner met WebGL en progressive rendering.

Drie uitdagingen

Het Lab genereert Mandelbrot- en Julia-beelden met instelbare parameters en beeldvensters. Interactieve fractalverkenners roepen drie nuttige technische vragen op: snelheid, numerieke precisie en progressieve detaillering. De technieken hieronder beschrijven mogelijke oplossingen; het huidige Lab genereert rasterbeelden op de CPU.

Welke punten ontsnappen?

Elke pixel vraagt: ontsnapt deze c?Re: -2.200 → 1.000 · Im: 1.200 → -1.200
Volg de gekozen baanz₀ = 0
zₙ₊₁ = zₙ² + c
Complexe baan vanaf nul met ontsnappingscirkel|z| = 2ReIm|z| = 0.338

Ontsnapt bij stap 33

Een overschrijding van straal 2 bewijst ontsnapping. Een eindige berekening binnen de cirkel bewijst geen lidmaatschap.

Probeer dit Zet c = 0: elke iteratie blijft nul. Probeer c = −1 voor een cyclus met twee punten en daarna c = 0,5 voor een ontsnappende baan.

Vergroot de grens rond het vergrotingspunt: elke getoonde pixel wordt opnieuw berekend in het kleinere gebied van het complexe vlak. Gebruik een regelaar om het over te nemen.

Kies een punt in het Mandelbrot-veld en volg de herhaalde berekening die zijn kleur bepaalt.

Probeer het zelf
  1. Verplaats c in het vlak of met Re(c) en Im(c).
  2. Doorloop Baanstap n; vergelijk c = 0, c = −1 en c = 0,5 met Im(c) = 0.

Let op: Elke beeldpixel kiest c terwijl z op nul begint. Het baanpaneel toont herhaald kwadrateren en optellen; straal 2 overschrijden bewijst ontsnapping. Een eindig niet-ontsnapt monster blijft onbeslist.

Volledige uitleg Open in het Lab

GPU-versnelde rendering

Een escape-time-iteratie kan in een WebGL-fragmentshader worden uitgevoerd. Elke pixel berekent onafhankelijk zijn eigen aantal iteraties, waardoor de Mandelbrot-verzameling goed geschikt is voor parallelle GPU-berekeningen. De werkelijke rendertijd hangt af van het apparaat, de beeldafmetingen, de iteratielimiet en het gekozen gebied.

mandelbrot.frag
// 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
  );
}
glsl

Deep Zoom-precisie

Bij diepe zoomniveaus wordt precisie een probleem wanneer naburige pixelcoördinaten te dicht bij elkaar liggen voor de gekozen numerieke representatie. Perturbatiemethoden berekenen een referentiebaan met hoge precisie op de CPU en beschrijven naburige pixels als kleine afwijkingen daarvan. Dit is een geavanceerde rendertechniek, geen functie van de huidige Lab-generator.

Progressieve rendering

Progressieve rendering kan beginnen met een grof raster dat in latere stappen wordt verfijnd. Zo krijgt de kijker al een benadering terwijl de kostbare details nog worden berekend. Een kleurfunctie kan iteratiewaarden daarna naar een palet vertalen. Dit zijn ontwerpkeuzes voor een fractalverkenner; het huidige Lab levert zijn rasterresultaat als voltooid beeld.

Eén constante, een andere verzameling

Elke pixel begint een andere baanOveral wordt dezelfde c gebruikt
Eén constante voor het hele beeld
De gekozen beginwaarde
Eerste 16 stappen van de gekozen Juliabaan|z| = 2ReIm|z| = 0.221
z₀ = 0.250 + (0.150)i
c = -0.800 + (0.156)i
zₙ₊₁ = zₙ² + c

Deze beginwaarde ontsnapt na 72 stappen.

Het dradenkruis verplaatsen test één beginwaarde. c verplaatsen verandert de recurrentie bij elke pixel. Donkere gebieden zijn niet-ontsnapte monsters in deze eindige test.

Probeer dit Kies c = 0. De gevulde Juliaverzameling is de eenheidsschijf: beginwaarden met modulus kleiner dan 1 krimpen en die boven 1 groeien. Verplaats het dradenkruis om beide te vergelijken.

Verplaats c vloeiend vanaf zijn huidige waarde door verbonden en losse Julia-structuren en keer daarna terug. Gebruik een regelaar om het over te nemen.

Verander de constante c en bekijk daarna een baan in de bijbehorende Julia-verzameling. Hier varieert het beginpunt terwijl c vaststaat.

Probeer het zelf
  1. Kies c in het kleine parametervlak of gebruik de reële en imaginaire regelaars.
  2. Zet c = 0 en verplaats het dradenkruis binnen en buiten de eenheidsschijf.

Let op: Het hoofdbeeld varieert z₀ terwijl elke pixel dezelfde c gebruikt. c veranderen vormt het hele veld opnieuw; het grote dradenkruis selecteert alleen een baan om te bekijken.

Volledige uitleg Open in het Lab

Gerelateerde concepten

Gerelateerde kunstwerken

Verken gerelateerde secties

Meer over het werk: