Naša fraktálová aplikácia prešla zásadnou technologickou transformáciou. Celé renderovanie fraktálov sme presunuli na GPU pomocou Three.js a GLSL shaderov, čo prinieslo dramatický nárast výkonu a umožnilo pridanie troch nových fascinujúcich 3D fraktálov: Apollonian 3D, Pseudo-Kleinian 3D a Amazing Surface 3D.

Prečo GPU?

Pôvodná implementácia fraktálov bežala na CPU pomocou Rust/WebAssembly s multi-threadingom cez Web Workers. Hoci to poskytovalo slušný výkon, GPU prináša úplne inú úroveň paralelizmu. Moderná grafická karta dokáže vykonávať tisíce výpočtov súčasne – každý pixel sa počíta nezávisle na fragment shaderi.

Výsledok: Ray marching na GPU beží v reálnom čase aj pri vysokom rozlíšení. Rotácia, zoom a zmena parametrov sú okamžité – bez čakania na prepočet celého snímku.

Architektúra GPU renderera

GPU renderer je postavený na Three.js s custom GLSL fragment shadermi. Architektúra pozostáva z niekoľkých kľúčových komponentov:

• Three.js scéna – full-screen quad s ShaderMaterial, ktorý pokrýva celý viewport
• GLSL Fragment Shader – ray marching algoritmus bežiaci na každom pixeli paralelne
• SDF (Signed Distance Functions) – matematické funkcie definujúce povrch fraktálov implicitne
• Uniforms – parametre ako rotácia kamery, zoom, iterácie a farebné schémy prenášané z JavaScriptu do shaderu

Podporované fraktály na GPU

GPU renderer podporuje všetky typy fraktálov v aplikácii – 2D aj 3D:

• 2D: Mandelbrot, Julia, Multibrot, Tricorn, Burning Ship, Mandala
• 3D: Mandelbulb, Mandelbox, Quaternion Julia, Menger Sponge, Sierpinski 3D, Mandala 3D
• Nové 3D: Apollonian 3D, Pseudo-Kleinian 3D, Amazing Surface 3D

Nové 3D Fraktály

🔮 Apollonian 3D

Apolloniovská 3D gasketa je trojrozmerná verzia klasického Apolloniovho usporiadania kruhov. V 3D priestore sa rekurzívne balí nekonečné množstvo sfér do seba, pričom každá nová sféra sa dotýka predchádzajúcich. Výsledkom je hypnotická štruktúra pripomínajúca mimozemskú penu alebo kozmickú mriežku.

Parameter Depth (hĺbka) ovláda počet rekurzívnych úrovní – vyššie hodnoty vytvárajú hustejšie a detailnejšie balenie sfér. SDF pre Apollonian 3D využíva opakované inverzie a škálovania v priestore.

⛪ Pseudo-Kleinian 3D

Pseudo-Kleinianske fraktály sú inšpirované Kleinianskými grupami z hyperbolickej geometrie. Vytvárajú katedrálne tunely a nekonečné chodby s detailnými stenami plnými fraktálnych vzorcov. Je to ako prechádzka cez nekonečnú gotickú katedrálu.

Dva kľúčové parametre:

• Cage Size – veľkosť rekurzívnych komôr, ovláda šírku a výšku tunelov
• Drift – posúva štruktúru hlbšie, vytvára dramatickejšie perspektívy

🌊 Amazing Surface 3D

Amazing Surface je fraktál vytvorený opakovaným skladaním priestoru (box folding) a škálovaním. Výsledkom sú organické štruktúry pripomínajúce geologické útvary, morské koraly alebo mimozemské krajiny s nekonečnými detailmi.

Parametre:

• Fold Scale – ovláda hustotu rekurzívneho skladania; vyššie hodnoty vytvárajú komplexnejšie povrchy
• Surface Warp – ohýba zložené vrstvy do škrupinových a katedrálnych tvarov

Technológia v detaile

Ray Marching na GPU

Ray marching je renderovacia technika, pri ktorej sa z kamery vysiela lúč pre každý pixel obrazovky. Lúč „kráča" priestorom v krokoch, pričom veľkosť kroku je určená SDF (Signed Distance Function) – funkciou, ktorá vracia vzdialenosť k najbližšiemu povrchu. Keď vzdialenosť klesne pod prah, lúč „narazil" na povrch.

Na GPU beží tento algoritmus paralelne pre všetky pixely súčasne. To je zásadný rozdiel oproti CPU, kde sa pixely počítajú sekvenčne (aj pri multi-threadingu sú obmedzené na niekoľko jadier).

GLSL Shadery

Každý typ fraktálu má vlastnú SDF funkciu implementovanú v GLSL (OpenGL Shading Language). Fragment shader prijíma uniforms z JavaScriptu (pozícia kamery, rotácia, parametre fraktálu) a pre každý pixel vypočíta farbu na základe:

• Počtu ray marching krokov
• Vzdialenosti dopadu
• Normálového vektoru povrchu (pre osvetlenie)
• Zvolenej farebnej schémy

Výkonnostný skok

Prechod z CPU na GPU priniesol rádovo vyšší výkon:

• CPU (Rust/WASM): ~2-10 FPS pri 3D fraktáloch, závisí od rozlíšenia a zložitosti
• GPU (Three.js/GLSL): ~30-60 FPS pri rovnakých parametroch, plynulá interakcia

GPU renderer je teraz predvolený pre všetky podporované fraktály. Prepínač „Use GPU Renderer" umožňuje kedykoľvek prepnúť medzi CPU a GPU režimom.

Farebné schémy a efekty

Všetky farebné schémy fungujú aj na GPU vrátane:

• Relief (3D Light) – realistické Phong osvetlenie s difúznym a spekulárnym svetlom
• Rainbow – spektrálny gradient podľa iterácií
• Orbit Trap – neónové žiariace efekty s RGB slidrami
• Custom (6 farieb) – vlastná paleta s randomizáciou
• Animate Colors – plynulá animácia farieb v reálnom čase

Ovládanie 3D fraktálov

• Ľavé tlačidlo myši + ťahanie – rotácia 3D objektu
• Koliesko myši – priblíženie/oddialenie
• F11 – fullscreen režim
• 🔮 MYSTIFY ME – automaticky vygeneruje krásny fraktál
• Save Screenshot – uloženie ako PNG
• Record – nahrávanie videa animácie

Our fractal application has undergone a fundamental technological transformation. We moved the entire fractal rendering to the GPU using Three.js and GLSL shaders, bringing a dramatic performance increase and enabling three new fascinating 3D fractals: Apollonian 3D, Pseudo-Kleinian 3D and Amazing Surface 3D.

Why GPU?

The original fractal implementation ran on the CPU using Rust/WebAssembly with multi-threading via Web Workers. While this provided decent performance, the GPU brings an entirely different level of parallelism. A modern graphics card can perform thousands of calculations simultaneously – each pixel is computed independently on a fragment shader.

Result: Ray marching on the GPU runs in real-time even at high resolution. Rotation, zoom and parameter changes are instant – no waiting for full frame recalculation.

GPU Renderer Architecture

The GPU renderer is built on Three.js with custom GLSL fragment shaders. The architecture consists of several key components:

• Three.js scene – full-screen quad with ShaderMaterial covering the entire viewport
• GLSL Fragment Shader – ray marching algorithm running on each pixel in parallel
• SDF (Signed Distance Functions) – mathematical functions defining fractal surfaces implicitly
• Uniforms – parameters like camera rotation, zoom, iterations and color schemes transferred from JavaScript to the shader

Supported GPU Fractals

The GPU renderer supports all fractal types in the application – both 2D and 3D:

• 2D: Mandelbrot, Julia, Multibrot, Tricorn, Burning Ship, Mandala
• 3D: Mandelbulb, Mandelbox, Quaternion Julia, Menger Sponge, Sierpinski 3D, Mandala 3D
• New 3D: Apollonian 3D, Pseudo-Kleinian 3D, Amazing Surface 3D

New 3D Fractals

🔮 Apollonian 3D

The Apollonian 3D gasket is a three-dimensional version of the classic Apollonian circle packing. In 3D space, an infinite number of spheres are recursively packed into each other, with each new sphere touching the previous ones. The result is a hypnotic structure resembling alien foam or a cosmic lattice.

The Depth parameter controls the number of recursive levels – higher values create denser and more detailed sphere packing. The SDF for Apollonian 3D uses repeated inversions and scalings in space.

⛪ Pseudo-Kleinian 3D

Pseudo-Kleinian fractals are inspired by Kleinian groups from hyperbolic geometry. They create cathedral-like tunnels and infinite corridors with detailed walls full of fractal patterns. It's like walking through an infinite Gothic cathedral.

Two key parameters:

• Cage Size – size of recursive chambers, controls tunnel width and height
• Drift – pushes the structure deeper, creating more dramatic perspectives

🌊 Amazing Surface 3D

Amazing Surface is a fractal created by repeated space folding (box folding) and scaling. The result is organic structures resembling geological formations, sea corals or alien landscapes with infinite detail.

Parameters:

• Fold Scale – controls the density of recursive folding; higher values create more complex surfaces
• Surface Warp – bends folded layers into shell-like and cathedral shapes

Technology in Detail

Ray Marching on GPU

Ray marching is a rendering technique where a ray is cast from the camera for each pixel on the screen. The ray "marches" through space in steps, where the step size is determined by the SDF (Signed Distance Function) – a function that returns the distance to the nearest surface. When the distance drops below a threshold, the ray has "hit" a surface.

On the GPU, this algorithm runs in parallel for all pixels simultaneously. This is the fundamental difference from the CPU, where pixels are computed sequentially (even with multi-threading, they're limited to a few cores).

GLSL Shaders

Each fractal type has its own SDF function implemented in GLSL (OpenGL Shading Language). The fragment shader receives uniforms from JavaScript (camera position, rotation, fractal parameters) and for each pixel computes the color based on:

• Number of ray marching steps
• Hit distance
• Surface normal vector (for lighting)
• Selected color scheme

Performance Leap

The transition from CPU to GPU brought an order-of-magnitude performance increase:

• CPU (Rust/WASM): ~2-10 FPS for 3D fractals, depending on resolution and complexity
• GPU (Three.js/GLSL): ~30-60 FPS at the same parameters, smooth interaction

The GPU renderer is now the default for all supported fractals. The "Use GPU Renderer" toggle allows switching between CPU and GPU modes at any time.

Color Schemes and Effects

All color schemes work on the GPU including:

• Relief (3D Light) – realistic Phong lighting with diffuse and specular light
• Rainbow – spectral gradient based on iterations
• Orbit Trap – neon glowing effects with RGB sliders
• Custom (6 colors) – custom palette with randomization
• Animate Colors – smooth real-time color animation

3D Fractal Controls

• Left mouse button + drag – rotate 3D object
• Mouse wheel – zoom in/out
• F11 – fullscreen mode
• 🔮 MYSTIFY ME – automatically generate a beautiful fractal
• Save Screenshot – save as PNG
• Record – record animation video