🚀 Project: OmniSpace IoT
Inspiration
Traditional smart home interfaces are trapped in long, text-heavy lists. When your ecosystem grows to dozens of devices, finding the right "Light Switch #4" becomes a cognitive burden. We were inspired by the concept of the Digital Twin—the idea that our digital controls should mirror our physical reality. We wanted to create a paradigm shift: moving from "list-based management" to "spatial interaction," making home control as intuitive as pointing at an object in a room.
What it does
OmniSpace IoT is a high-fidelity digital twin platform that transforms your living space into an interactive 3D dashboard.
Dual-View Experience: Seamlessly toggle between a functional 2D floorplan and an immersive 3D environment.
Spatial Device Mapping: IoT devices are mapped to their exact physical coordinates, allowing users to control hardware by interacting with the digital model.
Real-time Shader Visualization: Instead of static icons, we use dynamic visuals to represent data. You can see temperature gradients, light intensity, and air quality through beautiful, real-time heatmaps and particle flows.
Contextual Control: A "Tesla-style" dark-mode UI provides a premium, responsive experience optimized for pads and touch interfaces.
How we built it
The Core: Built with React and React Three Fiber (R3F) to create a declarative and highly reactive 3D scene graph.
Custom Graphics: To achieve a "next-gen" look, we wrote Custom GLSL Shaders for device highlights, floor textures, and environmental effects (like "energy fields" for active appliances).
Animation Engine: We used Framer Motion and React Spring to bridge the gap between 2D UI elements and 3D space, ensuring fluid transitions and organic feedback.
State Management: Leveraged React’s state ecosystem to synchronize real-time IoT telemetry with WebGL uniform variables in the shaders.
Challenges we ran into
Shader Performance & Optimization: Running multiple complex shaders in a mobile browser while maintaining 60 FPS was a major hurdle. We had to optimize our GLSL code and implement efficient texture packing to reduce draw calls.
Coordinate Synchronization: Perfectly aligning the 2D SVG floorplan coordinates with the 3D world space (and handling raycasting for precise object selection) required building a custom mapping utility.
Reactive 3D Bridges: Passing high-frequency data from the IoT backend into the Three.js render loop without causing React re-render bottlenecks.
Accomplishments that we're proud of
Premium Aesthetic: We successfully brought a "DJI/Tesla" level of UI sophistication to a web-based IoT dashboard.
Intuitive UX: Created a system where users can understand the "health" of their entire home in a single glance without reading a single line of text.
Technical Architecture: Developed a reusable library of React components that can turn any 3D model into an interactive "Smart Object."
What we learned
Shader-Driven UI: We learned that GLSL is a powerful tool for UI design, allowing for visual effects that are impossible with standard CSS.
WebGL in React: Deepened our expertise in managing the lifecycle of WebGL contexts within the React component tree.
Spatial Design: Discovered that in 3D UIs, spatial hierarchy and lighting are just as important as traditional layout and typography.
What's next for OmniSpace IoT
Matter & Google Home API Integration: Bringing the project into the real world by connecting it to the Matter protocol for universal device compatibility.
Gemini-Powered Spatial Intelligence: Integrating Google’s Gemini to enable "Spatial NLP." Users could say, "Google, dim the lights near the sofa," and the system would use the 3D coordinates to identify the exact devices.
Automated Floorplan Reconstruction: Using smartphone LiDAR to allow users to "scan" their rooms and instantly generate an interactive OmniSpace dashboard.
Log in or sign up for Devpost to join the conversation.