Shoes & Bags AR Try-On
Real-time 3D/AR virtual try-on solution for footwear, bags, and backpacks.
What It Does
3D product models are displayed live on the camera view (augmented reality) allowing shoppers to virtually try on shoes, bags, and backpacks before purchasing. The system uses machine learning for foot/body detection and optical flow for smooth, stable tracking.
Key Features
- Mobile AR — point your phone camera at your feet to try on shoes in real-time
- Desktop viewer — on-screen try-on experience for monitors
- Mirror mode — designed for large digital mirrors in physical retail stores (mirror modes 1–5)
- 3D product management — upload GLB models, edit textures and materials, adjust lighting, position products
- Tron editor — fine-tune product positioning in the AR scene with ML-assisted auto-positioning
- Auto-positioning — shoes are automatically positioned using ML; bags/backpacks require manual setup
- Turbo mode — alternating ML/optical-flow pipeline for higher FPS on footwear
- Pose detection — multiple quality levels (lite/full/heavy) for accessories on body (bags, backpacks)
- Multi-language — UI supports English, Polish, German, Czech, Slovak, Lithuanian, Latvian, and more
- Video recording — capture try-on sessions as MP4 (via settings panel)
- Partner white-labeling — custom branding for partners (e.g., Zara, Inditex, Nanovo)
Integration Options
| Method | Description | Best for |
|---|---|---|
| AR code / link | Client gets a code or URL to put on their website | Simplest setup |
| Iframe embed | Embed the try-on viewer in an iframe on any page | Seamless web integration |
| Digital mirror | Full-screen AR on large display with camera | Physical retail stores |
| Shopify plugin | Native integration via the WEARFITS Shopify App | Shopify stores |
| REST API | Programmatic model upload and management | Custom integrations |
Domain
- Web UI & API: dev.wearfits.com
- Try-on viewer: dev.wearfits.com/tryon
Adding Products
Products can be added via: 1. Web interface at dev.wearfits.com — upload GLB/GLTF/OBJ/STL files, manage models visually 2. REST API — programmatic product management (see API Reference) 3. 2D→3D Generator — if you don't have 3D models, use the Shoe 2D→3D converter to auto-generate them from photos
Supported File Formats
- Upload:
.glb,.gltf,.obj,.stl,.zip(containing OBJ + MTL + textures) - Export: GLTF, OBJ, DRC (Draco compressed), USDZ (for Apple AR)
- Max file size: 30 MB per upload
Tech Stack
| Component | Technology |
|---|---|
| Runtime | Node.js 24.x on GCP App Engine (Flexible) |
| Storage | GCP Cloud Storage (3D objects, textures, configs) |
| ML | TensorFlow.js, ONNX Runtime, native WASM models |
| 3D Rendering | Three.js |
| Real-time | Socket.io |
Further Reading
- API Reference — REST API for model upload and management
- User Guide — 3D editors, Try-on editors, product administration
- SDK & Integration Guide — iframe embedding, postMessage API, URL parameters
- Legacy Docs — legacy integration documentation (WEARFITS/docs repo)
- Live Demo — interactive product demo