Inspiration
Environmental problems often feel invisible and distant. We wanted to make global impact visible, interactive, and motivating. Inspired by cyberpunk interfaces, games, and real-world sustainability challenges, we imagined a platform where users could see the planet respond to their actions in real time.
What it does
EcoSphere XR is an AI-powered, cyberpunk-style web platform featuring a live 3D globe. Users report environmental issues, scan waste with AI, and complete impact missions. Every action dynamically heals the planet through visual effects, points, and global collaboration.
How we built it
We built EcoSphere XR using React and TypeScript with React Three Fiber for the interactive 3D globe. TensorFlow.js powers in-browser AI for waste recognition. Supabase handles authentication, leaderboards, and real-time updates. TailwindCSS drives the cyberpunk UI.
Challenges we ran into
Balancing performance with real-time 3D visuals and AI processing was challenging. Optimizing shaders, managing state updates, and ensuring smooth interaction across devices required careful tuning and testing.
Accomplishments that we're proud of
We created a fully functional, visually immersive platform that combines AI, 3D graphics, and gamification. The real-time globe reactions and AI-powered impact feedback make sustainability engaging and intuitive.
What we learned
We learned how to integrate AI directly in the browser, optimize real-time 3D rendering, and design systems that motivate user behavior through visual feedback and gamification.
What's next for EcoSphere XR
We plan to expand AI accuracy, add real-world environmental data sources, introduce mobile and AR support, and partner with local communities to turn digital actions into real-world impact.
Log in or sign up for Devpost to join the conversation.