I put a real-time 3D Engine in my PHP app.

Ismoiljon Umarov — Sat, 09 Aug 2025 19:13:20 +0000

Hey everyone,

What if a simple social media site felt more like a game? What if user achievements weren't just static icons, but interactive 3D objects you could actually play with?

I had this crazy idea while working on my latest project, GOAT – an open-source social debate platform. I wanted to reward users in a way that felt substantial and cool, not just another boring badge.

So, I decided to build a real-time 3D rendering engine right inside my Laravel application.

Live Demo: https://goat.uz/@goat
GitHub Repo: https://github.com/umaarov/goat-dev

It sounds a bit nuts, I know. Here’s a breakdown of how I made it work without melting the user's browser.

The Stack for a Crazy Idea
The core of the app is pretty standard: a solid Laravel 12 backend serving a Vite-powered frontend. The magic happens with a few extra ingredients:

Three.js / WebGL / GLSL: The workhorse for all things 3D in the browser.
Web Workers: The key to not freezing the UI.
C++ & WebAssembly (WASM): For when JavaScript just isn't fast enough.

The How-To: 3D in a PHP World
The main challenge wasn't just displaying a 3D model. It was doing it in a way that didn't destroy the app's performance.

1. The Performance Problem
My first attempt was simple: load a model with Three.js on the profile page. It worked, but it was janky. Complex models with nice lighting and effects caused noticeable lag on the main thread, making the whole site feel slow. That was a deal-breaker.

2. Solution: Offload Everything to a Web Worker
The fix was to move the entire 3D rendering logic into a Web Worker. This means all the heavy calculations—the scene setup, the lighting, the render loop—happen on a completely separate CPU thread.
The main page just creates the worker and gives it a canvas to draw on. The worker does all the hard work and posts the rendered image back. The result? The main UI stays buttery smooth, no matter how complex the 3D scene is.

3. Extra Power: C++ and WebAssembly (WASM)
For some really intense geometry calculations (like custom modifiers or physics), even JavaScript inside the worker was hitting its limits.
So, I identified the most performance-critical functions and rewrote them in C++. I then used the Emscripten toolchain to compile the C++ code into a highly-optimized WebAssembly (WASM) module.

It's Not Just 3D
On top of the rendering engine, I also integrated Google's Gemini Pro API for content moderation and used the Stable Diffusion AI (via Cloudflare) to let users generate their own unique profile pictures from a text prompt.

The Result
After months of work, it's finally live! I'm super proud of how it turned out. It’s proof that you can build really rich, interactive experiences with a "traditional" backend like Laravel if you're willing to get creative on the frontend.

This is an open-source project, so I'd love to hear what you think. Any feedback is welcome, and if you like the project, a star on GitHub would absolutely make my weekend!

Thanks for reading!

DEV Community: Ismoiljon Umarov

I put a real-time 3D Engine in my PHP app.