Augmented Reality Virtual Try-On Web Application

Abstract

This paper presents an Augmented Reality (AR) based Virtual Try-On Web Application that allows users to visualize products such as clothing and accessories in real time using their device camera. The system leverages computer vision and machine learning techniques to detect human body landmarks and overlay virtual objects accurately on the user. The proposed solution enhances the online shopping experience by reducing uncertainty, improving customer satisfaction, and minimizing product returns. The application is developed using modern web technologies integrated with AR frameworks, enabling real-time rendering, object alignment, and interactive visualization. Experimental results demonstrate that the system provides efficient performance, accurate alignment, and improved usability, making it suitable for integration into modern e-commerce platforms.

Introduction

The text describes a web-based Augmented Reality (AR) Virtual Try-On system designed for e-commerce platforms to help users visualize products (such as clothing and accessories) in real time before purchasing.

It explains that online shopping suffers from a major limitation: customers cannot physically try products, leading to uncertainty and high return rates. To solve this, the system uses AR technology combined with computer vision and machine learning to overlay virtual products onto the user’s live camera feed.

Key technologies and processes include:

• Real-time video capture from a webcam or device camera
• Feature detection and landmark extraction (face/body key points like eyes, shoulders, etc.)
• Geometric transformations (scaling, rotation, translation) to properly align virtual items with the user
• AR rendering engines like Three.js and WebXR for realistic overlay
• Real-time display optimization to ensure smooth performance (measured using FPS)

Mathematically, the system maps input frames to detected landmarks and applies transformations so virtual objects fit naturally on the user’s body or face.

The system architecture is modular and includes:

1. Preprocessing of video frames
2. Feature detection (face/body landmarks)
3. Virtual object scaling and alignment
4. AR overlay and rendering
5. Real-time output display

It also includes detailed algorithms for:

• Frame preprocessing (noise removal, grayscale conversion)
• Face/body detection using classifiers
• Attire scaling and transformation based on body measurements
• Final AR blending and rendering

Conclusion

In this study, an Augmented Reality Based Virtual Try-On Web Application was designed and developed to provide an interactive and real-time virtual dressing experience. The system integrates computer vision and augmented reality techniques to capture user input, process images, and accurately detect facial and body features. The application successfully performs preprocessing, feature detection, and virtual attire alignment using scaling and transformation techniques. The implementation of AR overlay enables realistic visualization of selected clothing on the user’s body. Additionally, the user-friendly web interface allows smooth interaction, from product selection to real-time output display. The experimental results indicate that the system achieves reliable performance under normal conditions, with accurate detection and minimal latency. The proposed approach demonstrates significant potential in enhancing user experience in online shopping and fashion applications by reducing the need for physical trials.

References

[1] P. Milgram and F. Kishino, \"A Taxonomy of Mixed Reality Visual Displays,\" IEICE Transactions on Information Systems, vol. E77-D, no. 12, pp. 1321–1329, 1994. [2] R. Azuma, \"A Survey of Augmented Reality,\" Presence: Teleoperators and Virtual Environments, vol. 6, no. 4, pp. 355–385, 1997, doi: 10.1162/pres.1997.6.4.355. [3] S. S. Kannan, R. Mohan, and P. R. Kumar, \"Virtual Trial Room Using Augmented Reality,\" International Journal of Advanced Computer Technology (IJACT), vol. 9, no. 2, pp. 45–50, 2020. [4] M. Zollhöfer et al., \"State of the Art on Monocular 3D Face Reconstruction, Tracking, and Applications,\" Computer Graphics Forum, vol. 37, no. 2, pp. 523–550, 2018. [5] Z. Cao, T. Simon, S. Wei, and Y. Sheikh, \"Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields,\" in Proc. IEEE CVPR, 2017, pp. 7291–7299. [6] D. C. Ciresan, U. Meier, and J. Schmidhuber, \"Multi-column Deep Neural Networks for Image Classification,\" in Proc. IEEE CVPR, 2012. [7] G. Bradski, \"The OpenCV Library,\" Dr. Dobb\'s Journal of Software Tools, 2000. [8] T. Kanade, \"Picture Processing System by Computer Complex and Recognition of Human Faces,\" Kyoto University, 1973. [9] S. Garrido-Jurado, R. Muñoz-Salinas, F. J. Madrid-Cuevas, and M. J. Marín-Jiménez, \"Automatic Generation and Detection of Highly Reliable Fiducial Markers,\" Pattern Recognition, vol. 47, no. 6, pp. 2280–2292, 2014. [10] J. Redmon, S. Divvala, R. Girshick, and A. Farhadi, \"You Only Look Once: Unified, Real-Time Object Detection,\" in Proc. IEEE CVPR, 2016. [11] A. Sanna and F. Manuri, \"A Survey on Applications of Augmented Reality,\" Advances in Computer Science: an International Journal, vol. 5, no. 1, pp. 18–27, 2016. [12] Three.js Documentation, \"JavaScript 3D Library,\" Available: https://threejs.org/. [13] Blender Online Community, \"Blender - a 3D Modelling and Rendering Package,\" Blender Foundation, Available: https://www.blender.org/. [14] Microsoft Corporation, \"Kinect for Windows SDK,\" Available: https://developer.microsoft.com/en-us/windows/kinect/.

Copyright

Copyright © 2026 Vericharla Ratnasri, Komatla Naga Lakshmi, Atche Krishnaveni, Dandasi Dhanalakshmi. 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.