# Virtual Try-On Module for Clothing Using Augmented Reality (Web-Based)

**URL:** <https://discourse.threejs.org/t/virtual-try-on-module-for-clothing-using-augmented-reality-web-based/72476>\
**Category:** Questions\
**Tags:** augmented-reality, threejs\
**Created:** [October 6, 2024, 1:48pm UTC](https://discourse.threejs.org/t/virtual-try-on-module-for-clothing-using-augmented-reality-web-based/72476 "2024-10-06T13:48:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Talha\_Rajpoot](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/talha_rajpoot/32/52497_2.png) [@Talha\_Rajpoot](https://discourse.threejs.org/u/Talha_Rajpoot)\
**Post date:** [October 6, 2024, 1:48pm UTC](https://discourse.threejs.org/t/virtual-try-on-module-for-clothing-using-augmented-reality-web-based/72476/1 "2024-10-06T13:48:03Z")

</div>

I’m currently working on a project with a module dedicated to a virtual try-on feature for various clothing items (shirts, pants, suits, trousers) using augmented reality. This is a web-based application.

I want to utilize technologies such as **MediaPipe, Canvas, and Three.js** to render and display 3D models of the clothing items over the user’s body. However, I’m facing difficulties with the following aspects:

- \*\*\* Body Tracking and Clothing Alignment.\*\*
- \*\*\* 3D Model Display.\*\*

**If anyone has experience with similar applications or technologies, I would greatly appreciate your guidance!**

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [October 8, 2024, 2:34pm UTC](https://discourse.threejs.org/t/virtual-try-on-module-for-clothing-using-augmented-reality-web-based/72476/2 "2024-10-08T14:34:28Z")

</div>

> [@Talha\_Rajpoot](#):
>
> However, I’m facing difficulties with the following aspects:
> 
> - \*\*\* Body Tracking and Clothing Alignment.\*\*
> - \*\*\* 3D Model Display.\*\*

But that’s 100% of the aspects involved in that kind of application 😭

While this may not be a direct answer for you, from experience I can suggest you look towards [AI and inpainting](https://comfyanonymous.github.io/ComfyUI_examples/inpaint/) (combined with [segmentation](https://github.com/facebookresearch/segment-anything) controlnets that’ll allow you to detect clothes on the webcam feed) rather than MediaPipe and tracking. You’ll likely get significantly better results using a \<1sec LCM near-realtime generations than you’ll get trying to fit a mesh onto a webcam feed accurately.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 9, 2024, 1:12am UTC](https://discourse.threejs.org/t/virtual-try-on-module-for-clothing-using-augmented-reality-web-based/72476/3 "2024-10-09T01:12:29Z")

</div>

I wrote something like this before, and it was Hard. Had to do all kinds of crazy stuff. Filtering the stream data… building an IK rig with bones that track the blazepose data. There’s a reason why all the good solutions are commercial.