Alex Fajt

Immersive 3D Exhibition · Creative Development & Technical Art — for the artist Julia Ternai

Five physical artworks turned into one continuous real-time environment — with the website conceived as a sixth installation.

• 4 input modes
• 29 MB payload
• 15.9 ms recovered
• EN / HU / IT

• Architected a persistent WebGL canvas with a chapter director. Two chapters stay mounted — the current one and the next, preloaded — while only one may write camera, lighting or audio. Shared instanced geometry belongs to the director, not the chapter, which killed a bug that added a full 145-object set on every scroll pass across a chapter boundary.
• Built four interchangeable input adapters — pointer, touch, keyboard, and opt-in MediaPipe hand tracking in a Web Worker — behind one interaction contract. Adding the fourth changed no shared code. Pinch is fingertip distance over palm size, so it works at any hand size or distance.
• Wrote the performance instrumentation before optimizing. A p95 probe reporting raw sample counts and validity checks caught three invalid measurements produced by the instrument itself, then measured a 15.9 ms per-frame gain from a material-path change.
• Cut the payload to 29 MB with a gltf-transform and headless-Blender pipeline — a 72 MB sky to 143 KB, a 16.3 MB rock set to 1.04 MB — and kept scene modules out of the main bundle by isolating tuning constants in import-free files.

• React
• TypeScript
• Three.js
• R3F
• GSAP
• Lenis
• Web Audio
• MediaPipe
• Zustand
• Vite

• Open the experience↗
• Source↗

Commercial Interactive Experience · Concept, Design & Development — for Palla Cintia

A makeup studio you navigate by reaching for objects on the vanity table: no menu, four distinct 3D worlds behind them.

• Live on the client's domain
• 4 worlds
• 1.64 MB → 109 KB

• Designed diegetic navigation with no nav bar. Hotspots are anchored in image-relative coordinates through a computed cover-transform, so they stay locked to the objects at any aspect ratio and on any device.
• Built the Services scene as shell-based fur — 24 shell layers with procedural strand cells in a custom shader, where the vertex shader parts the fur tangentially around the cursor with framerate-independent spring-back. It replaced a 241 MB generated mesh whose strand geometry shredded on decimation.
• Wrote a view-dependent glitter shader for the Portfolio corridor — world-space hash cells, randomized micro-mirror normals, fresnel rim, fog-chunk compatible — with the camera riding a Catmull-Rom curve under scroll and drag control.
• Shipped it to the client's own domain: per-scene lazy chunks, capped device pixel ratio, reduced-motion fallbacks throughout, separate baked mobile layouts, and a GLB compressed from 1.64 MB to 109 KB.

• React
• Three.js
• R3F
• GLSL
• GSAP
• PixiJS
• Motion
• Vite

• Open the experience↗

Creative Studio World · Concept, Art Direction & Development

One continuous Matrix-inspired world — a garden that dissolves into code, and a five-act scroll-driven architectural film.

• 158 MB asset → 0
• 18.4 MB → 6.7 MB
• 5 acts

• Injected a code-dissolve fragment chunk into every material in the scene via onBeforeCompile, turning each surface into a glyph field with its silhouette intact before it erodes through a noise-thresholded discard — then warped the sky's own code shader into a drain, so the code itself spirals into the vortex.
• Reproduced a 158 MB, 2.36-million-triangle asset entirely as a shader. Zero payload, no licensing exposure.
• Recovered the building's window grid from a single-mesh GLB by extracting and clustering the window material's vertices — nine floors by eight columns — then lit the windows from inside the real openings, so the actual frames and mullions catch the light instead of a decal on the wall.
• Drove the storm and day-to-night transitions from single shared signals running sky, clouds, city backdrop and lighting rig together, and built in-browser tuning editors whose values are baked into constants and stripped from the shipped bundle.

• React
• Three.js
• R3F
• GLSL
• postprocessing
• GSAP
• Vite

• Open the experience↗
• Source↗

Real-Time Particle Study · Salvage & Optimization · Personal R&D

5,200 points on a Fibonacci lattice, radius quantised into nine rings so the order reads as structure — then collapsed into chaos. It is also the field behind this page.

• 9,400 particles
• 4 uniform writes / frame
• 5.3 MB → 2.9 MB

• Salvaged the one scene worth keeping from an abandoned 1,000-line vanilla Three.js prototype and rebuilt it as a self-contained, disposable module — preset-driven, so one build runs both the full-screen study and the lighter hero above.
• Moved the displacement into the vertex shader. The original rewrote 9,400 particle positions in JavaScript and re-uploaded two buffers every frame, to produce motion that is a pure function of home, target, seed and time. Those are static attributes now — per-frame CPU cost is four uniform writes, and the buffers upload once.
• Reproduced the original's look rather than re-grading it. The prototype predated both modern colour management and physically-based light units, so a faithful port meant deliberately keeping the legacy linear output path and re-deriving the light intensities — each checked side by side against the old build.
• Ships progressively. The particle fields are procedural and render on the first frame; the 2.9 MB head fades in whenever it arrives. Nothing on the page waits for a download.

• Three.js
• GLSL via onBeforeCompile
• Vite IIFE lib
• gltf-transform

• Open the experience↗