Web AR Clothing & Jewelry Try-On

Open

Prize:

$100 CAD

Entries Received:

8 days, 16 hours remaining

PS - I do not want a redesign of my website. I want the Test On Live Webcam enhanced. I need a web-based virtual try-on experience that lets shoppers see how clothes and jewelry look on them on my website idesignits.com. Enhance Test On Live Webcam feature of my website . On the front end, visitors should be able to choose between a live webcam stream or a single photo upload; whichever method they pick, the system needs to detect their body and face, scale the selected item accurately, and put it on in real time. The scope covers two product categories for launch—clothing (tops, dresses, outerwear) and jewelry (earrings, necklaces, bracelets). Each item will come from a 2D PNG overlay or a lightweight 3D glTF file, so the module must accept either format and keep loading times low. Rendering quality matters: shadows, reflections, and fabric fall should feel natural enough to encourage a purchase decision. Under the hood, you are free to choose WebGL, Three.js, Mediapipe, TensorFlow.js or similar libraries, provided everything runs directly in the browser—no native installs and no external apps. I’ll supply sample product models and reference images; you deliver a plug-and-play component plus clear setup documentation so I can drop it into an existing React-based storefront later. Deliverables • Responsive web component (HTML/JS/CSS) embeddable on any HTTPS site • Support for live webcam and still-photo modes, switchable by the user • Accurate body/face tracking and auto-scaling for clothing and jewelry overlays • Admin-side JSON or simple UI for adding new SKUs, model files, and positioning data • Source code, build instructions, and a short video demo proving everything works Acceptance criteria • Alignment accuracy good enough that items stay in place during normal head/body movement • Smooth performance on recent Chrome, Firefox, Safari (desktop & mobile) at 30 fps or better • All assets lazy-loaded; initial bundle ≤2 MB to keep first paint fast • No server-side processing except for static file hosting—everything runs client-side Once the module meets those points, we’re done. I’m ready to start as soon as you are.

Guaranteed

Skills Required

3D Modelling

Augmented Reality

HTML

JavaScript

PHP

Three.js

Web Development

Website Design

Accepted File Formats

gif, jpeg, jpg, png

Clarification Board
No spam, self-promotion or advertisement is permitted.

Haiqa A.

@ansarihaiqaarif

33 minutes ago

#104

Garaga G.

@devisingh0001

7 hours ago

Please check #102

Hala A.

@halaa020

2 days ago

#80 and #69

Shifullah S.

@saifsg420

2 days ago

working on it; please wait

Adam O.

@adamo61

3 days ago

I'm working on something you'll like, and I'll send you a link to view the website.

Hala A.

@halaa020

5 days ago

Hi! I've just submitted another entry #70 with a different design direction. This version focuses on a cleaner interface, improved user experience, and a more polished virtual try-on workflow while following the contest requirements. I'd really appreciate it if you could take a look, and I'm happy to make any revisions based on your feedback. Thank you!

Hala A.

@halaa020

5 days ago

Hi! I've submitted my entry #69. I carefully followed your contest brief and focused on creating a clean, modern, and responsive virtual try-on experience with a premium look and an intuitive user interface. I paid close attention to the layout, colors, spacing, and overall user experience to make it feel like a feature that could be integrated into a real e-commerce website. If you'd like any changes or improvements, I'd be happy to update the design based on your feedback. Thank you for taking the time to review my entry, look forward to hearing your thoughts.

Muhammad J.

@webtechwhiz

5 days ago

Hi, please check Entry #66. I’ll refine it further based on your feedback and share a polished, fully functional demo link with you tomorrow. Looking forward to your thoughts.

Abdel Ghani Y.

@thevipron

5 days ago

Hi, I was testing your website and noticed a few issues, and I also have some ideas that might improve the overall experience. I'm not a web developer or programmer—I'm a professional 3D designer. I'd be happy to help within my area of expertise, whether for this project or any future work. Feel free to reach out anytime. I wish you the very best with your current project!

Md. Z.

@zakariacomputer0

5 days ago

✅Please check my entry #58. I hope you like the design. I'm happy to make any revisions based on your feedback. Thank you for your time and consideration!