Inspiration
Climate change isn’t something happening outside — it’s entering our rooms. Sudden floods, intense heat, rising humidity, and fire hazards are affecting homes globally. Yet people can't see these risks in their daily living spaces.
We wanted to build something simple, accessible, and instantly usable: A browser-based AR tool that shows hidden climate and disaster risks inside any room — and guides people with smart fixes.
No downloads. No heavy apps. Just open the link → scan your room → see your future.
What it does
Our web-based AR system uses your phone camera to:
- Detect & Analyze Your Room (WebXR + JS)
Identifies walls, floors & objects
Measures distance and space
Detects ventilation gaps & heat-trap corners
- Simulate Climate & Disaster Impact
Through a Flask backend running lightweight ML rules + physics logic, it shows:
Future temperature increase zones
Humidity/ moisture-prone areas
Simulated flood water levels in AR
Fire-spread direction overlays
Unsafe furniture zones during earthquakes
- Provide Actionable Fixes
Shows recommended furniture shifts
Suggests ventilation improvements
Displays emergency escape path
Generates a “Room Safety Score”
How we built it
Frontend (HTML, CSS, JS)
Designed a clean, minimal UI for AR display
Used WebXR and Three.js to overlay 3D AR simulations
Implemented camera scanning for surface detection
Built interactive AR markers and heatmaps
Backend (Python Flask)
Flask API to process room parameters
ML-lite logic for climate risk scoring
Python-based simulation rules for:
Flood level calculation
Fire spread direction
Heat buildup prediction
Sent back JSON responses for AR overlay rendering
Data Processing
JS sends room scan data → Flask
Flask calculates risks → returns AR overlay instructions
Browser renders real-time AR with WebXR
Everything runs smoothly on any modern mobile browser — no external app needed.
Challenges we ran into
- Browser AR Limitations
WebXR has strict device support. We used fallbacks for devices that didn’t support full AR.
- Real-Time Performance
Running JS AR + Flask ML rules without lag was tough. We optimized by:
Caching frames
Sending only required data
Using light physics, not heavy models
- Accurate Room Depth
Depth estimation from a web camera is tricky. We solved it using:
Multi-frame depth approximation
Plane detection via Three.js
- UI Clutter
We simplified to color-coded overlays instead of complex 3D elements.
Accomplishments that we're proud of
Built working AR in a browser, no app installation
Achieved responsive AR overlays using only HTML, CSS, JS
Integrated Python Flask for real-time climate + disaster risk logic
Created simulations that users immediately understand
Made a climate-resilience tool that anyone can use instantly
What we learned
How to push the limits of WebXR and Three.js
How to design for speed, clarity, and real-time feedback
Lightweight disaster modeling with Python
Real-world mapping of climate factors to room layouts
The importance of intuitive UX in AR experiences
What's next for AR Climate-Adaptive & Disaster-Proof Home
- Full House 3D Model (not just room)
Allow users to scan and build a complete AR safety map.
- Real-Time Climate API Integration
Use weather data + government risk zones for alerting.
- AI Home Safety Chatbot
A voice assistant that guides you through safety improvements.
- Integration with Builders & Smart Cities
Provide AR-based safety audits for buildings.
- Offline PWA Support
Make it usable even without internet.
- Insurance Collaboration
Safety score → lower home insurance premiums.
Log in or sign up for Devpost to join the conversation.