Survey of the Virtual Try-On System

Abstract

The rapid growth of online fashion retail has created a strong demand for intelligent visualization systems capable of simulating how garments appear on the human body before purchase. Traditional e-commerce platforms lack this capability, resulting in size uncertainty, poor fit prediction, and high return rates. This paper presents a comprehensive Virtual Try-On System that enables real-time garment overlay using pose estimation, segmentation, dynamic garment fitting, and interactive adjustment controls. The system employs MediaPipe Pose for landmark tracking, OpenCV for real-time rendering, rembg for background removal, and a modern UI developed with HTML, CSS, React.js, and Vite for a responsive and interactive user experience. The enhanced system introduces gender- and clothing-type–based segmentation, manual garment resizing, vertical positioning adjustments, an updated UI, and a new feature: garment loading via user-provided URLs. Results demonstrate improved pose alignment accuracy, higher visual realism, and increased usability compared to earlier versions. The system offers significant benefits for e-commerce platforms, personal styling applications, and sustainable fashion practices.

Introduction

The text presents a real-time Virtual Try-On System designed to improve online fashion shopping by allowing users to visually try garments using a webcam. It addresses key issues in e-commerce such as uncertainty in fit, styling mismatch, and high return rates by providing an interactive AR-based solution.

The system integrates computer vision and deep learning techniques, including MediaPipe for pose estimation, rembg for background removal, and OpenCV for real-time garment overlay. It uses shoulder landmarks to accurately position and scale clothing, while additional features like gender and clothing-type segmentation, manual resizing, and vertical positioning controls improve fitting accuracy and personalization. Users can also upload garments via file or URL, enhancing accessibility.

A modern frontend built with React.js, HTML, CSS, and Vite enables a responsive and interactive user experience with real-time webcam preview and adjustment tools. The system follows a modular pipeline: input acquisition, image preprocessing, pose detection, segmentation, and final rendering.

Testing results show significant improvements over previous systems, including higher FPS (35–45 vs 24), better overlay accuracy, improved UI responsiveness, and a higher realism score (9.3/10 vs 7.1/10).

Conclusion

The Virtual Try-On System presents an effective and highly interactive approach to virtual garment visualization. By combining pose estimation, segmentation, manual controls, real-time rendering, and a modern React.js interface, it offers users a realistic and dynamic try-on experience. With additional enhancements like garment loading via URL, the system demonstrates strong potential for widespread adoption in e-commerce, personal wardrobe management, and digital fashion technologies.

References

[1] OpenCV Library OpenCV is an open-source computer vision and machine learning software library used for real-time image processing, resizing, alpha blending, and webcam video manipulation in this project. Reference: OpenCV Documentation–https://docs.opencv.org/ [2] Media Pipe Pose Framework MediaPipe Pose is a cross-platform framework developed by Google for high-fidelity real-time body landmark detection. It is used to detect shoulder, torso, and body orientation in the Virtual Try-On System. Reference: MediaPipe Pose Documentation – https://google.github.io/mediapipe/solutions/pose.html [3] Rembg (Background Removal Tool) rembg is a Python package that utilizes deep learning models such as U-2-Net to remove background from images efficiently, producing transparent garment cutouts for clean overlays. Reference: rembg GitHub Repository –https://github.com/danielgatis/rembg [4] React.js React.js is a JavaScript library developed by Meta for building fast, interactive, and component-based user interfaces. It powers the frontend of the VirtualTry-OnSystem. Reference: React.js Official Documentation – [5] Vite (Frontend Build Tool) Vite is a modern frontend build tool used for fast development and optimized production builds in React-based applications. Reference: Vite Documentation –HTML5 & CSS3 HTML and CSS are used to structure and style the web-based interface of the Virtual Try-On System. They support layout design, responsiveness, and user interaction elements. References: HTML5 Specification – https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5, CSS3 Specification – [6] NumPyNumPy is a Python library used for numerical computation and array manipulation in image processing operations such as resizing and pixel calculations. Reference: NumPy Documentation –https://numpy.org/doc/ PythonProgrammingLanguage Python serves as the primary backend programming language for integrating MediaPipe, OpenCV, and rembg modules. Reference:PythonOfficialDocumentation– [7] URL Image Handling (HTTP Requests) The system includes functionality to fetch garments through user-provided URLs using HTTP-based image downloading and image decoding techniques. Reference: Python Requests Library – [8] Alpha Blending & Image Overlay Techniques Alpha blending is used to merge the transparent garment image with the webcam frame for realistic visual representation. Reference: Gonzalez, R.C., Woods, R.E., Digital Image Processing, Pearson Education, 4th Edition.

Copyright

Copyright © 2026 Riya Gupta, Anshika Soni, Dr. Kavita Chourasia , Ms. Kamini Maheshwar, Dr. Divakar Singh . This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.