See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/333229483

Virtual Dressing Room Application

Conference Paper · April 2019

DOI: 10.1109/JEEIT.2019.8717410

CITATIONS READS

0 1,772

2 authors:

Aladdin Salah Masri Muhannad Al-Jabi

An-Najah National University An-Najah National University
10 PUBLICATIONS   41 CITATIONS    8 PUBLICATIONS   18 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

IoT enabled smart cities View project

All content following this page was uploaded by Muhannad Al-Jabi on 21 May 2019.

The user has requested enhancement of the downloaded file.


  
 


  
 


 

Virtual Dressing Room Application

Aladdin Masri Muhannad Al-Jabi
Computer Engineering Department Computer Engineering Department
An-Najah National University An-Najah National University
Nablus, Palestine Nablus, Palestine
masri@najah.edu mjabi@najah.edu

Abstract— Trying clothes in clothing stores is usually a

time-consuming activity. Besides, it might not even be possible II.
LITERATURE REVIEW
to try-on clothes in such cases as online shopping. Our Virtual dressing room applications attracted many
motivation here is to increase the time efficiency and improve researches. In [1], in order to initiate actions within an
the accessibility of clothes try on by creating a virtual dressing electronic marketplace on behalf of the user, a method and
room environment. In this work, we introduce a virtual
system were provided to facilitate recognition of body based
dressing room application using Microsoft Kinect sensor. Our
on gestures that represent commands to initiate actions. Such
proposed approach is mainly based on extraction of the user
from the video stream, alignment of models and skin color that, by using the first set of spatial data, a model of the user
detection. We use the modules for locations of the joints for body is generated. Then, a second model is generated by the
positioning, scaling and rotation in order to align the 2D cloth action machine based on the second spatial dataset received.
models with the user. Then, we apply skin color detection on The difference between the first model and the second model
video to handle the unwanted occlusions of the user and the is determined by the action machine represented by a
model. Finally, the model is superimposed on the user in real gesture, where this gesture represents a command by the
time. The problem is simply the alignment of the user and the user.
cloth models with accurate position, scale, rotation and
ordering. First, detection of the user and the body parts is one
In [2], a virtual dressing room application using the
of the main steps of the problem. In literature, several Kinect sensors was introduced. The proposed approach was
approaches are proposed for body part detection, skeletal based on extracting the user from a video stream, as well as
tracking and posture estimation, and superimposing it onto a skin color detection and alignment of models. In order to
virtual environment in the user interface. The project is align the 2 D cloth models with the user, the 3D locations of
implemented in C# programming environment for real time, the joints were used for positioning, scaling and rotating.
Kinect hacking application. Kinect driver’s middleware are
In [3], a system of software programs and a digital
used for various fundamental functions and for the tracking
process in combination with Microsoft Kinect.
images database was presented. The images database
includes garment images and a basic model body image. This
Keywords—Virtual dressing room, Microsoft Kinect, WPF. allows the client to individually select and try on the
different database garment images. The system renders an
image of the client's body in the arguments, with the user's
I.
INTRODUCTION. specific bulges, curves and height which reflect the client's
Due to the rapid growth of technology development, our body measurements.
daily life is heavily affected by smart systems which
facilitates our activities. For instance, online shopping grew In [4], garment modelling which is based on creating
virtual bodies by using standard measurements was
up very fast. People are getting more used to online
shopping, online auctions, etc., to purchase their interested presented. The 2D garment pattern are created by using
splines then seemed around a virtual human body to provide
products. This way of transaction has become the main trend
and it brings great convenience to customers. However, an the initial shape. The simulation was made by applying
physical parameters based on real fabric properties to get the
issue for buying clothes online is that client cannot try the
product before he/she get that product. The feeling after seemed garment. After the garment creation, a web browser-
embedded in real time platform was used as interface to the
dressing on affects the client decision about buying the
clothes. Therefore, there is an increasing demand to develop internet.
virtual dressing room to simulate the visualization of In [5], a mobile application was presented. The
dressing. application enables online clients to see how a clothing item
will look on them before purchasing it. The client downloads
Therefore, most of researchers in previous works are
taking the approach to map a 2D texture to the user’s body, the application on his or her mobile. After that the user will
be prompted for a series of questions about the body size,
and build an Avatar (model). However, we take a simpler
approach to handle with it. As the user stands in the front of shape and skin tone. Once such data is entered by the client,
the application guides the client to the clothes that fit his or
the Kinect, his sizes measuring in real time, image mapping
occurs. her body.
In [6], a new augmented reality concept for dressing
Consequently, section II contains literature review.
Methodology is presented in section III. The system model is rooms was introduced. It enables the customers to combine
easy simulated try on with a tactile experience of the fabrics.
presented in section IV. Where section V contains
application and features. Finally, section VI contains The dressing room has a camera and a projection surface
instead of a mirror. The customers put visual tags on their
conclusion.
clothes. Then the ARDressCode application features captures
and provides an AR video stream on AR mirror with the

 !"# $$%!&' 694


  
 


  
 


 

selected piece of clothes mixed in and fitted to the customer fundamental image and device management features
body. like access to the Kinect sensors that are connected to
In [7], an image processing design flow for virtual the computer, access to image and depth data streams
dressing room applications was presented. The algorithm for from the Kinect image sensors and delivery of a
implementing the human friendly interface consists of three processed version of image and depth data to support
stages: detecting and sizing the user's body, detecting of skeletal tracking.
reference points based on face detection and augmented Kinect sensor mainly provides three streams: image
reality markers and super imposing the clothing over the stream, depth stream and audio stream, with detected range
user's image. from 1.2 to 3.5 meters. At this stage, the first two streams
would be utilized for development of human model, cloth
In [8], a system and method was presented for virtually simulation and GUI.
fitting a piece of clothing on an accurate presentation of a
user's body obtained by 3D scanning. The system allows the The middle camera is a 640×480 pixel @ 30 Hz RGB
user to access a database of garments and accessories camera, providing image stream which is delivered as a
available for selection. Finite element analysis was applied to succession of still-image frames for the application. The
determine the shape of the combined user body and garment quality level of color image determines how quickly data is
and an accurate visual representation of the selected garment transferred from the Kinect sensor array to the PC, which is
or accessory. easy for us to optimize the program on different platform.
The available color formats determine whether the image
In [9], a review for the recent example of virtual fitting data that is returned to our application code is encoded as
rooms and supporting technologies was presented. In [10], a RGB.
mass-spring system was used to simulate the physical
properties of the fabric and adaptive sewing forces to wrap The leftmost one is the IR light source with
the pattern around human model to form a virtual garment. corresponding 640×480 pixels @ 30 Hz IR depth-finding
The strain control was implemented for maintaining the camera with standard CMOS sensor on the right, which
pattern size with velocity adjustment and combined with the mainly provide the depth data stream. This stream provides
collision detection and response routine. frames in which the high 13 bits of each pixel give the
distance, in millimeters, to the nearest object at that
particular x and y coordinate in the depth sensor's field of
III.
METHODOLOGY view.
Because of the increasing importance of Microsoft
Kinect image sensor in the market, we used it and WFP to •
Skeleton API
capture the user physical measurements. Among API, Skeleton API provides information about
the location of users standing in front of the Kinect sensor
1)
Introduction to Kinect General components array, with detailed position and orientation information as in
The components of Kinect for Windows are mainly the Fig.2. Those data are provided to application code as a set of
following, Fig.1: 20 point, namely skeleton position. This skeleton represents
a user’s current position and pose. Our applications can
1.
Kinect hardware: including the Kinect sensor and the therefore utilize the skeleton data for measurement of
USB hub, through which the sensor is connected to the different dimension of users’ part and control for GUI.
computer; Skeleton data are retrieved as aforementioned image retrieval
2.
Microsoft Kinect drivers: Windows 8 drivers for the method: calling a frame retrieval method and passing a
Kinect sensor; buffer while our application can then use an event model by
3.
Microsoft Kinect SDK V 1.0: core of the Kinect for the hooking an event to an event handler in order to capture the
set of functionality and Windows API, supports frame when a new frame of skeleton data is ready.

Fig.1. Hardware and streams provided

695

  
 


  
 


 

audio, Drivers and runtime .The following diagram shows

the components of the Kinect for Windows developers
Toolkit, Fig.4.

Fig.2.Skeleton joint positions relative to the human body

Fig.4. Kinect for windows developer toolkit
2)
WPF Application
The Windows Presentation Foundation, Fig.3., is UI IV.
SYSTEM MODEL
framework to create applications with a rich user experience.
It is part of the .NET framework 3.0 and higher. 1)
. Distances between joints positions
WPF combines application UIs, 2D graphics, 3D Using general distance formula in 3D, we formulate an
graphics, documents and multimedia into one single algorithm to all body distances Fig.5. To each user enter the
framework. Its vector based rendering engine uses hardware application in real time:
acceleration of modern graphic cards. This makes the UI
faster, scalable and resolution independent.in this section we
will introduce the windows presentation foundation (WPF)
and discover its components and the features of each
component as well.

Fig.3. Windows Presentation Foundation Fig.5. Body Calculations

Microsoft Kinect SDK version 1.0 In addition, the application keep calculating distances to
It supports up to four Kinect sensors on a single continue body movement:
computer, skeletal tracking, a Near Mode feature that lets the One of key point here it to:
camera recognize objects just 40cm away, stability and

696

  
 


  
 


 

1)
Convert Data them, making use of the existing point and the new point
Units of distance calculated using joint -joint coordinates coordinates which different from the original, and the use of
results in meter so we have to convert it to pixel Data. new point in the application that we have done. After this
operation was the result acceptable to some extent and is
Using m – pixel converter closer to what we want.
1 m = 3779.527559055 pixel. When you start working on the trousers and try to put it
We convert every distances to pixels data in order to map on the points, we faced the problem of high points Hip center
pixel images to user body. dramatically and narrow the distance between the hip-Lift
and Hip right and their height, we used new points so we
created a point down the Hip Center completely and at the
same time we made two points are new to the bottom of the
Hip Lift and Wright and abroad each,
At first the trousers place is not suitable (to the top), but
after this algorithm became suitable largely.
3)
2D cloth
We divide the clothes into parts of pixels data to control
the movement of the body and the cloth in upper, lower
frame.
Using Photoshop CS6: we cut, divide, colored the cloth
to simulate it to a real body.
4)
Interaction between human and 2D cloth
•
First, we take skeleton Data.
•
Second, we take Depth Data.
•
Third, we take the RGB data
Fig.6. Body Calculation when user move
•
Fourth, we measure the upper Frame and mapping the
2)
Create new joint positions 2D cloth.
At the beginning of the work we have decided to use the •
Fifth, we measure the Lower Frame and mapping the
key points that the Sensor found it, we face many problems 2D cloth.
in some points (hip center, hip left, hip right) and it imprecise
and inappropriate to what we need, we have many of the •
Sixth, we measure the Lower, upper Frame and
attempts to work something that resolve this issue mapping the 2D cloth for both.
unexpected, in the end, we decided that we could make new
points away from the original points left or right or down.

Fig.8. Skeleton Data

V.
APPLICATION AND FEATURES

Fig.9. shows the process a user/Kinect do so that the
application starts. The process is explained in the following
Fig.7. Create new joint position steps:
1-
Standing person in the front of the Kinect (set fixed
The idea is to try to take advantage of the Kinect we distance).
make another points depend on the original, and implement

697

  
 


  
 


 

2-
The Kinect analyzes a person's body and identify the 11-
You turn off the music
key points and at the same time we calculate the
distances necessary.
3-
The Application give you advice to use it in a good way,
also you can hear voice.
12-
From this bottomn you can take a picture of you when
4-
Can now choose the type of cloths that you want to wear
you wearing the piece
(t-shirt, trousers, dress).


 

 

" !
13-
To be able to take off the clothes and try others, you
should press this buttomn.




 




$#%


 



VI.
CONCUSION
After applying the cloth model with the improved
performance joint position, this application has become an

 acceptable application to provide a virtual fitting room for
user to utilize:
1-
Human measurement generated according to user body

 stand in front of the Kinect.
2-
Flexible and look-real cloth model for user to “wear”.
 3-
An easy control, user-friendly and fashionable body-
motion-based GUI for user utilized;
4-
Many interesting and useful functionalities for user to


use in our application.







REFRENCES

 [1]
Higgins, K. R., Farraro, E. J., Tapley, J., Manickavelu, K., &
Fig.9. Application flow chart Mukherjee, S. (2018). U.S. Patent No. 9,898,742. Washington, DC:
U.S. Patent and Trademark Office.
[2]
Isıkdogan, F., & Kara, G. (2012). A real time virtual dressing room
5-
Once you click on one of these buttons show you a list application using kinect. CMPE537 Computer Vision Course Project.
containing all the pieces that are related .To this piece at
[3]
Korszun, H. A. (1997). U.S. Patent No. 5,680,528. Washington, DC:
the opposite end and you can choose the appropriate and U.S. Patent and Trademark Office.
try. [4]
Protopsaltou, D., Luible, C., Arevalo, M., & Magnenat-Thalmann, N.
(2002). A body and garment creation method for an Internet based
6-
you can resized the pieces fit your body perfectly. virtual fitting room. In Advances in Modelling, Animation and
7-
The application will select the appropriate size for you Rendering (pp. 105-122). Springer, London.
automatically based on calculation. [5]
Steermann, M. C. (2014). U.S. Patent Application No. 14/215,649.
[6]
Kjærside, K., Kortbek, K. J., Hedegaard, H., & Grønbæk, K. (2005).
8-
The application gives tips for you harmonically pieces. ARDressCode: augmented dressing room with tag-based motion
tracking and real-time clothes simulation. In Proceedings of the
9-
In the top of the interface you have options and central european multimedia and virtual reality conference.
characteristics. [7]
Martin, C. G., & Oruklu, E. (2012). Human friendly interface design
for virtual fitting room applications on android based mobile
devices. Journal of Signal and Information Processing, 3(04), 481.
[8]
Curry, S. W., & Sosa, L. A. (2017). U.S. Patent No. 9,773,274.
Washington, DC: U.S. Patent and Trademark Office.
[9]
Pachoulakis, I., & Kapetanakis, K. (2012). Augmented reality
10-
Through this button you listen the music while wearing platforms for virtual fitting rooms. The International Journal of
clothes. Multimedia & Its Applications, 4(4), 35.
[10]
Zhong, Y., & Xu, B. (2009). Three-dimensional garment dressing
simulation. Textile Research Journal, 79(9), 792-803.

698

View publication stats