AR Try-On Development for E-Commerce Stores

Imagine an online eyewear store losing up to 30% of potential buyers because customers can't try on frames. AR try-on solves this: the user turns on the camera, the system detects the face via MediaPipe FaceMesh and overlays a 3D frame model in real time. Result: conversion up 40%, returns down 30%. Our experience in AR for fashion and retail shows that virtual try-on pays for itself within 6–12 months for catalogs of 500+ SKUs. Pinpoint your case — we'll find the optimal stack for your budget.

Technically, browser AR requires computer vision, 3D rendering, and web APIs. We use proven technologies: WebXR for immersive space, MediaPipe for face and body tracking, Three.js for 3D rendering, and model-viewer for quick Room AR. Contact us for a project assessment.

How glasses try-on works algorithmically

Stack for glasses:

Camera → getUserMedia() → MediaPipe FaceMesh → 468 landmark points → Three.js / Babylon.js → 3D glasses model (GLTF) → Align model to face points (nose bridge, temples, ears) → Render over video feed → Display in <canvas> 

import { FaceMesh } from '@mediapipe/face_mesh'; import { Camera } from '@mediapipe/camera_utils'; const faceMesh = new FaceMesh({ locateFile: file => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}` }); faceMesh.setOptions({ maxNumFaces: 1, refineLandmarks: true, minDetectionConfidence: 0.7, minTrackingConfidence: 0.7, }); faceMesh.onResults(results => { if (!results.multiFaceLandmarks.length) return; const landmarks = results.multiFaceLandmarks[0]; // Key points for glasses: const noseBridge = landmarks[6]; const leftTemple = landmarks[234]; const rightTemple = landmarks[454]; const leftEar = landmarks[93]; const rightEar = landmarks[323]; updateGlassesModel({ noseBridge, leftTemple, rightTemple, leftEar, rightEar }); }); 

Aligning the 3D model to face points:

1. Compute center, tilt angle, and scale from temple and nose bridge coordinates.
2. Apply transformations to the 3D object: position, rotation, scale.
3. Render via Three.js over the video feed (canvas overlay with mix-blend-mode: multiply or transparent background).

On a project for an eyewear retailer with 2000 SKUs, we reduced the average try-on latency from 8 seconds to 1.2 seconds by optimizing the MediaPipe pipeline and implementing a model cache.

Why 3D models for AR are the bottleneck?

Requirements for GLTF models in AR try-on:

For each product — a separate GLTF file. With 500 SKUs — 500 models. This is the main operational complexity: content modeling, not widget development. Alternative — 2D layer overlay: a cut-out image is deformed to face points. Less realistic but models are prepared in Photoshop.

Types of AR try-on and technology stack

Face AR (face): glasses, sunglasses, masks, makeup, headwear. Base — face landmark detection (468 points MediaPipe Face Mesh). This is the most mature and stable technology for browser.

Body AR: clothing, shoes on the whole body. Requires pose estimation (MediaPipe Pose / BlazePose). More complex due to fabric deformation and pose variability.

Room AR (placement in space): furniture, decor, appliances in the interior. Based on plane detection — finding horizontal surfaces (floor, table) via SLAM or depth sensor. For quick start we use <model-viewer> from Google.

Hand AR: rings, watches, bracelets. Uses MediaPipe Hands (21 keypoints per hand).

Cosmetics (virtual makeup)

For lipstick, blush, eyeshadow — not a 3D model, but coloring face regions by mask.

// Get lip mask from landmark points const lipPoints = [61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291, ...]; const lipPath = lipPoints.map(i => landmarks[i]); // Draw on canvas over video ctx.beginPath(); lipPath.forEach((point, i) => { const x = point.x * canvas.width; const y = point.y * canvas.height; i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); }); ctx.closePath(); ctx.globalAlpha = 0.6; ctx.fillStyle = selectedColor; ctx.fill(); 

Realism is improved via blending modes and ambient light estimation from MediaPipe.

Room AR — furniture placement

For placing furniture in an interior, plane detection is needed. In browser this is possible via WebXR API (Chrome on Android with ARCore) and partially via heuristics.

if (navigator.xr) { const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test', 'local'] }); // ... } 

On iOS we use AR Quick Look via USDZ files. Universal component — <model-viewer> from Google:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script> <model-viewer src="chair.glb" ios-src="chair.usdz" ar ar-modes="webxr scene-viewer quick-look" camera-controls auto-rotate alt="AR try-on for furniture: office chair" style="width: 400px; height: 400px;" > <button slot="ar-button">View in your space</button> </model-viewer> 

ar-modes="webxr scene-viewer quick-look" — automatically picks the best available mode.

Custom development vs SaaS: which is more cost-effective?

Ready SDKs (Banuba, Perfect Corp, Zakeke) cut time to market to 2–4 weeks but require monthly subscriptions (e.g., $500/month). Custom solution on MediaPipe and WebXR has no license fees and gives full control, which is more cost-effective for catalogs from 200 products. License savings can reach $10,000/year over two years. Comparison: custom solution is 2–3 times cheaper than licensed SDKs when scaling to 500 products.

What's included in the work

1. Requirements analysis and technology selection (Face/Body/Room AR)
2. Prototyping on the client's actual products
3. Integration with existing CMS/catalog
4. 3D model preparation or training your designers
5. Testing on devices (iOS, Android, desktop)
6. Documentation and team training
7. One month of post-launch support

Typical mistakes in AR implementation

• Ignoring LOD — a 50k polygon model lags on mobile
• Incorrect model scale in meters — glasses float in the air
• No fallback for browsers without WebXR — user sees empty screen
• Too large textures (2048×2048) — long loading time

Performance metrics

Typical data from cases: conversion of AR users is 20–40% higher, return rate decreases by 20–30% for glasses and cosmetics. This helps reduce returns and boosts augmented reality retail adoption.

Timelines

• Room AR via <model-viewer>: 1–2 weeks (development), main time is 3D model preparation
• Face AR for glasses (MediaPipe + Three.js): 6–10 weeks
• Cosmetics/makeup (pixel-level blending): 4–8 weeks
• Integration of Banuba/YouCam SDK: 2–4 weeks + license cost

3D content preparation is a separate budget item, often larger than the development itself. Contact us for a project assessment.

We offer custom AR development as a core service. With 5+ years of experience, 50+ projects, and trusted by 30+ e-commerce brands, we guarantee your AR integration e-commerce will reduce returns and boost conversion. Contact us for a free consultation.