8/7/2019 Interactive Design process
1/17
1
MOL-9706 Product Development and
Innovations
Interactive Design Process
Submitted To: Prepared By:
Heikki R. Mattila Ammar Saif (224212)
Kirill Yakobenko (226440)
https://pop-portal.tut.fi/portal/page/portal/POP-portaali/20Opinnot/23Opinto-opas?action=implementationInfo&implementationId=31340https://pop-portal.tut.fi/portal/page/portal/POP-portaali/20Opinnot/23Opinto-opas?action=implementationInfo&implementationId=31340https://pop-portal.tut.fi/portal/page/portal/POP-portaali/20Opinnot/23Opinto-opas?action=implementationInfo&implementationId=31340https://pop-portal.tut.fi/portal/page/portal/POP-portaali/20Opinnot/23Opinto-opas?action=implementationInfo&implementationId=313408/7/2019 Interactive Design process
2/17
2
Contents
1. Introduction....
...3
2. Computer Aimed Model Design.
..3
2.2 Relationship between designing process and the model data......4
2.3 Recursive description of hierarchical pictorial data....5
3.Interactive Design Process.....6
3.1. Interactive Design of Patterns7
3.2. The Mechanical Model...7
3.3 Collision Detection...8
3.4. Simulation of Dynamic Meshes.8
3.4.1. Altering the Shape of Garment Patterns...9
3.4.2 Techniques for Fitting Garments on a Body..9
3.5. Real-Time Animation of Garments.11
3.5.2. Garment Animation...12
3.6. The Virtual Try-On..13
4.Interactive Fashion Garments...15
5.Conclusion.
..16
6.References.
...17
8/7/2019 Interactive Design process
3/17
3
1. Introduction:
Fashion designing is a combination of art, industry and commerce. A fashion designer
is so delicate and so fastidious that he will never employ computer graphics unless he
can easily produce outlines, colors and textures. [2]
The challenges of virtual garment simulation are numerous and a lot of research has
been done in recent years. In beginning these efforts were dedicated to the realistic
simulation of the mechanical behavior of cloth, later the attention was moved towards
simulation of virtual garments on synthetic characters. As computer graphics are used
for garment simulation on animated virtual characters, virtual prototyping of garment
models is a major application field for the garment industry. Virtual garment
simulation is the product of a large arrangement of techniques that have evolved
during the last a few years. A lot of new challenges have been arisen from the highly
versatile nature of cloth and limitation of simulation on mechanical characters. The
central pillar of garment simulation obviously remains the development of efficientmechanical simulation models, which can accurately reproduce with the specific
mechanical properties of cloth. However, cloth is by nature highly distorted and due to
these fact specific simulation problems arises. [2]
Now cloth simulation has matured enough to introduce its potentials to the garment
industry. The main needs to be fulfilled are mostly related to virtual garment
prototyping, as well as visualization applications related to and virtual fashion and
prototyping. Besides the higher level of accuracy needed to simulate the complex
features of fashion models, new cloth design systems are now intended to help the
garment creator shorten the design process of a garment, using innovative techniques
and tools. [2]
2. Computer Aimed Model Design:
Process of fashion designing is summarized in below Chart in Fig. I. In this fashion
designing process, the model designed shows most artistic and visual part of all
processes, and indicates problems for color graphics. [1]
8/7/2019 Interactive Design process
4/17
4
[1]
At first stage the designers selects and alter body outlines and then puts clothes on thebody. The best fit and modify clothes are chosen from the collection in the data base
or new clothes are drawn. Then colors and textures are selected (material types,
weaves, etc.) and adds these to the model. From this one standard design it is tried to
produce patterns and real clothes for many different body shapes and sizes. [1]
2.1 Relationship between designing process and the model data
It can be observed in processes of (1-3) of Fig. 2, a designer requires outline data
which to be recovered and displayed simultaneously from the data base. Other
problem is that of embedding textures regions together with this by the outlines. Thisembedding has to be repeated at certain levels to avoid further problems. [1]
8/7/2019 Interactive Design process
5/17
5
[1]
2.2 Recursive description of hierarchical pictorial data
Generally 'picture' actually consists of so called 'sub-pictures'. For example, a picture
of a 'butterfly' consists of sub-pictures of 'wings', a 'body', and 'antennae' as is shown
in Fig. 3. Therefore, a picture is defined by any number of sub-pictures and their
relative positions. [1]
Fig. 3 Picture of Butterfly [3]
If we closely examine the picture, each part of butterfly has its own characteristic.
One of the characteristic is 'outline' which is defined by a set of parameters, an origin
point and line-generating rules. Another characteristic is 'texture' for the region
enclosed by the outline. The simplest texture is a single color. Particularly, the texture
is defined as pictures distributed by some placement rules on a background. The
background itself may be a single color or another texture. In this example, the
'butterfly wing' consists of 'wing outline' and 'wing texture', then 'wing texture'
consists of 'spots', their placement rules and a background texture, and etc. A 'picture'
8/7/2019 Interactive Design process
6/17
6
has hierarchical structure both in picture, sub-pictures relation and picture-texture
relation. Now a picture and texture are given the same name, 'pattern'. [1]
The structure of a 'pattern' is a tree, which has variable width and variable depth. A
node in the tree is a cease node if the pattern corresponding to that node has no sub-
patterns and has only its outlines, a color and origin point as its own attributes.Practically there is a restriction that superposition order of sub-patterns must be
defined to complete pattern description. This is because a picture might cover and hide
another picture or a part of it. [1]
Finally these data structures have to be saved in secondary storage in a data base. A
flexible data structure that allows data to be processed in the core memory and stored
in the data base is required. [1]
3. Interact ive Design Process
Most of the garment industry is still involved to the traditional way of designing
garments, which is based on designing patterns (shapes of fabric) which are then
seamed together on a mannequin. Now CAD tools (Lectra, Gerber, Investronica) are
highly involved in the 2D design process of the patterns, beside the actual prototyping
is still performed using real cloth pieces and mannequins. In recent times some
attempts were made to do actual prototyping on computer as well by using cloth
simulation techniques. But this approach is still quite inefficient because of the lack of
integration between the 2D pattern design process and the 3D simulation. Relationship
between design and simulation is the key idea for solving this bottleneck. While
current systems require the re-assembly and draping of the garment over the body for
any design change on the garment patterns, a new approach offer a smart integration
of the 2D pattern shape editor along with the 3D garment shape view to assess
interactively the effect of any pattern shape edit or posture and measurement change
on the mannequin. [2]
8/7/2019 Interactive Design process
7/17
7
Fig.4. User interface for interactive garment design (left): Edition of the patterns canbe performed any time in 2D or 3D with immediate preview of the results (right). [2]
3.1. Interactive Design of Patterns
Using patterns imported from industry CAD tools, the proposed framework obviously
addresses the issues of placing the patterns around a mannequin, seaming the patterns
together, and performing the draping using mechanical simulation. However, the main
interest of the framework is rather related to the possibility of refining and altering the
design of the patterns in real-time, with interactive preview of the effects on the
garment draped on the mannequin. These edit possibilities include resizing, reshaping,adding darts, holes, seams, pleats, attachments (zips, buttons), changing the fabric
material (mechanical properties and texture). The mannequin can be interactively
changed as well, both for measurements and for postures and motion sequences. [2]
Interactive design software provides high-quality garment simulation, not only by
simulating accurately the elastic behavior of deformable cloth through a model taking
into account elastic strain-stress curves, but also by providing accurate simulation of
the dissipative behavior of cloth for producing high-quality animations. The main
purpose of the real-time simulation is to provide to the designer a pre-view of the
garments on virtual humans. The demonstration of a simulation chain of a dressed
virtual human with the precise approach requires several minutes of computation.
While the real-time method makes the delivering of the same clothes almost
immediate. [2]
3.2. The Mechanical Model
8/7/2019 Interactive Design process
8/17
8
Weft, warp and shear deformation speeds are precisely measured on each part and
translated into strain-stress forced curves defined by the mechanical properties. These
forces are then reproduced onto the mesh vertices, and any kind of combination
scheme traditionally used for particle systems. [2]
Another advantage of the model is that it does not rely on regular particle arrays, butsatisfies itself from any triangle mesh for describing the cloth surface. This allows
complete liberty in the design of the pattern shape, as well as finest surface
representations using adapted or dynamic local mesh refinements. [2]
If even more accuracy is required for representing cloth animation, the fifth-order
Runge-Kutta scheme with error evaluation for adaptive time step is accessible in the
system. With the highly increasing stiffness of the forces and the smallness of the
mesh elements, it ensures a guaranteed accuracy in both the position and the speed of
the cloth. So, we get a good choice for testing the effect of mechanical parameters on
the motion of the cloth. [2]
3.3 Collision Detection
The cloth surface, as well as the body surface, is represented by polygonal meshes that
can have several thousand polygons each. Testing each couple of polygons for
potential collisions is an unlikely task. [2]
In the case of cloth simulation, bounding-volume hierarchies are sufficient algorithms
for collision detection, since the topology of the animated meshes mostly remains
constant, and therefore a constant pre-computed hierarchy could be used. [2]
Designing a cloth simulation frame work requires the detection of self collisions in the
cloth surface, which can be bend, wrinkle and crumple in very complex patterns. This
kind of detection is very incompetent, as every adjacent elements of the mesh are seen
as colliding by the detection algorithm. Hence, self-collisions can only be detected
within surface regions that are curved sufficiently to display them. [2]
3.4. Simulation of Dynamic Meshes
An interactive design framework always needs efficient mechanical simulation and
collision techniques for animating mechanical objects rapidly for an urgent feedbackof the design actions. However, user interaction will only be useful if an adequate
management of the pattern design give urgent feedback of the changes to the
mechanical simulation system. [2]
The key idea of the system is to take advantage of a vigorously constructed mesh that
automatically adapts to the shape and feature changes of the garment patterns during
8/7/2019 Interactive Design process
9/17
9
their design. So, any action altering the 2D shape of the patterns would have a straight
mechanical effect on the 3D shape of the garment surface. [2]
3.4.1. Altering the Shape of Garment Patterns
Most pattern correction deal with resizing and improving the shape of the patterns forbetter fit to the body. It is often useless to perform a complete reconstruction of the
garment mesh in these cases. An alteration of the fabric mesh vertices is sufficient for
matching the new pattern shape. Such simulation system scheme is possible as it does
not rely on regular framework for performing the simulation. [2]
Fig.5. Interactive edition of patterns: Each mesh vertex of the pattern surface is
displaced by a weighted amount of the displacement of the pattern contour point. [2]
Interactive Design System takes benefit of a mapping update algorithm which updates
the 2D mesh position on the fabric according to the 2D shape adjustment of the
pattern. For this reason, there are extended mesh illustration where each vertex
"remembers" which pattern vertices has originated it. Finally, the fabric coordinates of
a mesh vertex is actually obtained as a weighted sum of fabric coordinates of vertices
defining the pattern shape. When one of these vertices is displaced, all relevant mesh
vertices are updated according to the coefficients of the weighted sum which are
stored in the data structure of program. [2]
3.4.2 Techniques for Fitting Garments on a Body
Taking care of body sizes and postures is important for designing garments that fit the
body well. Rather than recreating a new 3D garment for each body to be dressed,
advantage can be taken of the versatility of the design system to provide automatic
garment adaptation to any body size and posture change. [2]
8/7/2019 Interactive Design process
10/17
10
Cloth deformation data can easily be extracted from the mechanical model used in the
system. This cloth deformation can be displayed directly on the cloth surface in the
form of strain or stress diagrams. These figures illustrate the deformation of the fabric
tension accurately on each region of the cloth. The garment designer can judge where
the garment is excessively in tension, he can correct the pattern shapes accordingly
and can observe the effect of the correction in real-time animation. Pressure of thegarment on the body skin demonstrates the comfortability of the garment on body. [2]
Anybody may be described by a set of measurements, which can either be explicitly
specified, either computed from other specified measurements using statistics. Input
data may for instance be extracted from 3D body scanner data. While the initial
draping of a designed garment is performed on a generic body of "standard"
measurements, the user may then change any measurement with on-the-fly fitting of
the garment on the body, immediately assess fitting and comfortability, and change
garment size and measurement accordingly. [2]
Fig.6. Bodies of different measurements. [2]
Postures can be changed interactively in the same way like standard body shape.
While the garment is usually created on a generic body posture that facilitates garment
assembly and draping, the user may then switch between any suitable postures. The
system automatically generates a small animation of the body from the initial postureto the new one, and mechanical computation will automatically adapt the draped
garment to the new posture (Fig.7). Besides creating artistic poses, this also helps the
garment designer to validate the shape of the garment using the comfortability tools.
[2]
8/7/2019 Interactive Design process
11/17
11
Fig.7. Animation from one posture to another allows testing the fitness and the
comfortability of a garment. [2]
3.5. Real-Time Animation of Garments
The real-time animation is integrated to the garment design tool to provide a preview
of the clothes. Animated body and a garment whose rest shape are computed with the
garment design tool; this module provides the real-time visualization of the garments
on the animated body. This module can be used at any time during the making of theclothes that helps the designers to judge the quality of their clothes. [2]
The movement of the garment can be classified into several categories depending on
how the garment is laid on, whether it sticks to, or flows on, the body surface. For
instance, a tight pair of trousers will mainly follow the movement of the legs, whilst a
skirt will flow around the legs. Thus, we segment the cloth into three layers that we
define as follows:
- Layer 1 (Stretch cloth): Garment regions that attach to the body with a constant
offset. In this case, the cloth follows exactly the movement of the underlying
skin surface.
- Layer 2 (Loose cloth): Garment regions that move within a certain distance to
the body surface are placed in another category. The best examples are
sleeveless shirts. In this case the cloth surface always collides with the same
skin surface and its movement is mainly perpendicular to the body surface.
- Layer 3 (Floating cloth): Garment regions that flow around the body. The
movement of the cloth does not follow exactly the movement of the body.
8/7/2019 Interactive Design process
12/17
12
Collisions are not predictable; for a long skirt, for instance, the left side of the
skirt may collide with the right leg during animation. [2]
Fig.8. Segmentation of garments. [2]
The segmentation process dispatches each garment region to its adequate layer. It
starts from the garment in its rest shape on the initial body, the distance between the
garment and the skin surface is used to determine to which category the cloth triangles
belong. Associated with each segment are distances from the skin surface that are used
to determine the category. Each segment falls into one of three categories: tight, loose
and floating clothes. Cloth vertices which are located closely to the skin surface
belong to the first or the second layer. Cloth vertices that do not collide with any skin
surface belong to the third layer. [2]
3.5.2. Garment Animation
Garment vertices are animated with three different methods, depending on which layer
they belong and it is defined during the pre-processing stage. [2]
Tight clothes in Layer 1 follow the deformation of the underlying skin and thesedeformations are calculated and planned.
For Layer 2 that is composed of loose clothes, the relative movements of clothes to
the skin remain relatively small, keeps a certain distance from the skin surface. In
considering the movement of sleeve in relation with the arm: for a certain region of
the garment, the collision area falls within a fixed region of the skin surface during
8/7/2019 Interactive Design process
13/17
13
simulation. With this motion in mind, the scope of the collision detection can be
strictly limited. A basic supposition made is that the movement of the garment largely
depends on that of the underlying skin and yet it should not follow the skin surface
rigidly. The local displacement of the garment from the skin surface is necessary to
simulate. [2]
Two different methods are developed for this purpose, one for cloth deformation on
the limbs (trousers and sleeves) and the other one for the deformation of cloth on the
trunk. Cloth vertices on the limbs are enclosed in half spheres that are attached to the
skin surface (fig.9). Vertices inside these spheres are displaced with the equation of
the rigid body motion. [2]
Fig.9. Cross section of a limb with a garment. Fig.10. Control (light) and attach
(dark) points for FFD. [2]
Layer 3 is composed of vertices that freely float around the body. This will take care
of scenarios, for example a large skirt floating around the legs. Any body part on this
skirt can have a collision with any part of the leg. The simulation of this layer uses a
classical approach with particle system and collision avoidance. [2]
3.6. The Virtual Try-On
The garment design tool would not be complete without the visualization of the
garments by the customers. The web application "Virtual Try-On" has been developed
to serve for this purpose. With the Virtual Try-On, customers have a free choice and
can choose garments and try on 3D mannequins that are adjusted to their body
measurements. These tools are assisted to conduct proper online purchase of apparels.
8/7/2019 Interactive Design process
14/17
14
The Virtual Try-On supports a number of efficient and interactive operations, such as
automatic adjustment of the 3D mannequin according to the shoppers body
measurement, the selection and trial of different garment items. It also includes the
online fitting/resizing of the garment to the mannequin and real-time simulation of the
garment movement. [2]
Fig.11. Interface for a web-based virtual Fig.12. Real-time animation of a dress
try-on application. [2]
The online clothing store Web server consists of two databases: first one is the body
database that contains 3D mannequins and the second one is garment database that is
composed of the garments available for purchasing. Upon user selection, the chosen
3D garment model and the body are downloaded to the client. These garments have
been designed with the garment design tool and exported to the garment database. [2]
8/7/2019 Interactive Design process
15/17
15
Fig.13. Architecture of the web-based virtual try-on application. [2]
The Web Client application contains the body/garment sizing module and the real-time
garment simulation module. The body/garment sizing module provides functionalities
to deform the 3D mannequin from the customers input body size and resize the
selected garment consequently. Once the garments and the mannequin have been
adapted to the customer's measurements, real time garment simulation is done by the
animation of dressed mannequin. [2]
4. Designers and Brands Using Interactive Fashion Design System
Various Designers and Brands are using Interactive Design System for the
development of garments nowadays. But most popular are [5]
Gucci
WEEL Technologies
Alexander McQueen
Tommy Hilfiger
http://www.weeltechnologies.com/http://www.weeltechnologies.com/8/7/2019 Interactive Design process
16/17
16
4. Interactive Fashion Garments
[6] [7] [8] [9]
5. Conclusion:
By using Interactive Fashion Design System, a lot of different and complex textile
designs and garments can be designed and visualized without actual manufacturing. It
saves a lot of money and time, as without this system we have to spend a lot of time,
energies and money for development and testing fabric to garment on mannequins. Yet
it is difficult at this stage to correlate the interactive fabric design on 2D to actually
8/7/2019 Interactive Design process
17/17
17
see its drape and look on 3D Garment simulation due to technical limitations in
software and motion of human body parts. But research is being done for its
improvement and in near future, designers will be successful to correlate fabric design
with garment simulation.
6. References:
1. From Early Virtual Garment Simulation to Interactive Fashion Design
Pascal VOLINO, Frederic CORDIER, Nadia MAGNENAT-THALMANNMIRALab, C.U.I., University of Geneva - CH-1211, Switzerlandhttp://www.miralab.ch
2. AN INTERACTIVE FASHION DESIGN
3. AN INTERACTIVE FASHION DESIGN SYSTEM 'INFADS'
TOSIYASU L. KUNII,t TAKAKO AMANO,~: HIROSHI ARISAWA:~ and SACHIKOOKADA
Man-Machine Intelligence Project, Information Science Laboratories, University ofTokyo, 7-3-1, Hongo, Tokyo 113, Japan
4. http://fohn.net/monarch-butterfly-pictures/
5. http://fashionista.com/2010/09/gucci-launches-interactive-fashion-show-
technology/
6. http://cmk.typepad.com/digitaldeities/interactive-fashion/
7. http://www.talk2myshirt.com/blog/archives/347
8. http://www.pleatfarm.com/2010/02/12/interactive-fashion-ying-gao/
9. http://ambientenvironments.wordpress.com/2010/09/28/philips-and-hussein-
chalayan-clothes-that-show-the-emotion-of-the-wearer/
http://www.miralab.ch/http://fohn.net/monarch-butterfly-pictures/http://fashionista.com/2010/09/gucci-launches-interactive-fashion-show-technology/http://fashionista.com/2010/09/gucci-launches-interactive-fashion-show-technology/http://cmk.typepad.com/digitaldeities/interactive-fashion/http://www.talk2myshirt.com/blog/archives/347http://www.pleatfarm.com/2010/02/12/interactive-fashion-ying-gao/http://ambientenvironments.wordpress.com/2010/09/28/philips-and-hussein-chalayan-clothes-that-show-the-emotion-of-the-wearer/http://ambientenvironments.wordpress.com/2010/09/28/philips-and-hussein-chalayan-clothes-that-show-the-emotion-of-the-wearer/http://www.miralab.ch/http://fohn.net/monarch-butterfly-pictures/http://fashionista.com/2010/09/gucci-launches-interactive-fashion-show-technology/http://fashionista.com/2010/09/gucci-launches-interactive-fashion-show-technology/http://cmk.typepad.com/digitaldeities/interactive-fashion/http://www.talk2myshirt.com/blog/archives/347http://www.pleatfarm.com/2010/02/12/interactive-fashion-ying-gao/http://ambientenvironments.wordpress.com/2010/09/28/philips-and-hussein-chalayan-clothes-that-show-the-emotion-of-the-wearer/http://ambientenvironments.wordpress.com/2010/09/28/philips-and-hussein-chalayan-clothes-that-show-the-emotion-of-the-wearer/