{"id":6721,"date":"2025-06-05T14:41:02","date_gmt":"2025-06-05T13:41:02","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/polytech_2A\/?p=6721"},"modified":"2025-06-05T14:41:02","modified_gmt":"2025-06-05T13:41:02","slug":"virtual-fashion-design","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2025\/06\/05\/virtual-fashion-design\/","title":{"rendered":"Virtual Fashion Design"},"content":{"rendered":"\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" data-id=\"7360\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1-1024x558.png\" alt=\"\" class=\"wp-image-7360\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1-1024x558.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1-300x164.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1-768x419.png 768w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1-500x273.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Photo-presentation1.png 1361w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Bonjour \u00e0 tous et \u00e0 toutes et bienvenus sur notre blog!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous sommes deux \u00e9tudiantes en deuxi\u00e8me ann\u00e9e de pr\u00e9pa int\u00e9gr\u00e9e \u00e0 Polytech Angers. Dans le cadre de notre formation, nous avons r\u00e9alis\u00e9 un projet d\u2019une centaine d\u2019heures intitul\u00e9 <em>Virtual Fashion Design<\/em>. Ce projet porte sur la visualisation d\u2019imprim\u00e9s num\u00e9riques appliqu\u00e9s \u00e0 des v\u00eatements virtuels. Nous allons donc vous pr\u00e9senter les diff\u00e9rentes \u00e9tapes de notre travail ainsi que les difficult\u00e9s rencontr\u00e9es.<\/p>\n\n\n\n<p class=\"has-white-color has-dark-gray-background-color has-text-color has-background has-link-color wp-elements-1 wp-block-paragraph\">Pr\u00e9sentation du logiciel Unity<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unity 3D est un moteur de cr\u00e9ation d\u2019applications en 3D et 2D. C\u2019est un logiciel qui permet de d\u00e9velopper des jeux vid\u00e9o, des applications interactives, des simulations en r\u00e9alit\u00e9 virtuelle (RV) et en r\u00e9alit\u00e9 augment\u00e9e (RA), des visualisations architecturales, ainsi que des animations interactives. C\u2019est un outil hyper-polyvalent et performant qui propose \u00e0 l&#8217;utilisateur de nombreuses fonctionnalit\u00e9s. <\/p>\n\n\n\n<p class=\"has-white-color has-dark-gray-background-color has-text-color has-background has-link-color wp-elements-2 wp-block-paragraph\">L&#8217;environnement virtuel<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour notre projet, nous avons d\u00e9cid\u00e9 de cr\u00e9er un podium de d\u00e9fil\u00e9. Gr\u00e2ce au logiciel Unity, nous avons ou cr\u00e9er une sc\u00e8ne. Apr\u00e8s avoir ajout\u00e9 4 murs, un sol et un plafond, nous avons trouv\u00e9 sur internet des \u00e9l\u00e9ments de d\u00e9cors libres de droits que nous avons utilis\u00e9s pour cr\u00e9er le podium, les spots (ne produisant pas de lumi\u00e8re) et la foule. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-1024x473.png\" alt=\"\" class=\"wp-image-7603\" style=\"aspect-ratio:16\/9;object-fit:cover\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-1024x473.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-300x139.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-768x355.png 768w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-1536x710.png 1536w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-2048x946.png 2048w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/IMG_8583b-500x231.png 500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons ensuite travaill\u00e9 sur l\u2019ambiance lumineuse et sonore. Pour commencer, nous avons install\u00e9 3 spots dans des tons orang\u00e9s. Gr\u00e2ce \u00e0 un code #C, les spots ont \u00e9t\u00e9 r\u00e9partis autour du mannequin afin de la mettre en lumi\u00e8re. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons \u00e9galement ajout\u00e9 un spot \u00e9clairant l\u2019entr\u00e9e du podium et quelques uns sur la foule. Nous avons ensuite trouv\u00e9 une musique comme fond sonore afin de donner plus de vie au d\u00e9fil\u00e9. Nous avons ensuite pu int\u00e9grer le mannequin \u00e0 la sc\u00e8ne, malgr\u00e9 les difficult\u00e9s que nous avons pour le faire s\u2019afficher correctement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La cr\u00e9ation de l&#8217;environnement virtuel \u00e9tait d\u00e9j\u00e0 bien avanc\u00e9e, nous avons seulement ajout\u00e9 une petite estrade sur le podium afin de mettre en avant le mannequin mais \u00e9galement pour \u00e9viter que \u201cla foule\u201d ne cache le mod\u00e8le.<\/p>\n\n\n\n<p class=\"has-white-color has-dark-gray-background-color has-text-color has-background has-link-color wp-elements-3 wp-block-paragraph\">Les scripts, le mannequin et les motifs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour ce projet, nous disposions de 6 tenues cr\u00e9\u00e9es \u00e0 l\u2019avance. il fallait maintenant \u00e9crire les scripts #C qui permettront de :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Changer de mannequin<\/li>\n\n\n\n<li>Changer de motif<\/li>\n\n\n\n<li>Bouger le motif<\/li>\n\n\n\n<li>L\u2019agrandir et le r\u00e9tr\u00e9cir<\/li>\n\n\n\n<li>Faire tourner le mannequin sur lui m\u00eame<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aucune de nous n\u2019est vraiment tr\u00e8s \u00e0 l\u2019aise avec le codage mais nous sommes tout de m\u00eame parvenues \u00e0 r\u00e9diger ces codes et \u00e0 les faire fonctionner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mais pour que cette partie du projet soit compl\u00e8te, il fallait \u00e9galement travailler sur les motifs que nous allions utiliser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous \u00e9tions sens\u00e9es utiliser l\u2019outil num\u00e9rique processing pour g\u00e9n\u00e9rer diff\u00e9rents tissus. Or nous n\u2019avons pas r\u00e9ussi. Nous obtenions uniquement des carr\u00e9s blancs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons donc utilis\u00e9 l\u2019IA et des sites d\u2019images libres de droits pour trouver des motifs. Nous avons notamment utilis\u00e9 le site <a href=\"https:\/\/pixabay.com\/\" data-type=\"link\" data-id=\"https:\/\/pixabay.com\/\">https:\/\/pixabay.com\/<\/a>. Ensuite, nous avons import\u00e9 ces m\u00eames motifs dans Processing afin de changer leur teinte.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-id=\"7641\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13-1024x1024.jpg\" alt=\"\" class=\"wp-image-7641\" style=\"width:291px;height:auto\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13-1024x1024.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13-300x300.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13-150x150.jpg 150w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13-768x768.jpg 768w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture13.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-id=\"7639\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12-1024x1024.jpg\" alt=\"\" class=\"wp-image-7639\" style=\"width:295px;height:auto\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12-1024x1024.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12-300x300.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12-150x150.jpg 150w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12-768x768.jpg 768w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/texture12.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;Une fois nos motifs choisis, nous les avons import\u00e9s dans Unity afin v\u00e9rifier qu\u2019ils s&#8217;affichaient tous correctement.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s cette \u00e9tape, la base du projet \u00e9tait termin\u00e9e.<\/p>\n\n\n\n<p class=\"has-white-color has-dark-gray-background-color has-text-color has-background has-link-color wp-elements-4 wp-block-paragraph\">Diff\u00e9rents moyens de pr\u00e9sentation<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons d\u00e9cid\u00e9 de pr\u00e9senter notre projet sous deux formes: La r\u00e9alit\u00e9 virtuelle et la Kinect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notre premi\u00e8re id\u00e9e \u00e9tait de permettre \u00e0 l\u2019utilisateur d\u2019interagir avec les v\u00eatements gr\u00e2ce aux contr\u00f4leurs (manettes) et au casque. La r\u00e9alit\u00e9 virtuelle avec casque est la forme la plus immersive qu\u2019il \u00e9tait possible de faire. En effet, le casque permet de visualiser l\u2019environnement virtuel \u00e0 360\u00b0 ce qui permet une grande immersion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour que cela fonctionne, il a fallu convertir tous nos scripts en une version adapt\u00e9e \u00e0 la VR et non au retour clavier. Nous avons \u00e9galement d\u00fb configurer les manettes ainsi que le casque pour que la cam\u00e9ra suive le mouvement de la t\u00eate de l\u2019utilisateur et \u00e9galement pour que les contr\u00f4leurs soient correctement d\u00e9tect\u00e9s.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De plus, il n\u2019y avait pas assez de bouton possible pour effectuer toutes les actions que nous avons cod\u00e9es. Nous avons d\u00fb trouver une autre solution. Gr\u00e2ce \u00e0 un syst\u00e8me de zones, que nous avons d\u00e9limit\u00e9es, le mouvement des manettes va \u00eatre suivi. Si les manettes entrent dans l\u2019une des zones virtuelles, le script va \u00eatre lanc\u00e9 et ce qui va permettre de faire une action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La deuxi\u00e8me id\u00e9e a \u00e9t\u00e9 d\u2019utiliser la Kinect. G\u00e9n\u00e9ralement utilis\u00e9e dans le monde du jeu vid\u00e9o, la Kinect, gr\u00e2ce \u00e0 sa cam\u00e9ra, d\u00e9tecte les mouvements de l\u2019utilisateur.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons donc utilis\u00e9 cette technologie afin d\u2019interagir avec les tenues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons donc commenc\u00e9 \u00e0 chercher des gestes qui n\u2019\u00e9taient ni trop compliqu\u00e9s, ni fatigants car ces gestes seront sans doute r\u00e9p\u00e9t\u00e9s plusieurs fois d\u2019affil\u00e9e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le plus dur dans cette \u00e9tape a donc \u00e9t\u00e9 de trouver des mouvements diff\u00e9rents les uns des autres et correspondants \u00e0 nos contraintes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons finalement r\u00e9ussi \u00e0 trouver 8 mouvements. Nous les avons ensuite li\u00e9s \u00e0 des actions (changer de motif par exemple), ceci \u00e9tait la derni\u00e8re \u00e9tape de notre projet.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Capture-decran-2025-06-05-152645.png\"><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"342\" data-id=\"7631\" src=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Capture-decran-2025-06-05-152645.png\" alt=\"\" class=\"wp-image-7631\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Capture-decran-2025-06-05-152645.png 441w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Capture-decran-2025-06-05-152645-300x233.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2025\/06\/Capture-decran-2025-06-05-152645-387x300.png 387w\" sizes=\"auto, (max-width: 441px) 100vw, 441px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-white-color has-dark-gray-background-color has-text-color has-background has-link-color wp-elements-5 wp-block-paragraph\">Conclusion<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce projet nous a permis de d\u00e9couvrir et d\u2019exp\u00e9rimenter de nombreuses technologies et outils num\u00e9riques, que ce soit Unity, Processing, la r\u00e9alit\u00e9 virtuelle ou encore la Kinect. M\u00eame si nous avons rencontr\u00e9 plusieurs difficult\u00e9s, notamment avec le codage ou la g\u00e9n\u00e9ration de motifs, nous avons su trouver des solutions alternatives et nous adapter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous sommes fi\u00e8res du r\u00e9sultat obtenu : un podium virtuel interactif et immersif o\u00f9 le spectateur peut interagir avec les mannequins et les tenues via diff\u00e9rentes interfaces. Cette exp\u00e9rience nous a aussi montr\u00e9 l\u2019importance du travail en \u00e9quipe, de la pers\u00e9v\u00e9rance et de la cr\u00e9ativit\u00e9 face aux impr\u00e9vus techniques.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce projet \u00e9tait une belle opportunit\u00e9 pour mieux comprendre les possibilit\u00e9s offertes par les environnements virtuels et leur potentiel dans des domaines vari\u00e9s comme la mode, l\u2019\u00e9v\u00e9nementiel ou le jeu vid\u00e9o. Si c\u2019\u00e9tait \u00e0 refaire, nous testerions d\u2019autres logiciels de g\u00e9n\u00e9ration de motifs et nous approfondirions encore l\u2019aspect interactif de la sc\u00e8ne.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\">Yana GAUDUCHON et Tania HERVE <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bonjour \u00e0 tous et \u00e0 toutes et bienvenus sur notre blog! Nous sommes deux \u00e9tudiantes en deuxi\u00e8me ann\u00e9e de pr\u00e9pa int\u00e9gr\u00e9e \u00e0 Polytech Angers. Dans le cadre de notre formation, nous avons r\u00e9alis\u00e9 un projet d\u2019une centaine d\u2019heures intitul\u00e9 Virtual &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2025\/06\/05\/virtual-fashion-design\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":108762,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[631],"tags":[],"class_list":["post-6721","post","type-post","status-publish","format-standard","hentry","category-631"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/6721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/108762"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=6721"}],"version-history":[{"count":3,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/6721\/revisions"}],"predecessor-version":[{"id":7643,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/6721\/revisions\/7643"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=6721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=6721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=6721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}