Logo

🏗️ ConstructAR

Data-Driven Augmented Reality for Construction Management

ConstructAR is a WebXR-powered application that transforms flat construction schedules into interactive 4D architectural dioramas. By linking live project data to a 3D structural model in Augmented Reality, it bridges the gap between field teams, project managers, and clients, turning reactive data entry into an immersive, mathematical forecast of your build.

🚨 The Problem: Spreadsheets Can't Build Buildings

Today, multi-million dollar construction projects are managed entirely through massive, abstract spreadsheets (like MS Project or Excel). Behind the scenes, project managers are constantly trying to visualize how a delayed concrete pour on a Tuesday affects the steel framing on a Friday.

In the race to build faster, the construction industry relies on disconnected tools. Field workers mark items as "Completed" on paper or in complex software, while clients stare at 2D Gantt charts trying to understand what they are paying for. This disconnect has consequences: miscommunications lead to compounding delays, and clients struggle to visualize progress until it's physically built.

To mitigate this, firms buy expensive 4D BIM software that requires heavy desktop computers, massive licenses, and dedicated operators. But this introduces massive friction for the people who actually need the data—the site managers and the clients.

The Question: What if you could drop a live, 4D representation of your construction project right on a conference table using just a smartphone?

💡 The Solution (Inspiration)

This exact dilemma inspired ConstructAR.

Imagine a site manager finishes pouring a concrete column, pulls out their phone, taps the column in AR, and marks it "Completed." Instantly, the project manager in the office and the client across the country can see the building update.

ConstructAR acts as an interactive bridge. It ensures that complex schedule data is instantly understandable as a physical 3D object—allowing developers, contractors, and clients to visualize progress, inspect structural elements, and slide through time to forecast the build directly on any mobile device.

🚀 What It Does

ConstructAR utilizes WebXR and React Three Fiber to enforce multiple layers of visualization:

📱 Tabletop AR Placement: Uses WebXR plane detection to anchor a 3D diorama of your project onto any real-world surface.
👻 X-Ray Ghost Slider: A dynamic material slider that turns exterior walls into glass, allowing users to inspect internal load-bearing columns and footings perfectly.
⏰ 4D Timeline Simulation: A timeline slider that builds the structure progressively—from foundations to roof—based on the actual scheduled dates.
📊 Live Data Dashboard: An interactive UI overlay tracking overall project completion percentage and the status of every single component.
☁️ Live Google Sheets Sync: The entire 3D model is data-driven, pulling its phases, statuses, and metadata directly from a live Google Sheet in real-time.

Key Innovation: We implement dynamic state-driven geometry. The 3D model is not a static file; it's a living React component bound to a central store. When a Google Sheet is updated, the React state changes, instantly propagating material, color, and visibility updates down to the WebGL rendering layer.

🛠️ How We Built It

Framework: React + Vite for high-performance modular development.
3D Engine: three.js + @react-three/fiber + @react-three/drei for declarative 3D geometry and materials.
AR Integration: @react-three/xr for native WebXR passthrough and plane detection.
State Management: zustand for centralized, fast, cross-component state (bridging 2D HTML UI and the 3D Canvas).
Gestures: @use-gesture/react utilizing Math.exp based movement tracking for perfectly smooth, mathematical pinch-to-zoom and rotation.
Styling: Tailwind CSS + custom glassmorphism for a premium, futuristic HUD aesthetic.

🚧 Challenges We Ran Into

WebXR Compositor Conflicts: Fusing standard HTML UI with a native WebXR camera feed resulted in "black screen" rendering bugs. We solved this by removing overly restrictive COOP/COEP headers and dynamically hiding the DOM video feed the exact millisecond the native AR session starts.
Gesture Mathematics: Handling multi-touch pinch-to-zoom that didn't "snap back" or scale infinitely required moving away from frame-by-frame deltas and instead applying an exponential function (Math.exp) to absolute pixel distances.
Geometry Alignment: Programmatically generating a gabled A-frame roof with correct ridge caps required precise trigonometric rotation offsets (Math.PI / 6) and spatial bounds calculation to ensure it didn't clip through the inner floor slabs.

✨ Accomplishments We're Proud Of

Zero-Friction AR: It runs directly in the mobile browser. No app store downloads, no massive installations. Just tap a link and drop a building on your desk.
Flawless UI/UX: Built a stunning, responsive Glassmorphism UI that feels like a native app HUD, complete with layer toggles and an X-Ray ghosting system.
True Real-Time Sync: Connecting a consumer-friendly tool (Google Sheets) to a complex WebGL environment, enabling anyone to "code" a 3D timeline just by typing in a spreadsheet.

🧠 What We Learned

State Synchronization: Zustand is incredibly powerful for bridging the gap between standard React DOM elements and the Three.js render loop without causing unnecessary re-renders.
WebXR Security: Browsers are highly protective of camera feeds. Proper handling of Permissions-Policy and CORS headers is critical for AR applications.
Mathematical UI: Implementing smooth user interactions (like 3D zooming) requires moving beyond linear addition and embracing multiplicative exponential math to match human perception.

🔮 What's Next for ConstructAR

Custom IFC/BIM Uploads: Replacing the programmatic demo building with a parser (like web-ifc) to allow users to drag-and-drop their actual Revit or AutoCAD models.
Multiplayer AR: Using WebSockets to allow the client and the site manager to view the exact same AR building simultaneously from different locations.
IoT Sensor Integration: Coloring columns dynamically based on live concrete-curing temperature sensors.