MANIFOLD
4D geometry explorer — 24 hyperdimensional shapes, progressive character unlocks, audio-reactive WebGL, full-stack React/MongoDB/JWT.
Desktop Only — Requires mouse input and GPU acceleration for the full 3D experience.
Architecture
Wireframe
ERD
About
A full-stack 3D platform for exploring hyperdimensional mathematics — 24 procedurally generated geometries, a gamified unlock system, and audio-reactive rendering, all running at 60fps in the browser. The real technical story is the architecture: a monolithic 2,700-line component refactored into a modular hook-based system with 93% less code.
GPU-First Rendering
All 3D computation offloads to the client's GPU via
InstancedMesh and mergeGeometries() —
minimal draw calls, consistent 60fps through complex
transformations. Strict disposal patterns prevent GPU memory leaks
across high-frequency scene switches.
Audio-Reactive Geometry
A real-time FFT analyzer maps audio frequency data directly to geometry. Bass (20–250 Hz) drives scale pulsing and Z-position; mid frequencies drive rotational momentum. The geometry responds to sound in real time.
React Architecture
The 3D engine breaks into domain-specific hooks
(useAnimationLoop, useObjectManager,
useMaterialUpdates) — isolated, testable, and
composable. Replaced 42-prop drilling with a streamlined
object-based API, reducing JSX boilerplate by 70%.
Project Type
Full-Stack 3D Application
Tech Stack
React Three Fiber, Three.js, Express, MongoDB, JWT, Web Audio API, Blender, Mixamo
Role
System Architect & 3D Engineer
Status
Active Development
Core Systems
The Geometry Factory
A modular factory pattern that procedurally generates 24 advanced geometries, including 4D polytopes and quantum manifolds. The system supports real-time manipulation of metalness, emissive intensity, and wireframe blending without rebuilding the scene.
Progressive Unlock Engine
Exploration earns rewards. The backend tracks interaction thresholds and unlocks originally rigged and animated 3D characters — Nexus Prime, Vectra, Icarus-X — built in Blender, rigged in Mixamo, loaded via FBX into React Three Fiber.
Scene Persistence & CRUD
Users save, load, and "transmute" custom 3D environments. JWT authentication, bcrypt hashing, and navigation blocking to prevent data loss on unsaved changes.
93% Code Reduction
Refactored 2,700 lines into 199 through modular hooks
134 State Variables
Managing real-time synchronized interactions across UI and 3D canvas
39 Passing Tests
Jest coverage across geometry pipeline and state transition utilities
Key Capabilities
4D Polytopes
Visualize tesseracts, 24-cells, and hypercubes projected into 3D space with real-time rotation controls.
Audio-Reactive
FFT analysis transforms sound into geometry—bass drives scale, mids control rotation, highs affect emissive glow.
Character Rewards
Unlock originally rigged 3D characters through exploration. Pipeline: Blender → Mixamo → React Three Fiber.
Scene Persistence
Save, load, and transmute custom environments with JWT-secured CRUD operations and data loss prevention.
GPU-First Design
InstancedMesh and mergeGeometries() offload computation to GPU, maintaining 60fps during complex transformations.
Modular Hooks
Domain-specific hooks (useAnimationLoop, useObjectManager) enable isolated testing and component reusability.
Future Vision
Motion Capture: Planned integration of Rokoko-recorded human movements for more nuanced character behavior.
Ray Tracing: Implementation of path-traced rendering for photorealistic materials.
Social Remixing: A public gallery system to clone and customize community-generated scenes.