Hola a tothom,
¿I si una xarxa social senzilla se sentís més com un joc? ¿I si els assoliments d'usuari no fossin només icones estàtiques sinó objectes 3D interactius amb els quals realment es pogués jugar?
Vaig tenir aquesta idea mentre treballava en el meu últim projecte GOAT, una plataforma de debat social de codi obert. Volia recompensar els usuaris d'una manera que se sentís real i atractiva, no una altra insígnia avorrida.
Així que vaig decidir integrar un motor de renderitzat 3D en temps real dins de la meva aplicació Laravel.
Demo en directe: https://goat.uz/@goat Repositori GitHub: https://github.com/umaarov/goat-dev
A primera vista sona una mica boig. Aquí explico com ho vaig aconseguir sense convertir el navegador de l'usuari en una planxa.
La pila per a una idea ambiciosa
El nucli de l'app és clàssic: un backend amb Laravel 12 que serveix un frontend impulsat per Vite. La màgia apareix amb alguns ingredients addicionals: Three.js WebGL i GLSL per a tot el 3D al navegador, Web Workers per no bloquejar la interfície i C++ compilat a WebAssembly per als càlculs que requereixen màxima velocitat.
Com portar 3D a un món PHP
El repte principal no va ser només mostrar un model 3D, sinó fer-ho sense deteriorar el rendiment de l'aplicació.
1. El problema de rendiment
El meu primer intent va ser simple: carregar un model amb Three.js a la pàgina de perfil. Funcionava, però resultava tosc. Els models complexos amb il·luminació i efectes provocaven lag al fil principal i l'experiència general es tornava lenta. Això no era acceptable.
2. Solució: derivar-ho tot a un Web Worker
La solució va ser moure tota la lògica de renderitzat 3D a un Web Worker. Així els càlculs pesats, la configuració de l'escena, la il·luminació i el bucle de renderitzat s'executen en un fil de CPU separat. La pàgina principal només crea el worker i li proporciona un canvas per dibuixar. El worker fa la feina pesada i retorna el resultat renderitzat. La interfície principal roman suau sense importar com de complexa sigui l'escena 3D.
3. Potència addicional: C++ i WebAssembly
Per a càlculs geomètrics intensos com modificadors personalitzats o simulacions físiques, fins i tot JavaScript dins del worker es va quedar curt. Vaig identificar les funcions més crítiques i les vaig reescriure en C++. Després vaig utilitzar la cadena d'eines Emscripten per compilar el codi a WebAssembly altament optimitzat, guanyant velocitats properes al codi natiu dins del navegador.
No és només 3D
A méS del motor de renderitzat vaig integrar l'API Gemini Pro de Google per a moderació de contingut i vaig utilitzar Stable Diffusion a través de Cloudflare per permetre que els usuaris generin imatges de perfil úniques a partir d'un text. El resultat és una experiència interactiva i moderada que combina gràfics en temps real amb capacitats d'intel·ligència artificial.
El resultat
DespréS de diversos mesos de treball, el projecte està en producció i és de codi obert. Demostra que es poden crear experiències riques i interactives partint d'un backend tradicional com Laravel si s'adopten solucions creatives al frontend.
A Q2BSTUDIO com a empresa de desenvolupament de programari i aplicacions a mida oferim experiència per portar idees similars a producció. Som especialistes en programari a mida, intel·ligència artificial, ciberseguretat i serveis cloud AWS i Azure. També brindem serveis d'intel·ligència de negoci, implementacions de Power BI, desenvolupament d'agents IA i integracions d'IA per a empreses per impulsar la presa de decisions i l'automatització.
Si t'interessa replicar una solució 3D en temps real en les teves aplicacions a mida o necessites consultoria en programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci, agents IA o Power BI, contacta amb Q2BSTUDIO i parlem sobre com transformar el teu producte.
Aquest projecte és de codi obert, així que agraeixo qualsevol comentari i si t'agrada el repositori, una estrella a GitHub faria el dia de l'equip. Gràcies per llegir.
