SIMULACRA
A real-time physics engine disguised as a website.
Overview
A WebGL-powered interactive manifesto exploring the philosophy and mathematics of simulation through real-time browser physics. Built on React Three Fiber and Rapier (WASM-compiled Rust physics), it runs a 5,000-particle instanced mesh, a Plinko physics sandbox, and a live 4,000-node sorting visualizer — all at 60 FPS in the browser. The UI layer is fully decoupled from the WebGL canvas so DOM routing never interrupts the physics loop. Deployed on Cloudflare Workers with a TypeScript edge worker handling security headers and asset serving.
SIMULACRA is a personal showcase built to demonstrate that the browser can function as a high-performance real-time graphics engine. It doubles as an interactive manifesto on simulation theory, presenting physics, algorithms, and philosophy through hands-on WebGL environments rather than static content.
The core design decision is a fully decoupled rendering pipeline: a persistent GlobalCanvas component owns the Three.js/R3F scene graph and never unmounts, while React Router swaps lightweight HTML overlay pages on top. Scene switching is coordinated through a Zustand store, keeping the physics loop uninterrupted across navigation.
Rapier's WASM physics engine handles rigid-body collisions for the Plinko sandbox, and instanced meshes keep draw calls minimal for both the 5,000-particle grid and the 4,000-node sort visualizer. A PerformanceMonitor from @react-three/drei dynamically scales DPR and object counts when frame rate drops below threshold on lower-end devices.
Served via a Cloudflare Worker that injects security headers (CSP, HSTS, Referrer-Policy) on every response and exposes a /ping health check endpoint with CORS. Static assets are served through the Workers Assets binding with SPA fallback routing so client-side routes resolve correctly at the edge.
Stack
UI / Frontend
Animation / 3D
Infra / Deploy
How it works
User visits site
Browser loads the Cloudflare Worker, which serves the Vite-built SPA from the Assets binding with security headers applied.
GlobalCanvas mounts
A single persistent R3F Canvas initialises the Three.js scene, camera, lighting, and PerformanceMonitor. It never unmounts during navigation.
Route change
React Router updates the active page overlay. The Zustand store's currentScene field updates, signalling GlobalCanvas to swap the active 3D scene.
Scene renders
Home loads the ParticleGrid and DeconstructionLattice; Sandbox loads the Rapier PhysicsSandbox; Theory loads the SortVisualizer. Each scene reads simulation parameters (gravity, timeDilation, chaosCoefficient) from the store.
User interacts
HUD sliders update Zustand state. The R3F render loop reads these values each frame via transient subscriptions, applying changes without triggering React re-renders.
Performance adaptation
PerformanceMonitor detects frame drops and sets performanceTier to low, reducing DPR and object counts to maintain smooth playback.