Wiggle

Inspiration

The inspiration for Wiggle came from the disconnect between online shopping and the physical fitting room experience. We wanted to create a solution that helps users visualize how clothes would actually look and move on their bodies, reducing return rates and increasing buyer confidence in online fashion.

What it does

Wiggle is an interactive 3D clothing visualization platform that allows users to:

• Upload or select clothing items
• See realistic 3D models of the clothing
• Visualize how fabrics move and drape in real-time
• Customize colors and patterns
• View items from any angle

How we built it

• Frontend: Next.js with React Three Fiber for 3D rendering
• 3D Physics: Custom physics engine integration for realistic cloth simulation
• Backend: Python FastAPI server for processing 3D models
• 3D Processing: Custom pipeline for converting 2D patterns to 3D models
• Database: Weaviate for efficient 3D model storage and retrieval
• Workflow Automation: N8N for automating the 3D model generation pipeline

Challenges we ran into

1. Performance Optimization: Achieving smooth 60fps rendering for complex 3D models
2. Cloth Physics: Creating realistic fabric movement that's both accurate and performant
3. Model Accuracy: Ensuring 3D models accurately represent real-world clothing
4. Cross-platform Compatibility: Making the experience consistent across devices and browsers
5. Asset Management: Handling large 3D model files efficiently

Accomplishments that we're proud of

• Created a working prototype that demonstrates real-time cloth physics in the browser
• Successfully implemented a pipeline for converting 2D patterns to 3D models
• Achieved sub-100ms response time for model loading and rendering
• Built an intuitive UI that makes 3D visualization accessible to non-technical users
• Implemented a scalable backend that can handle multiple concurrent users

What we learned

• Advanced 3D graphics programming and WebGL optimization techniques
• The complexities of real-time physics simulation
• Best practices for 3D asset optimization
• How to handle large file uploads and processing efficiently
• The importance of progressive loading for 3D content

What's next for Wiggle

1. AI Integration: Implement machine learning to predict how different fabrics will drape
2. AR Try-On: Add augmented reality features for virtual try-ons
3. Social Features: Allow users to share their virtual outfits
4. Marketplace Integration: Partner with online retailers to implement direct purchasing
5. Custom Avatars: Add support for personalized body measurements and avatars
6. Fabric Simulation: More advanced material properties and behaviors
7. Mobile Optimization: Enhanced experience for mobile devices

Built With

• fastapi
• github
• glsl
• modal
• n8n
• next.js
• python
• react-three-fiber
• tailwind-css
• three.js
• typescript
• vercel
• weaviate
• webgl