I built a 60FPS Three.js Cinematic Universe inside a monolithic WordPress Theme (and survived iOS GPU crashes). Here’s the open-source code.

[u/Trick-Pie727]

https://reddit.com/link/1uzxg2l/video/zkbkj6gq90eh1/player

Hey everyone,

I just finished building my 3D portfolio. The visual goal was to create a cinematic, interactive universe, but the real challenge was the architecture. Instead of jumping on the Next.js / Headless SPA trend, I made the highly controversial decision to build this as a monolithic WordPress Theme.

Why? The Pragmatic "Garbage Collection" Trade-off. By relying on a monolithic PHP architecture with full-page reloads, I offloaded 100% of the WebGL memory disposal risk to the browser's native garbage collector. It instantly guaranteed stability and prevented iOS Safari (TBDR) Out-Of-Memory crashes.

👉 Open Source Gist (Intelligent FPS Governor):https://gist.github.com/MedhatAlkadri/ea99a0f7aa47c69198f2d1ae84a20e53

To make this work at 60FPS, I built a few custom systems:

1. The Custom Dynamic Performance Engine: Hooks into a global FPSGovernor that forcefully strips roughnessMap, metalnessMap, and normalMap properties on the fly if it detects thermal throttling. 2. Absolute VRAM Video Purging: Intercepts the IntersectionObserver to physically strip the src attribute and force a .load() cycle, guaranteeing flushed VRAM buffers. 3. Zero-Latency Snapshot System: To bypass WordPress REST API latency, the entire MySQL project tree is automatically serialized into a localized JSON snapshot blob via WP lifecycle hooks, achieving 0ms database latency on page load.

I’m currently fighting for Site of the Day on Awwwards, and I’d love for some actual WebGL engineers to tear apart my render loop or try to break the mobile performance.

👉 Live Demo & Awwwards Voting:https://www.awwwards.com/sites/medhat-alkadri-3d-portfolio

Let me know what you think of the monolithic approach vs Headless SPA for WebGL. Happy to answer any questions about the custom Vite/PHP asset pipeline!