Sunlight Simulation

Inspiration The inspiration for this project came from the growing need for sustainable architecture and energy-efficient home design. As climate change becomes an increasingly pressing concern, architects and homeowners need better tools to understand how natural light affects their living spaces throughout the year. Traditional architectural software often lacks intuitive, real-time sunlight simulation capabilities that are accessible to both professionals and everyday users.

We were inspired by the potential to democratize architectural analysis - making professional-grade lighting assessment tools available to anyone planning to build or renovate their home. The vision was to create a beautiful, user-friendly platform that could provide actionable insights about natural lighting, shadow patterns, and energy efficiency.

What it does Sunlight Simulation is a comprehensive 3D home design analysis platform that provides:

Core Features 3D Model Visualization: Upload GLB files or choose from 5 professionally designed demo house models (Modern Contemporary, Traditional Colonial, Mediterranean Villa, Craftsman Bungalow, and Minimalist Cube) Real-time Sunlight Simulation: Interactive sun path controls with seasonal variations (Winter Solstice, Summer Solstice, Spring/Fall Equinox) AI-Enhanced Analysis: Intelligent room detection and lighting analysis powered by advanced AI Comprehensive Shadow Analysis: Detailed shadow length calculations, direction tracking, and hourly shadow data throughout the day Professional Reporting: Beautiful PDF reports with optimization recommendations and visual metrics Advanced Analytics Room-by-room lighting exposure analysis (0-100% scale) Peak lighting hours identification Seasonal lighting variation calculations Energy efficiency assessments Shadow length tracking with min/max daily values Cardinal direction shadow casting analysis User Experience Authentication System: Secure user accounts with model saving and management Cloud Storage: Save and access your 3D models from anywhere Responsive Design: Works seamlessly across desktop, tablet, and mobile devices Real-time Animation: Watch shadows move throughout the day with time-lapse animation

How we built it

Technology Stack Frontend: React 18 with TypeScript for type safety and modern development 3D Graphics: Three.js with React Three Fiber for WebGL-based 3D rendering Styling: Tailwind CSS for responsive, utility-first styling Backend: Supabase for authentication, database, and file storage AI Integration: OpenRouter API with Gemini 2.0 Flash for intelligent analysis Build Tool: Vite for fast development and optimized production builds Deployment: Netlify for seamless CI/CD and global CDN Architecture Decisions Component-Based Architecture: Modular React components for maintainability Custom 3D Models: Procedurally generated house models using Three.js geometry Fallback Systems: Robust fallback analysis when AI services are unavailable Progressive Enhancement: Core functionality works without AI, enhanced features with AI Real-time Calculations: Client-side sun position and shadow calculations for instant feedback Key Implementation Highlights Advanced Shadow Calculations: Mathematical models for accurate shadow length and direction based on sun elevation and azimuth Material-Based Rendering: Realistic materials with proper roughness, metalness, and transparency Responsive 3D Viewport: Adaptive camera controls and lighting for optimal viewing Smart Room Detection: AI-powered analysis of 3D geometry to identify room types and characteristics Professional PDF Generation: Custom PDF layouts with charts, metrics, and recommendations

Challenges we ran into

Technical Challenges

3D Model Complexity: Creating realistic, performant 3D house models that render smoothly across different devices while maintaining architectural accuracy Shadow Calculation Precision: Implementing mathematically accurate shadow calculations that account for building geometry, sun position, and seasonal variations AI Integration Reliability: Building robust fallback systems when AI services are unavailable or slow, ensuring the app remains functional File Upload Handling: Managing large GLB file uploads with proper validation, error handling, and progress feedback Cross-browser Compatibility: Ensuring WebGL and Three.js work consistently across different browsers and devices

Design Challenges

Complex UI/UX: Balancing powerful features with intuitive usability - making professional-grade tools accessible to non-experts Performance Optimization: Maintaining smooth 60fps rendering while calculating real-time lighting and shadows Responsive 3D Design: Creating a 3D viewport that works well on both desktop and mobile devices Data Visualization: Presenting complex lighting analysis data in visually appealing, understandable formats

Integration Challenges

Authentication Flow: Implementing seamless user experience for both authenticated and anonymous users Real-time Synchronization: Coordinating 3D scene updates with UI controls and analysis results Error Handling: Graceful degradation when services fail, with meaningful user feedback Accomplishments that we're proud of Technical Achievements Realistic 3D Rendering: Created beautiful, architecturally accurate house models with proper materials and lighting Advanced Shadow Analysis: Implemented comprehensive shadow calculations including hourly tracking and seasonal variations AI-Powered Intelligence: Successfully integrated AI for intelligent room detection and professional-grade recommendations Professional PDF Reports: Generated publication-quality reports with charts, metrics, and actionable insights Seamless User Experience: Built an intuitive interface that makes complex architectural analysis accessible Innovation Highlights Procedural Model Generation: Created 5 distinct architectural styles programmatically with Three.js Real-time Animation: Smooth time-lapse animation showing shadow movement throughout the day Hybrid Analysis: Combined geometric calculations with AI insights for comprehensive analysis Responsive 3D Design: Achieved excellent performance across devices from mobile to desktop Professional Quality: Built a production-ready application worthy of commercial use User Experience Wins Zero Learning Curve: Intuitive interface that requires no training or technical knowledge Instant Feedback: Real-time visual updates as users adjust sun position and time Beautiful Design: Apple-level design aesthetics with attention to micro-interactions Comprehensive Features: Professional-grade analysis tools in an accessible package

What we learned

Technical Insights

3D Web Development: Gained deep expertise in Three.js, WebGL optimization, and browser-based 3D rendering Mathematical Modeling: Learned complex solar calculations, shadow geometry, and architectural lighting principles AI Integration: Discovered best practices for integrating AI services with robust fallback mechanisms Performance Optimization: Mastered techniques for maintaining smooth performance in complex 3D applications File Handling: Learned efficient strategies for handling large file uploads and 3D model processing Design Learnings 3D UX Design: Understanding how to create intuitive interfaces for 3D applications Data Visualization: Effective techniques for presenting complex analytical data Progressive Disclosure: Managing feature complexity through thoughtful information architecture Responsive 3D: Adapting 3D experiences for different screen sizes and input methods Product Development User-Centered Design: The importance of making professional tools accessible to everyday users Fallback Strategies: Building resilient systems that gracefully handle service failures Performance vs Features: Balancing rich functionality with smooth user experience Iterative Development: The value of rapid prototyping and user feedback in 3D applications

What's next for Sunlight Simulation

Immediate Enhancements Advanced Material Support: PBR materials, texture mapping, and realistic surface properties Weather Integration: Real-time weather data affecting lighting conditions and analysis Energy Calculations: Detailed energy consumption predictions based on lighting analysis Collaborative Features: Team sharing, comments, and collaborative analysis workflows Mobile App: Native iOS/Android apps with AR visualization capabilities

Advanced Features

VR/AR Integration: Immersive visualization using WebXR for virtual and augmented reality IoT Integration: Connect with smart home sensors for real-world lighting validation Machine Learning: Predictive models for energy savings and optimization recommendations Building Codes: Automated compliance checking against local building regulations Landscape Analysis: Include trees, neighboring buildings, and terrain in shadow calculations Platform Expansion Commercial Tools: Professional features for architects and building designers API Platform: Developer APIs for integration with CAD software and design tools Marketplace: Community-driven model sharing and professional template library Educational Platform: Learning modules about sustainable architecture and lighting design Global Expansion: Localized sun path data for different geographic regions

Long-term Vision

Transform Sunlight Simulation into the leading platform for sustainable architecture analysis, empowering millions of users to make informed decisions about natural lighting, energy efficiency, and environmental impact in their building projects.

Built With

• supabase