WEARFITS Shoes AR Try-On

Overview

The WEARFITS Shoes AR Try-On enables customers to visualize footwear in augmented reality using AI-generated 3D models. The process is simple:

1. Upload Images - Submit 1-4 images of a shoe
2. AI Processing - Our AI generates a 3D model (takes 1-5 minutes)
3. AR Ready - Receive an AR viewer URL with QR code
4. Customer Experience - Customers scan QR code to view shoe in AR

How It Works

1. Image Upload

Upload 1-4 high-quality images of the shoe. Multiple angles improve 3D model quality:

• Single image - Use a perspective view showing both front and side of the shoe (3/4 angle)
• Multiple images - Front, side, back, and top views for best results

2. 3D Model Generation

Our AI processes the images using state-of-the-art 3D reconstruction technology. The best model is automatically selected for optimal results.

3. AR Viewer

Once processing completes, you receive an AR viewer URL. Customers can:

• Scan QR code with their smartphone
• View the shoe in augmented reality
• Place the 3D model in their real environment
• See realistic proportions

API Reference

Base URL

https://api.wearfits.com/v1

Authentication

All requests require an API key in the header:

X-API-Key: your-api-key

1. Upload Base 3D Model (Optional)

If you already have a 3D model of the shoe in .glb format, you can upload it directly to bypass the AI 2D-to-3D generation phase.

POST /v1/files/upload
Content-Type: multipart/form-data

Request Fields

Response

{
  "url": "https://storage.wearfits.com/uploads/abc-123.glb"
}

2. Submit Shoe 3D Generation Job

POST /v1/shoe-3d

{
  "images": [
    "https://example.com/shoe-front.jpg",
    "https://example.com/shoe-side.jpg"
  ],
  "glbInput": "https://storage.wearfits.com/uploads/abc-123.glb",
  "options": {
    "uploadToWearFits": true,
    "rightShoe": false
  }
}

Request Fields

Response

{
  "jobId": "d6543a37-7867-4986-af23-856501c1338d"
}

3. Check Job Status

GET /v1/jobs/{jobId}

Response (Processing)

{
  "id": "d6543a37-7867-4986-af23-856501c1338d",
  "status": "processing",
  "progress": {
    "stage": "generating_3d_model",
    "percentage": 45
  }
}

Response (Completed)

{
  "id": "d6543a37-7867-4986-af23-856501c1338d",
  "status": "completed",
  "mode": "shoe-3d",
  "results": [
    {
      "url": "https://storage.example.com/model.glb",
      "expiresAt": "2026-01-22T00:43:10.895Z"
    }
  ],
  "wearfitsTryOn": {
    "modelId": "shoe-model-123",
    "colorId": "color-456",
    "viewerUrl": "https://dev.wearfits.com/tryon/shoe/shoe-model-123/color-456"
  },
  "progress": {
    "stage": "completed",
    "percentage": 100
  }
}

Job Status Values

Frontend Integration

Once you've generated the AR viewer URL via the API (backend), add a "Try On" button to your product pages:

AR Viewer URL Format

https://dev.wearfits.com/tryon?object={id}

Store this URL in your product database after generating the 3D model via the API.

Simple Button Link

<!-- Direct link to AR viewer -->
<a href="https://dev.wearfits.com/tryon?object=abc123"
   target="_blank"
   class="tryon-button">
  Try On in AR
</a>

Button with QR Code

<div class="shoe-tryon">
  <!-- QR Code for mobile scanning -->
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://dev.wearfits.com/tryon?object=abc123"
       alt="Scan to try on" />

  <p>Scan with your phone to try on</p>

  <a href="https://dev.wearfits.com/tryon?object=abc123"
     target="_blank">
    Open AR Viewer
  </a>
</div>

Dynamic JavaScript Example

// Product data from your backend (AR URL already generated)
const product = {
  id: 'shoe-001',
  name: 'Running Sneaker',
  arViewerUrl: 'https://dev.wearfits.com/tryon?object=abc123'
};

// Generate QR code URL
function getQrCodeUrl(arUrl) {
  return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(arUrl)}`;
}

// Add try-on button to product page
function addTryOnButton(product) {
  const button = document.createElement('a');
  button.href = product.arViewerUrl;
  button.target = '_blank';
  button.className = 'tryon-button';
  button.textContent = 'Try On in AR';

  document.querySelector('.product-actions').appendChild(button);
}

Best Practices

1. Image Requirements (for API)

• Use high-quality images (minimum 500x500px, recommended 1000x1000px)
• White or neutral background for best results
• Good lighting without harsh shadows
• Multiple angles improve 3D quality significantly
• Supported formats: JPEG, PNG, WebP

2. Backend Integration

• Pre-generate 3D models when products are added to your catalog
• Store AR viewer URLs in your product database
• 3D generation takes 1-5 minutes - run as background job
• Cache generated AR URLs by product ID

3. Frontend User Experience

• Place "Try On in AR" button prominently on product pages
• Provide clear instructions for QR code scanning
• Offer both QR code and direct link for flexibility
• Consider showing QR code on desktop, direct button on mobile

4. Job Persistence

The WEARFITS shoes try-on app automatically persists in-progress jobs across page reloads:

• If a user refreshes the page during 3D model generation, the job will automatically resume
• Pending jobs are stored in localStorage with a 15-minute expiration
• Once the job completes or fails, the pending state is cleared
• This ensures users don't lose their progress if they accidentally navigate away

Need Help?

For technical support and API access, contact our support team

View Clothing Try-On Integration Guide

📄 View as Markdown