StructuraXR

Inspiration

Traditional structural engineering tools are confined to 2D screens, making it hard to visualize how forces propagate through 3D structures. We wanted to bring structural analysis into immersive 3D space using WebXR and AR passthrough. The goal was to create an intuitive, AI-powered tool that makes complex stress analysis accessible and visually compelling.

What it does

StructuraXR is an immersive WebXR structural engineering app for Meta Quest that uses AI agents to perform real-time stress and force analysis on 3D block structures. Users can build structures in VR, place force vectors with precise 3D positioning, generate structures from natural language prompts, and analyze stress with pixelated gradient visualizations showing exactly which parts of each block are under stress. The app uses DigitalOcean GradientAI to power specialized agents for structural reasoning, mathematical derivation, visualization mapping, technical reporting, and verification.

How we built it

Frontend: Three.js for 3D rendering, WebXR API for VR/AR, TypeScript, Vite, custom pixelated stress visualizer using DataTexture. Backend: Node.js/Express, DigitalOcean GradientAI REST API, template-based structure generation system. Key Features: Multi-agent architecture (5 agents per analysis), pixelated texture gradients, dynamic progress bars, MathJax rendering, PDF export, XR controller support for precise vector placement.

Challenges we ran into

Meta Quest requires HTTPS for WebXR, but self-signed certificates are rejected—we solved this with adb reverse port forwarding. The LLM agents sometimes returned malformed JSON with unescaped LaTeX backslashes, so we implemented multi-layer recovery: standard parsing → JSON repair → manual partial extraction. HTML panels were hidden in XR mode, so we created a CSS3DObject system to render HTML elements as floating 3D panels.

Accomplishments that we're proud of

Seamless VR/Desktop experience with automatic UI adaptation. Successfully integrated 5-agent system providing comprehensive structural analysis with mathematical derivations. Unique pixelated stress visualization system showing exactly which parts of blocks are affected. Eliminated AI hallucination in structure generation by enforcing deterministic template-based geometry. Robust error handling ensures the app never crashes from malformed AI responses.

What we learned

WebXR development requires careful session management, controller input handling, and passthrough camera integration. AI agents need strict JSON output constraints and robust error recovery systems. Pixelated texture generation requires careful use of NearestFilter and gradient calculations based on distance from force vectors. Template-based systems are essential for preventing AI hallucination in geometry generation.

What's next for StructuraXR

Add support for more complex geometries (beams, trusses, curved surfaces). Implement real-time collaborative analysis where multiple users can view and interact with the same structure simultaneously. Integrate with CAD software for importing existing models. Add material property editing and more sophisticated FEA calculations. Expand the AI agent system to provide design recommendations and optimization suggestions.

Built With

• express.js
• gradientai
• html5/css3
• jspdf
• mathjax
• node.js
• three
• webxr