Made-to-Measure Technologies for an Online Clothing Store

The Internet is a compelling channel forselling garments. Several recent initia-

tives by companies such as Nordstrom, Macy’s, andLands End focus on made-to-measure manufacturingand shopping via the Internet. Current Web technolo-gies fuel these initiatives by providing an exciting andaesthetically pleasing interface to the general public.

However, until now, such Web applications have sup-ported only basic functions such as viewing apparel

items in 2D or 3D, combining dif-ferent items together, and mixingand matching colors and textures(and sometimes using a mannequinadjusted to the shopper’s propor-tions). The most common problemscustomers experience when they tryon the clothes are poor fit, anunpleasant feeling while wearingthe item, and surprise at the gar-ment’s color. As a result, high prod-uct return rates persist, and mostconsumers are still either hesitant topurchase garments online or areunsatisfied with their online shop-ping experience.1

Here, we present a Web application that providesmore powerful access to and manipulation of garmentsto facilitate garment design, pattern derivation, and siz-ing. (You can visit the virtual Try-On application athttp://virtual-try-on.miralab.unige.ch.) We apply 3Dgraphics technology to help create and simulate the vir-tual store. In this article, we discuss various relevantresearch problems, the creation of the shopper’s bodyand garments, simulation of body and garment move-ment, and online sizing.

Our system supports many efficient and interactiveoperations such as automatically adjusting the 3D man-nequin according to the shopper’s body measurement,selecting different garment items, online fitting andresizing of the garment to the mannequin, and simu-lating garment movement in real time. We ultimatelyhope to develop and integrate several key technologies

into a distributed, interactive virtual clothing storewhere customers can choose garments, use 3D man-nequins that are adjusted to their body measurements,and receive assistance during their online purchase.

System overviewAn online clothing store designed as a Web application

requires flexible manipulation, fast transmission, and effi-cient storage of the display content. In particular, becauseof the relatively huge database of garments and the sim-ulation of complex graphical objects such as skin andcloth needed for such an application, the most criticallimitation is the real-time performance constraint. Whenwe simulate garment movement using a physics-basedmodel, the results must be prerecorded to display the ani-mated garment at an interactive rate because it’s impos-sible to achieve real-time performance.2

Although this approach simplifies the online compu-tation, it requires us to transfer, for each frame, the posi-tion data of each vertex constituting the visualrepresentation of a garment, increasing the responsetime of the client application. In addition, it’s time-consuming to simulate each 3D garment item in thedatabase. Typically, it takes about 4 to 12 hours to sim-ulate the garment movement of a 1-minute sequencedepending on the 3D geometry’s complexity. In ourapplication, we choose a better alternative: we calcu-late the garment simulation on the fly while keeping theresponse time interactive.

Human body modeling and simulation is another keytechnology enabling automated garment sizing andsize selection. Since the advent of 3D image capturetechnology, we’ve seen much interest in applying thistechnology to taking human-body measurements.Today, some systems are optimized either for extractingaccurate measurements from parts of the body, or forrealistic visualization in various fields (including e-commerce applications). Cyberware Inc.’s DigiSize, forinstance, was developed in a joint government projectto improve and automate fitting and issuing militaryclothing (see http://www.cyberware.com/products formore information).

Web Graphics

We present a Web

application that provides

more powerful access to and

manipulation of clothing to

facilitate clothing design,

pattern derivation, and

sizing.

Frederic Cordier, Hyewon Seo, and NadiaMagnenat-ThalmannMiraLab, University of Geneva, Switzerland

Made-to-MeasureTechnologies for anOnline ClothingStore

38 January/February 2003 Published by the IEEE Computer Society 0272-1716/03/$17.00 © 2003 IEEE

Despite recent efforts devoted to using 3D body scan-ners, limiting factors such as the inability to automati-cally integrate body scan data to application softwareexist. One important feature of our online clothing storeis its ability to build a 3D mannequin according to thebody measurements the user inputs. This led us to con-sider another body modeling scheme. We perform theonline construction of the 3D mannequin that satisfiesthe given measurements, avoiding scanners and down-loading large data models. Despite the apparent diffi-culty in building the body geometry from the limitedamount of information within the real-time constraint,we show how this process is feasible through our robustmodeling technique for practical applications. More-over, with our approach, we can interactively modifythe measurements and body motion.

Figure 1 shows the system architecture. Our systemhas a minimal response time because a major part of thecontent to be manipulated is generated on the client siderather than on the server. Computing the body and clothanimations on the server and sending this data throughthe Internet would generate too much traffic and reducethe application’s response time. Thus, our solution is tomove the body and garment sizing as well as the clothand skin animation to the client side, avoiding the down-load of large precalculated models.

The serverThe online clothing store Web server consists of the

following databases and an online database retrievalapplication module for retrieving data:

� Body database. This database contains two 3D man-nequins for each gender, which we refer to as genericmodels, plus certain statistical information that’s col-lected from existing models through 3D shape cap-ture technologies. This is essentially the informationneeded to derive new body geometries from mea-surement inputs by the body- and garment-sizingmodule.

� Garment database. We created a set of 3D garmentmodels for the generic models and categorizedthem. They’re available to the user in the garmentcatalog pages (see Figure 2, next page). Ideally, theonline clothing shop will feature many different gar-ments. Moreover, the online store will make it easyto update the database to keep the coherencebetween the clothes shown on the Web applicationand the clothes available for sale. Therefore, this gar-ment database is located on the server side. Uponuser selection, the system downloads the chosen 3Dgarment model to the client. These garments aresaved into a Virtual Reality Modeling Language(VRML) format.

� Motion database. The animation database containssamples of body motion data. Like the garment data,the system can download the selected motion dataupon request. We obtain the motion data through theprerecording of a real person’s movement using anoptical motion capture system.

� Scene database. Graphical elements that compose thebackground scene are stored as VRML files in thescene database.

IEEE Computer Graphics and Applications 39

Motiondatabase

Garmentdatabase

Bodydatabase

Online databaseretrieval application

Server

Client 1

Scenedatabase

Web browser

Internet

Client 2 Client 3

ActiveX control

Modules for body/garment sizing,simulation, and rendering

Web server

HTTP and FTP

HTTP and FTP

1 Web applica-tion architec-ture of ouronline clothingstore.

The clientOur Web client performs program execution after the

executables are downloaded to the client as an ActiveXcontrol. There are two main modules:

� The body and garment sizing module provides func-tionalities to deform the 3D mannequin from the cus-tomer’s input body size and resize the selectedgarment accordingly.

� Once the garments and the body have been resized,the real-time garment simulation module animatesthe dressed mannequin. This approach drasticallyreduces the amount of data transferred from the serv-er to the client.

Body databaseOur measurement-driven body modeling approach

primarily consists of a preprocessing phase and a run-time phase. The body database stores the preprocessingresults that are fed into the runtime module. Here wediscuss the preprocessing phase by describing whatmeasurements we used, how we prepare the generic

body models, and what data weneed for the runtime body and gar-ment sizing.

Use of measurementsThe application uses apparel

designers’ eight primary measure-ments (listed in Table 1). We assumethat the users are aware of their ownmeasurements or the measure-ments have been retrieved from 3Dscanners or tapes.

Generic modelsInstead of constructing a new

geometry for each model, weassume that the model’s topology is

known a priori and shared by all resulting models. Theidea behind this is to exploit the objects’ common struc-ture. Aside from making the problem simpler and themodeling faster, deforming the existing model to obtaina new one makes it easier to immediately animate thenewly generated model.

The generic model consists of a standard humanskeleton structure (see the Humanoid Animation Work-ing Group, or H-Anim, specification at http://www.h-anim.org) and a textured skin surface of approximately6,000 vertices and 10,000 triangles. There are two mod-els, one for each gender. The generic models’ prepara-tion consists of three successive procedures:

1. We create and properly adjust an H-Anim skeletonto the body mesh using the Discreet 3ds max tool.

2. We then calculate the skin attachment data usingBonesPro (see http://www.digimation.com).

3. Using our in-house software, we segment the bodymesh and export the whole body structure into theH-Anim format.

The skeleton hierarchy. The H-Anim standardspecifies a common way of representing humanoids inVRML97. The human body consists of a number of seg-ments (such as the forearm, hand, and foot), which areconnected to each other by joints (such as the elbow,wrist, and ankle). The full H-Anim hierarchy contains94 skeleton joints and 12 skin segments including thehead, hands, and feet. In our application, we chose theH-Anim Level of Articulation (LOA) 2 skeleton as Fig-ure 3b shows.

Segmentation and exportation. The skeleton-driven deformation,3 a classical method for the basicskin deformation, is the most widely used technique in3D character skin deformation. A prerequisite of a suc-cessful skeletal-driven deformation is an appropriateattachment of the skin to the underlying skeleton. Foreach vertex of the mesh, the attachment data containthe vertex’s influencing bones and correspondingweights. To say that a vertex is “weighted” with respectto a bone means that the vertex will move as the bone is

Web Graphics

40 January/February 2003

2 The catalogwindow.

Table 1. Measurement definitions.

Body Measurement Definition

Stature Vertical distance between the crown of the head and the ground

Crotch length Vertical distance between the crotch level at center of body and the ground

Arm length The distance from the armpit and shoulder line intersection over the elbow to the far end of the prominent wrist bone in line with the small finger

Neck girth The girth of the neck baseChest/bust girth Maximum circumference of the trunk

measured at bust/chest heightUnderbust girth Horizontal girth of the body immediately

below the breastsWaist girth Horizontal girth at waist heightHip girth Horizontal girth of the trunk measured at hip

height

transformed to stay aligned with it.In our current implementation, wedo this through BonesPro.

Once we’ve defined the attach-ment, we need to segment the skinmesh and locate each of the seg-ments into the skeleton hierarchy asa proper child node of the corre-sponding joint. We decompose themesh into a collection of adjacenttriangles that share the joint of thehighest weight, forming segmentnodes of the corresponding jointnodes (Figure 3c). Now we canexport the model into a H-Anim-compliant human body. We exportthe attachment data as XML data inthe VRML file.

Example-based approach.Mere geometric consistency of mea-surements doesn’t guarantee a rea-sonable body shape appearance.Arguably, the captured body geom-etry of real people provides the bestavailable resource to model andestimate correlations between mea-surements and the shape. Weexploit correlations among mea-surements and between measure-ments and the body shape. Thispermits a robust modeling of bodygeometry even when only a limitedamount of information is available.

Figure 4 shows the body model-ing process. It involves two prepro-cessing tasks. First, we establishtopological equivalence amongthese data sets (example modelshereafter) so that a complete map-ping can be found for each vertex inthe mesh and the skeletal structure.Based on the prepared samples andtheir measurements, the secondtask implements interpolators forevaluating deformations necessary to obtain new mod-els in the continuous range in the measurement space.The online execution of the body- and garment-sizingmodule uses the interpolator function to deform thegeneric model on the fly through multiple blending ofexamples.

Example model preparation. The initial modelsor examples rely on existing models or 3D shape-capturetechnology. In addition, we assume the correspondenceis established among the models through a preprocess-ing phase. Each model must include the same numberof vertices and connectivity in the mesh as well as thesame joint hierarchy. To accomplish this, we fit thegeneric model onto each example. The detail descrip-tion of our method to obtain correspondence amongexample models is beyond the scope of this article. Hav-

ing a predetermined topology has both theoretical andpractical merits. First, it simplifies the problem by allow-ing a vector representation of the body geometry. Sec-ond, the skin attachment data can be reused so that wecan immediately animate all resulting models. Finally,we easily resolve different postures of examples by tak-ing only translation and scale parameters from theexamples.

We used 14 models (six male and eight female) fromthe 3D scanner in our application. After establishing thecorrespondence, we measured the models following thedefinitions in Table 1 to obtain eight primary measure-ments. The measured values of each model, together withits joint and shape parameters (see the “Interpolators con-struction” section), serve as input to the interpolators.

We consider the body geometry as having two distinctentities, namely rigid and elastic components of the


3 Automaticsegmentationof body model:(a) the originalmesh, (b) the H-Anim skeleton,and (c) thesegmentedmesh.

(a) (b) (c)

Generic model

Measurementgeometry

Sample models

Measurement

Example modelspreparation

Interpolatorsconstruction

f:

Runtimeevaluation

Database

X = [X1, X2, …, XN]measurement

{Xi, f(Xi)}, {Xi, g(Xi)}interpolation nodes

J(Xi) = f(Xi), S(Xi) = g(Xi)Joint and shape interpolators

(a) (b)

4 (a) Body modeling scheme, and (b) interpolator function development.

body deformation. The joint parameters of a person,which will determine the global proportion of thephysique, represent the rigid component. Then, we useshape parameters to express the elastic component,which, when added, depicts the body’s detail shape. Wedefine the joint and shape parameters as follows:

� Joint parameters. The joint parameters are essentiallyeach joint’s degree of freedom (DOF). A joint has scale(sx, sy, sz) and translation (tx, ty, tz), leading to a vectorof 6N dimension, where N is the number of joints.

� Shape parameters. As Figure 5 shows, we use a set ofcontours to represent the detail shape of the bodygeometry, particularly on the torso. Note that many ofthe primary measurements are based on contours.The elastic deviation of the contour vertex throughthe fitting process from its initial position representsthe deformation’s elastic component.

For a compact representation of both parameters, weadopt the principal component analysis (PCA)approach, one of the common techniques to reduce thedimensionality of data in a statistical manner. See Presset al.4 for an extensive discussion of this technique.

Interpolator construction. Once we prepare theexample models, we then build interpolators that will

be used to evaluate deformationsnecessary to obtain new models bythe body- and garment-sizing mod-ule. We consider two interpola-tors—joint and shape. Given aparticular measurement set, jointinterpolators are responsible for thebody deformation’s rigid compo-nent, guiding the skeleton-drivendeformation to obtain the appropri-ate proportion of each body part.The shape interpolators deal withthe elastic deformation, addingdetail shape on the body. Dealingwith high-dimensional data and arelatively small (less than 10) num-ber of examples, a scattered inter-polation problem best describes ourproblem. As a result, we imple-mented joint and shape interpola-tors as functions of the eightprimary measurements by using theradial basis function (RBF).

Interpolator exportation.Once the system has generated theinterpolators, we can quickly ex-plore the measurement space toevaluate the deformation’s rigid andelastic components, allowing run-time generation of a customized 3Dbody model. Implemented as anRBF, each interpolator is describedby its interpolation nodes and thenodes’ corresponding weights. To

speed up the runtime evaluation, we implemented thebasis function by using a lookup table.

Garment databaseWe calculated a set of garments for the generic model,

which reside in the garment database. For creatingclothes usable in the online clothing store, designersmust draw the patterns, preprocess the garments, andexport them into VRML. We developed several author-ing tools to assist designers in their work.

Design of garmentsDesigners create garments using our in-house soft-

ware.3 This tool assists designers in drawing 2D pat-terns and defining seam lines on the borders of thegarment patterns, referring to the polygon edges thatare to be joined during the garment constructionprocess as Figure 6a shows. The system tessellates thepatterns into a triangular mesh and places them aroundthe 3D virtual body (see Figure 6b). Next, the systemcomputes the initial shape of the garment through acollision response, as illustrated in Figure 6c. The bodymodel’s shape guides the cloth’s surface as a result ofthe collision response. Because the body- and garment-sizing module handles the garment sizing online, eachgarment item needs only one simulation for the gener-ic model.

Web Graphics


5 Fitting a generic model to an example. (a) The generic model. (b) Anexample model. (c) After the fitting.

(a) (b) (c)

6 Creating garments. The system (a) constructs a garment pattern and (b)places it on a 3D virtual body. (c) Then, it computes the initial shape of thegarment through a collision response.

(a) (b) (c)

Garment preprocessingSimulating garments in real time requires drastically

simplifying the simulation process, possibly at theexpense of mechanical and geometrical accuracy. Ourapproach5 is based on a hybrid method where the clothis segmented into various sections and different algo-rithms are applied. When observing a garment worn ona moving character, we notice that the movement of thegarment can be classified into several categoriesdepending on how the garment is placed—that is,whether it sticks to, or flows on, the body surface. Forinstance, a tight pair of trousers will mainly follow themovement of the legs, while a skirt will flow around thelegs. Thus, we segment the cloth into three layers thatwe define as follows:

� Layer 1: Stretch clothes. Garment regions that stickto the body with a constant offset. In this case, thecloth exactly follows the underlying skin surface’smovement.

� Layer 2: Loose clothes. Garment regions that move with-in a certain distance to the body surface are placed inanother category. The best examples are shirtsleeves.In this case, we assume that the cloth surface alwayscollides with the same skin surface and its movementis mainly perpendicular to the body surface.

� Layer 3: Floating cloth. Garment regions that flowaround the body. The cloth movement doesn’t exact-ly follow the body movement, and collisions aren’tpredictable. For example, for a long skirt, the leftside of the skirt may collide with the right leg duringanimation.

These three categories are animated using three dif-ferent cloth layers. The idea behind the proposed methodis to avoid the heavy calculation of physical deformationand collision detection wherever possible. The maininterest of our approach is to preprocess the target clothand body model so that they can be computed efficient-ly during runtime. The garments are divided with ourin-house software into a set of segments and the associ-ated simulation method is defined for each.

Computing cloth attachment data. Definingattachment data is one step of the preprocessing stage.As we stated in the previous section, the cloth defor-mation method uses the underlying skin’s shape. We usethe underlying skin deformation for the simulation ofthe first two layers of the cloth. Each garment mesh ver-tex is associated to the closest triangle, edge, or vertexof the skin mesh.

In Figure 7, the garment vertex C is in collision withthe skin triangle S1S2S3. We define C′ as the closest ver-tex to C located on the triangle S1S2S3. We then definethe barycentric coordinates of C′ with S1, S2, and S3.These barycentric coordinates are later used for clothsimulation and sizing. They provide an easy way to com-pute the garments’ “resting” shape by using the locationof the skin vertices.

Segmentation. With the garment in its restingshape on the initial body, we use the distance between

the garment and the skin surface to determine whichcategory the cloth triangles belong. Associated witheach segment are distances from the skin surface thatare used to determine the category. Each segment fallsinto one of three categories: tight, loose, and floatingclothes. Cloth vertices that are located closely to the skinsurface belong to the first or second layer. Cloth verticesthat don’t collide with any skin surface belong to thethird layer as Figure 8 shows.

Exportation. Once segmented, we can export 3Dcloth models and the associated data into VRML for usein the online clothing store. These models are locatedon the server, allowing easy update and maintenance.

Motion databaseCommercially available motion capture systems offer

a relatively easy way of recording a human performer’smovement. Our system converts the animation data sothat it’s immediately applicable to H-Anim models. Theconverter first computes the correspondence betweenthe two skeleton hierarchies (one from the Vicon[http://www.vicon.com] motion capture system andthe other from H-Anim) and performs the transforma-tion on each joint angle for each frame of animation toresolve the difference in their stand-by posture.

The converted animation data is exported in VRML for-mat using the Interpolator node and can be applied to theH-Anim body model in a frame-by-frame basis. The data-base consists of several typical motions that people dowhen trying on clothes, such as walking and turning.

Integrating the clientThe client application isn’t only involved in the visu-

alization of garments, but it also calculates the cloth and


7 Mapping of attachment information. Here the gar-ment vertex C is in collision with the skin triangleS1S2S3.

8 Segmenta-tion of gar-ments. In layers1 and 2, clothvertices arelocated closelyto the skinsurface while inlayer 3, thevertices don’tcollide with anyskin surface.

Layer 1Layer 2Layer 3

body deformation. As Figure 9 shows, the client archi-tecture uses three different layers for the implementa-tion: C++, JavaScript, and HTML.

The ActiveX controlWe developed modules for real-time animation and

visualization in C++ and integrated them into an ActiveXcontrol. ActiveX controls are components that can beembedded within Web browsers like Microsoft InternetExplorer. Because they can be written in any language,they offer the best performance for time-critical appli-cations. Another advantage of ActiveX controls is that

their installation on the clientmachine is transparent to the user.They’re automatically downloadedand installed at the first access to theWeb page.

Our ActiveX control consists ofseveral modules: the FTP client fordownloading data from the server,the VRML loader that’s in charge ofloading the data into the scene man-ager, the skeleton animation playerfor animating the mannequin skele-ton, the body and cloth sizing mod-ule for fitting the body and clothesto the user measurements, the skinand cloth deformation module forreal-time animation, and the 3Dviewer for visualization of the scene.

Javascript and HTML pagesWe used JavaScript and HTML to

implement the graphical user inter-face. They provide a good solutionfor user interaction. JavaScript

allows complex functionalities such as keeping track ofthe user choices, managing widgets, and sending the userdefined parameters to the ActiveX control. Figure 10shows a Web page where the user enters the body mea-surements and visualizes the 3D mannequin animation.

Body- and garment-sizing moduleThe body- and garment-sizing module’s main task is

to manage the proper sizing of the 3D mannequin in aVRML scene. As we described, the module uses thegeneric model and the interpolators to evaluate the jointand shape parameters to deform the generic model. It

Web Graphics


Scene manager and viewer

FTP client to the server

Java script

Web pages

User-defined parameters

ActiveX control

Body/garmentsizing

Virtual realitymodelinglanguage

Skin clothdeformation

Skeletonanimation

player

Data files

Inp

lem

enta

tion

in C

/C++

Java

HTM

L

9 Overview ofthe client archi-tecture.

10 Screen shotof an ActiveXviewer with theHTML andJavaScript userinterface.

first deforms the body model by applying the evaluatedparameters from the interpolators as a function of themeasurement input. The garments are then deformedaccordingly so that they fit the deformed body.

Body sizingGiven the measurement values or a specific location

in the measurement space chosen by the application atruntime, the interpolator evaluates the necessary defor-mation by efficiently blending the examples with knownmeasurements to produce an interpolated shape.

Contour warping. Given the new set of measure-ments, the system determines the location in the mea-surement space. Using this vector as input, the systemevaluates the joint parameters from the joint interpola-tors for each joint in the skeleton. Figure 11b shows themodel after the joint parameters are applied to themodel shown in Figure 11a. Similarly, the shape inter-polators determine the shape of the primary and auxil-iary contours consecutively and deform them by addingthe evaluated vertex displacements as Figure 11c shows.

Mesh deformation. To compute a skin surfacethat smoothly interpolates between deformed contours,we again use the scattered data interpolation tech-

nique. For each point pi on the skin mesh, the final loca-tion is given by

(1)

where W = (sx, sy, sz) denotes the deformation functionand W(pi) = ∆pix, ∆piy, ∆piz. For n points p1, p2, … pn ofthe contour set, we have W(pi) from the shape interpo-lators. Then we can find the coefficients of the Gauss-ian function interpolants sx, sy, sz by solving a linearsystem of 3n equations:

(2)

Once the interpolators have been calculated, wedeform the mesh by displacing all points on the meshaccording to the resulting values.

Refinement. Some joints are directly related to theinput (stature, the crotch length, and the arm length)measurements, and the evaluated joint parameters fromthe interpolators need to be adjusted accordingly. Therefinement phase of our approach measures the modelfrom the interpolators and adjusts the skeleton to ensurethe user-specified measurement constraints on the model.

Garment sizingAfter the body model is properly deformed from the

given measurements, the garment-sizing module mod-ifies the garments so that they fit this new body. As weexplained earlier, the cloth mesh is segmented into threelayers—two layers where the cloth vertices are attachedto the body surface and one layer where the garmentsmove freely. Thanks to the cloth attachment data (Fig-ure 7), we can easily compute the position of verticesbelonging to the first two layers from the position of theunderlying skin vertices weighted with the barycentriccoordinates. Cloth vertices on these two layers followthe skin surface, even in the case where the skin isdeformed by the body-sizing module. For the sizing ofgarments belonging to the third layer such as skirts ordresses, the diameter and the length of legs are calcu-lated in the body deformation module. The length andthe width of the garments are scaled accordingly to thenew measurements of the legs. Figure 12 (next page)shows the body and garment sizing results.

Skin and garment simulation moduleAfter generating the dressed body according to the

user measurements, the motion data applied to the H-Anim skeleton drives the skin and cloth deformation.This section addresses the computation of the real-timesimulation of bodies and clothes according to the ani-mation of the underlying skeleton.

Joint-driven deformation of skinWe use the skeletal driven deformation technique,

introduced in the section “Segmentation and exporta-

s p p p

s p p p

s p p p

x i ix

i

y i iy

i

z i iz

i

( )

( )

( )

= ⋅ −( )= ⋅ −( )= ⋅ −( )

∑∑∑∑∑∑

ω

ω

ω

Φ

Φ

Φ

′= +p p W pi i i( )


11 Skin deformation through interpolation. (a) Theinitial reference model. (b) After the skeletal deforma-tion via joint interpolation. (c) After adding detailedshape via shape interpolation.

(a)

(b)

(c)

tion” for simulating the skin deformation of the virtualhuman. At each frame of the animation, we calculatethe vertices’ position using the weight values and thetransformation matrix of the joints. We also use theseweight values to compute the mesh surface’s normal.The movement of vertices that belong to a single jointisn’t calculated but automatically moved as they’reattached to the joint. Duplicated vertices that lie on theboundaries have the same position because they sharethe same attachment information. Thus, the boundariesamong segments aren’t visible. The result is a segment-ed body that appears as a seamless body in the render-

ing view port. This method combines the speed of thedeformation of segmented bodies with the visual qual-ity of seamless bodies.

Garment simulationWe previously5 proposed techniques for a real-time

clothing simulation (see Figure 13). Garment verticesare animated with three different methods, dependingon which layer they belong to that’s defined during thepreprocessing stage.

Layer 1. Tight clothes in layer 1 follow the defor-mation of the underlying skin. These deformations arecalculated with a geometric-based method thanks to themapping of the attachment data of the skin to the gar-ment surface.

Layer 2. For layer 2, which consists of loose clothes,the relative movements of clothes to the skin remain rel-atively small, keeping a certain distance from the skinsurface. Consider the movement of a sleeve in relationto the arm—for a certain region of the garment, the col-lision area falls within a fixed region of the skin surfaceduring simulation. With this in mind, the scope of thecollision detection can be severely limited. We assumethat the movement of the garment largely depends onthe underlying skin and yet it shouldn’t follow the skinsurface rigidly. It’s necessary to simulate the local dis-placement of the garment from the skin surface.

We’ve developed two different methods, one for clothdeformation on the limbs (trousers and sleeves), theother one for the deformation of cloth on the trunk.Cloth vertices on the limbs are enclosed in half spheresthat are attached to the skin surface. Vertices insidethese spheres are displaced with the equation of therigid body motion. A function defines the diameter ofthe spheres depending on the relative position of thecloth vertex to the skin surface’s normal. We animatecloth vertices located on the trunk with a rough meshand animate the rough mesh with a physics-basedmethod. The cloth mesh is deformed with the free-formdeformation (FFD) method using the position of the ver-tices on the rough mesh.

Web Graphics


12 Simulationof bodies andgarments fordifferent sizes:(a) small, (b)medium, and(c) large.

(a)

(b)

(c)

13 A sequence of real-time cloth animation.

Layer 3. Layer 3 consists of ver-tices that freely float around thebody. This will take care of thingslike a large skirt floating around thelegs. Any part on this skirt can col-lide with any part of the leg. Thesimulation of this layer uses a clas-sical approach with a particle sys-tem and collision avoidance.

Results and discussionFigure 14 shows the main graph-

ical user interface (GUI). After userauthentication, the system estab-lishes communication, and the userdownloads the ActiveX control if ithasn’t already been installed on themachine. At this point, initializationof the control is executed, includingthe download of the data for thebody- and garment-sizing module.The visitor to the online virtual storefollows several successive steps:

1. After users select the garmentitem through the 2D garmentcatalog, their selection is passedto the ActiveX control throughJavaScript functions.

2. The VRML loader downloads the requested garmentsand motion data and loads them into the scene.

3. Users continue to the body measurements page con-taining a number of fields that are adjustable. Afterthe users enter their measurements, the body andgarments are resized accordingly.

4. Finally, a trigger action starts the execution of thereal-time simulation. While the skeleton anima-tion player updates the angle values of the man-nequin’s skeleton, the skin and clothes aredeformed accordingly.

The time needed for the simulation is obviously linkedto the complexity of the body and the garment model.Table 2 shows the average size of the different data tobe downloaded for a simulation sequence.

The largest amount of data to be downloaded is thebody database. Fortunately, this database needs to bedownloaded only once at the initialization stage of theActiveX control. Users need to download other dataevery time they change the garments and/or motiondata. The frame rate of the real-time animation of themannequin in the ActiveX control is about 20 to 30frames per second. See Cordier and Magnenat-Thalmann5 for a further discussion of the performanceof the body and garment deformation module.

Future directionsIn our work, we’ve solved various research problems to

build a framework for an online clothing store. The processof preparing various data components has matured, mak-ing it feasible to efficiently handle the creation of graphi-cal contents, which are immediately usable for interactive

visualization on the Internet. The bodies and garmentscreated with our approach correspond to real body mea-surements at the critical locations defined for the garmentdesign. In particular, we’ve developed methods for effi-ciently handling the online body modeling, garment selec-tion, fitting, and simulation and integrated them into Webcomponents, optimized for execution on the Internet. Wealso set up an interactive and realistic virtual clothingstore, where visitors can choose among many differenttypes of garments and visualize them on animated man-nequins based on their measurements.

Nevertheless, there’s still room for improvement. Thesizing works only for the garment and the body, so thesimulation of differently sized garments on the samebody remains as future work. We also plan to enhancethe input parameters to model the 3D mannequin sothat it allows the best possible correspondence to a par-ticular individual. �

AcknowledgmentsWe’d like to thank the Athens Technology Center from

the E-Tailor project (see http://www.atc.gr/e-tailor) forproviding some of the Web pages of the online clothingstore. Special thanks goes to Dimitris Protopsaltou, YiWu, and Georgios Papagiannakis, who put a lot of effortinto the interface design and system integration. We’realso grateful to Chris Joslin for proofreading this arti-cle, Marlene Arevalo and Christiane Luible for provid-ing reference models, and Tom Molet for his assistancewith the motion capture.

The European Research Project E-Tailor (InformationSociety Technologies project IST-1999-10549) sup-ported this research.


14 The onlineclothing storefront page.

Table 2. Average size of downloaded data.

Data Average size in Mbytes

Body data with generic textured model (8,000 polygons) 2.0Motion data (duration 10 seconds) 0.2Garments with textures (4,000 polygons) 1Scene with textures (1,000 polygons) 1

References1. B. Beck, “Key Strategic Issues in Online Apparel Retailing—

The Need For An Online Fitting Solution,” Techex-hange.com, http://www.techexchange.com/thelibrary/online_fit.html, 30 June 2001.

2. D. Protopsaltou et al., “A Body and Garment CreationMethod for an Internet-Based Virtual Fitting Room,”Advances in Modeling, Animation and Rendering, J. Vinceand R. Earnshaw, eds., Springer-Verlag, 2002, pp. 105-122.

3. P. Volino and N. Magnenat-Thalmann, Virtual Clothing—Theory and Practice, Springer-Verlag Book Series, 2000.

4. W.H. Press et al., Numerical Recipes in C: The Art of ScientificComputing, Cambridge University Press, 1988.

5. F. Cordier and N. Magnenat-Thalmann, “Real-Time Anima-tion of Dressed Virtual Humans,” Proc. Eurographics 2002,vol. 21, no. 3, Blackwell Publishers, 2002, pp. 102-110.

Frederic Cordier is a PhD candi-date at the University of Geneva’sMiraLab. His current research inter-ests include real-time animation ofvirtual humans, particularly real-time clothes, skin deformation, andinteraction among clothes and skin.

His research takes place in the framework of several Euro-pean projects: Virtual, E-Tailor, Just, and Cahrisma. Hestudied at University Lyon-2 in Lyon and received an MSin computer graphics.

Hyewon Seo is a research assistantand PhD candidate at the Universityof Geneva’s MiraLab. Her researchinterests are in virtual human mod-eling, face and body animation, real-time graphics for virtual reality, andoptimization. She obtained her BS

and MS in computer science from Korea Advanced Insti-tute of Science and Technology. She is a student memberof the IEEE.

Nadia Magnenat-Thalmann

has pioneered research into virtualhumans over the last 20 years. Inl989, she founded MiraLab at theUniversity of Geneva. She obtainedseveral bachelor and master degreesin various disciplines and a PhD in

quantum physics from the University of Geneva.

Readers may contact the authors at MiraLab, Universi-ty of Geneva, 24, rue du General Dufour, CH-1211 Gene-va, Switzerland, email {cordier, seo, thalmann}@miralab.unige.ch.

For further information on this or any other computingtopic, please visit our Digital Library at http://computer.org/publications/dlib.

Web Graphics


Octo

ber–D

ecemb

er 2002

January/FebruaryWeb Graphics

With the popularity of the Internet, we’re seeing a migration of tradition-al applications to run on the Web environment and a growing demandfor more powerful Web-based applications. Fused by the increasingavailability and dramatic reduction in the cost of 3D graphics accelera-tors, a new direction of research, called Web Graphics, is emerging. Thisincludes developing graphics applications as well as tools to supportthese applications in the Web environment.

March/AprilGraphics Applications for Grid Computing

Grid computing allows access to distributed computing resources withthe same ease as electrical power. In recent years, graphics applicationtools that take advantage of distributed computing, or grid environ-ments, have emerged. New methodologies and techniques that harnessresources for graphics applications are critical for the success of gridenvironments.

May/JuneAdvances in Computer Graphics

This issue covers an array of advances in computer graphics such asorganic textures, lighting, and approximation of surfaces. Also, you’llfind out about new developments in virtual reality, novel approaches invisualization, and innovative CG applications. The range of topicshighlights the usefulness of computer graphics for everyone.

July/AugustNonphotorealistic Rendering

Nonphotorealistic rendering (NPR) investigates alternatives that lever-age techniques developed over centuries by artists and illustrators todepict the world. One goal of this research is to broaden the achievablerange of image styles and thereby embrace new applications. Additional-ly, NPR has the potential to open a new line of attack on one of thecentral problems of 3D computer graphics today: content creation.

September/OctoberPerceptual Multimodal Interfaces

This issue focuses on recent advances in methods, techniques, applica-tions, and evaluations of multimodal interaction. Learn how researchers’cross-disciplinary approaches helped develop multimodal interfacesfrom interaction-centered prototypes to user-oriented and application-tailored solutions. This issue also explores the notion of moving towardtransparent user interfaces.

November/December3D Reconstruction and Visualization

Models based on 3D data will ultimately include everything associatedwith the environment, such as trees, shrubs, lampposts, sidewalks,streets, and so on. The main mode of exploration for this massive collec-tion will be through interactive visualization. Ultimately, you should beable to fly continuously from overviews of a large city to centimeter-sizedetails on the side of any building. Smoothly joining these differentscales may require integrating rendering techniques in new ways.

2003Editorial Calendar

http://computer.org/cga

Made-to-Measure Technologies for an Online Clothing Store

Documents

Transcript of Made-to-Measure Technologies for an Online Clothing Store