Virtuaalisovittamisen Digijami 5.5.2022 oli osa Digital & Circular Fashion House -hankkeen digijameja ja siellä tutustuttiin eri virtuaalisovittamisen menetelmiin.
Mitä on virtuaalisovittaminen?
Virtuaalisovittamisella tarkoitetaan sitä, että digitaalisesti voidaan sovittaa käyttäjän tai 3D-avattaren päälle vaate tai muu päälle puettava varuste kuten silmälasit. Virtuaalisovituksella on monia selkeitä hyötyjä. Ensinnäkin käyttäjä näkee miltä mahdollisesti tuote näyttää käyttäjän päällä, jolloin käyttäjä voi tehdä ostopäätöksen sen perusteella. Joillain virtuaalisovitusmenetelmillä on mahdollista tehdä oikea vaatekoon valinta sen perusteella, mitä nettisivu tai ohjelma ehdottaa. Tämä vähentää nettikaupankäynnissä suurelta osin vaatteiden palauttamista, koska enenemissä määrin käyttäjät tilaavat suoraan oikean kokoisen vaatteen sen sijaan, että käyttäjät tilaisivat kolme eri kokoa, joista pitää yhden oikean kokoisen ja palauttavat kaksi. Virtuaalisovittamisella voi siis sanoa olevan ympäristön kuormittamista vähentävä vaikutus.
Virtuaalisovittamiseen liittyy useita eri teknologioita ja käyttökohteita. Virtuaalisovittamisessa voidaan hyödyntää useita eri teknologioita. Käydään seuraavaksi joitain niitä läpi.
AR eli Augmented reality eli lisätty todellisuus. Tällä teknologialla voidaan lisätä digitaalisia elementtejä fyysiseen maailmaan. Virtuaalisovittamisen näkökulmasta voidaan reaaliaikaisesti lisätä käyttäjälle haluttu vaate päälle, jolloin käyttäjä voi nähdä suoraan miltä joku tuote voisi näyttää päällä. Erityisesti tämä teknologia on käytössä joissain kaupoissa ”peileinä”, jolloin näytölle heijastuu kuva käyttäjästä tuote päällä. Myös älypuhelimille on olemassa vaatesovituksia. Näistä esim. Snapchat tarjoaa eri yritysten tekemiä suodattimia, joilla voi tehdä vaatesovituksia.
AI eli tekoäly. Tekoälyalgoritmeja käytetään yleensä kahdella tavalla. Aluksikin käyttäjän muodon tunnistuksessa käytetään hahmontunnistusalgorimia. Hahmontunnistusalgoritmillä ajatuksena on saada mahdollisimman tarkka malli käyttäjän kehosta. Tämä on erityisen hyödyllinen käyttäjän kehon digitaalisessa mittaamisessa, jolloin tekoälyalgoritmia hyödyntämällä voidaan tehdä käyttäjälle sopivia ehdotuksia siitä minkä kokoinen vaate käyttäjälle sopisi. Toisaalta käyttäjän eri kehonosien tunnistamiseen käytetään kuvantunnistusalgoritmia. Se toimii erityisesti jos pitää käyttäjältä tunnistaa eri osat kasvoista esim. silmälasien sovittamista varten tai jos kuvasta pitää tunnistaa eri kehon osat vaatteiden sovitusta varten.
Hahmon ja kuvan tunnistamiseen käytetään yleensä perinteistä kameraa, jolloin kuvasta voidaan tunnistaa hahmo. Toisaalta on myös kameratekniikkaa, jossa värikuvan sijaan muodostuukin algoritmia varten syvyys-/etäisyyskuva. Myös Lidar(light detection and ranging)-teknologiaa voidaan hyödyntää mallin tuottamisessa. Lidarissa laitteisto ampuu laser-säteitä ympäristöön ja analysoi sen heijastuksesta syvyys-/etäisyyskuvan. Näistä kuvista voidaan muodostaa 3D-malli käyttäjästä.
Perinteisempi lähestymiskulma virtuaalisovittamisessa käyttäjän mallin näkökulmasta on ottaa käyttäjästä mittoja ja tuottaa 3D-malli siihen tarkoitetuilla ohjelmistoilla, kuten Clo3D:llä. Siinä voidaan syöttää ohjelmaan mittaukset kehon eri osista, esim. jalan pituus, käyttäjän korkeus ja käden pituus. Lopputuloksena on virtuaalinen 3D-malli, jonka pitäisi mahdollisimman hyvin kuvata käyttäjää.
Virtuaalisia sovituskoppeja on jo todella paljon tarjolla, mutta niiden hinnoittelu ei yleensä ottaen ole avointa eli yritykset, jotka näitä tarjoavat haluavat kartoittaa mitä vaatekaupan yrittäjät tarvitsevat ja sen perusteella hintakin määräytyy. Esim. CLO-SET tarjoaa mahdollisuuden lisätä verkkokauppaan virtuaalisen sovituskopin. Toisaalta on myös ratkaisuja, joissa ei varsinaisesti tarjota virtuaalista sovitusta vaan vaatekoon suositus tapahtuu kuvista otettujen mittojen perusteella, esimerkki tallaisesta on hankkeessakin mukana oleva Sizey Oy:n My Sizey palvelu.
Virtuaalisen sovituskopin rakentaminen itse on iso ja aikaa vievä projekti. Hankkeessamme on tietotekniikan harjoittelija Mikko Saari teki hankkeelle oman virtuaalisen sovituskopin. Seuraavaksi hänen näkemyksensä sovituskopin tekemisestä.
Virtuaalinen sovituskoppi
Virtuaalinen sovituskoppi sovellus tehtiin jatkokehityksenä tietotekniikkaprojektikurssin ryhmätyön pohjalta, jossa rakennettiin verkkosivu, jolla näytettiin sekä avattaren että vaateen 3D-mallit. Varsinaisen verkkosivun lisäksi taustalle tehtiin tietokannat 3D-malleja varten ja koko kokonaisuus rakennettiin näyttämään siltä miltä se saattaisi näyttää osana verkkokauppaa. Toki tehtävä oli toteutettavissa myös ilman erillisen pelimoottorin hyödyntämistä vielä tuossa mittakaavassa, kun tavoitteena oli lähinnä saada näkymään muutama 3D-malli verkkosivulla. Johtuen pitkälti henkilökohtaisesta kiinnostuksesta pelien kehittämistä kohtaan suositin kuitenkin vahvasti Unity pelimoottorin hyödyntämistä. Unityllä on mahdollista rakentaa sovellus verkkosivuksi tavallisen sovelluksen sijaan. Perusteluna valinnassa jo tuossa vaiheessa oli se, että Unity sisälsi paljon laajemmat työkalut jatkokehityksen kannalta, jos sovellukseen haluttaisiin lisätä esimerkiksi vaatefysiikkaa tai animaatioita. Vaihtoehtoinen lähestymistapa, mallien näyttäminen JavaScript kirjastojen avulla, ei olisi tarjonnut näissä asioissa mitään valmiita työkaluja.
Tässä vaiheessa oma kokemukseni Unityn vaatefysiikasta rajoittui tietoon, että se on mahdollista ja siihen on tarjolla työkaluja niin sisäänrakennettuna Unityyn kuin myös kolmansien osapuolten kehittämiä laajennuksia. En ollut siis koskaan aiemmin kehittänyt sovellusta, jossa vaatteen käyttäytymistä pitäisi mallintaa, en Unityllä enkä myöskään muilla työkaluilla. Kun jatkokehitys tuli sitten ajankohtaiseksi ja kyseisiin Unityn valmiiksi sisältämiin työkaluihin alkoi perehtymään huomasi hyvin nopeasti niiden olevan hyvin rajoittuneita asioissa, joita tämä sovelluksen vaatimukset tarvitsivat. Suurin esimerkki tästä oli se, että vaate pystyi törmäämään vain pallojen ja kapselien kanssa ja näin ollen ihmisen muotoiselle avattarelle ei tukea ollut. Tämä puolestaan pakotti tutkimaan vaihtoehtoisia työkaluja, tarkemmin harkinnassa olivat Unreal Engine, kolmannen osapuolen paketit Unitylle tai kyseisen toiminnallisuuden ohjelmoiminen itse. Eri vaihtoehtojen kartoittamisen jälkeen päädyin valitsemaan Obi Cloth nimisen kolmannen osapuolen paketin Unitylle.
Jatkokehitykseen siirryttäessä jätettiin pois myös vaatimus siitä, että sovelluksen pitää toimia osana verkkosivua. Muutos oli jokseenkin tarpeellinen, sillä vaikka Unityllä voi rakentaa sovelluksen verkkosivuksi ei se läheskään aina ole ongelmatonta vaan usein heittää kehittäjän silmille toistasataa virheilmoitusta, tämä siis sen lisäksi että aivan kaikkea mitä Unityllä voi tehdä ei tueta rakentaessa projektia verkkosovellukseksi. Esimerkiksi kolmannen osapuolen kehittämä Obi Cloth -laajennus, jota vaatteiden mallintamiseen sovelluksessa käytettiin, ei olisi tukenut sovelluksen muuttamista verkkosivuksi.
Kuten aiemmastakin tuli varmasti esille teknisiä rajoitteita ja ongelmia tuli vastaan ja niihin pyrittiin sopeutumaan mahdollisuuksien mukaan. Kiveen hakatuiksi vaatimuksiksi aluksi asetettiin se, että vaatteen ja avattaren ei tarvitse olla räätälöity toisilleen sopiviksi, vaan mikä tahansa vaate voidaan asettaa minkä tahansa avattaren päälle, ainakin teoriassa. Tämän lisäksi uuden avattaren tai vaatteen lisääminen piti olla mahdollisimman helppoa ja näin ollen esimerkiksi se että käsin oltaisiin rakennettu avattarelle törmäyksen tunnistus yksinkertaisista muodoista ei ollut vaihtoehto johon olisin tyytynyt. Olisihan se lisännyt huomattavasti käsin tehtävää työtä avattaren luonnissa sekä rajoittanut fysiikkamallinnuksen tarkkuutta kun vaate ei olisikaan enää törmännyt avattaren mallin kanssa vaan yksinkertaisten näkymättömien kappaleiden kanssa, jotka oltaisiin vain sijoiteltu sillä tavoin, että se kohtuullisella uskottavuudella vastaisi avattaren muotoja.
Kiveen hakattujen vaatimusten ulkopuolella kehittäminen rakentui pitkälti sen ympärille, mikä oli mahdollista ja näin ollen mielikuva siitä mitä toiminnallisuutta valmiissa sovelluksessa tulisi olemaan muuttuivat sovellusta kehittäessä. Ongelmia tuli vastaan ja ratkaistavia asioita riitti. Eri ratkaisut puolestaan toivat mukanaan eri rajoitteita.
Käytännön esimerkkinä ongelmista, ratkaisuista ja rajoitteista voin kertoa, että sovelluksen alkuvaiheessa avattaret olivat liikkuvia. Avattarille saatiin luut ja animaatiot Mixamon kautta ja Unityllä saatiin helpohkosti animaatiot sopimaan kaikille eri avattarille, ei vain sille, jolla se Mixamossa alun perin luotiin. Siirtymät animaatioiden välilläkään eivät olleet ongelma vaan sujuivat oikein sulavasti.
Ongelma syntyi kuitenkin siitä, että vaatteet tippuivat avattaren läpi, törmäys vaatteen ja avattaren välillä ei toiminut. Syynä tähän oli yleisesti tunnettu ongelma, jota kutsutaan tunneloinniksi. Yksinkertaisesti avattuna ilmiö johtuu siitä, että tietokone laskee fysiikan askelissa tietyn aikavälin välein, esimerkiksi 50 kertaa sekunnissa. Askeleen aikana havaitaan, jos kappale on törmännyt toiseen, esimerkiksi vaate on törmännyt avattaren kanssa. Tällöin mallit ovat osittain sisäkkäin ja vaate voidaan työntää avattaren ulkopuolelle. Ongelma muodostuu kuitenkin siitä, että joissakin tilanteissa ohjelma on sokea sille mitä askelien välillä tapahtuu, jolloin vaatteen osa on saattanut keretä matkustamaan törmättävän esineen toiselle puolelle ennen seuraavaa askelta eikä törmäystä havaita. Ongelmaa ei auta myöskään se, että jos törmäykset tunnistetaan vapaamuotoisesta 3D-mallista törmäyksen tunnistus toimii vain kappaleen pinnalta, eikä sen sisäpuolelta. Näin ollen askelten välissä tiputtava matka on häviävän pieni ja vaate tippuu kappaleen läpi niin kuin sitä ei olisi olemassa.
Ratkaisuna tähän käytettiin vaihtoehtoista tapaa käsitellä törmäyksen tunnistus avattaren puolelta. Hyvänä puolena käytetty tapa tunnisti kappaleen pinnan lisäksi sen, jos vaate oli osittain avattaren sisäpuolella sekä osasi työntää vaatteen takaisin avattaren ulkopuolelle. Eli se toimi niin kuin tavallinen käyttäjä intuitiivisesti olettaisikin. Ylimääräisenä etuna käytetty ratkaisumalli oli myös kevyempi tietokoneelle itse sovelluksen käyttövaiheessa. Mutta kuten sanottu, jokaisella ratkaisulla tuntuu olevan myös hintansa ja tässä tapauksena käytetty ratkaisu vaati noin 10–20 minuuttia aikaa avattaren luontivaiheessa sille, että avattaren törmäysalue lasketaan. Tästä taas seurasi se, ettei avattaren muotoa voinut enää muuttaa, esimerkiksi animaatioilla, vaatetta testatessa. Näinpä ollen animaatioista jouduttiin valitettavasti luopumaan.
Tässä vaiheessa sovelluskehitys vaikuttaa jokseenkin vaikealta prosessilta mutta voin vannoa, että paljoista vaikeuksista myös säästyttiin käyttämällä valmiita työkaluja. Eli mikä oli helppoa ja toimivaa? Tuuli efekti vaatteiden hulmuamiseen oli minun osaltani helppo homma. Lisäsin yhden objektin kentälle ja painoin paria nappia vaatteen asetuksista ja se toimi. Käyttöliittymän rakentaminen onnistui täysin graafisesti ja käyttöliittymän säätimien linkitys tuulen suunnan tai voimakkuuden hallintaan vaati varmaan alle 10 riviä koodia. Helppoa ja nopeaa. Aivan yhtä helppoa ja nopeaa oli toiminnallisuus siihen, että hiirellä pystyi tarttumaan vaatteeseen ja vetämään sitä kohdilleen, aivan kuten vaikka clo3d puolellakin. Piti vain lisätä valmis Obi Cloth -paketin mukana tullut komponentti vaatteeseen.
Tiivistetysti kaikki se on helppoa minkä joku toinen on tehnyt valmiiksi. Ylipäätään suurin työ oli löytää sopivat asetukset ja korjailla vastaan tulevat ongelmat. Minun ei tarvinnut varsinaisesti ohjelmoida vaatefysiikkaa itse ja siihen verrattuna kaikki vastaan tulleet ongelmat olivat hyvin pieniä. Kaikki siis riippuu siitä mihin sitä tahtoo verrata.
Toisaalta jos ohjelmoi kaiken itse alkutekijöistä lähtien ja tekee työn hyvin, niin saattaa pystyä välttämään rajoitteita mitä muiden tekemät komponentit tuovat tullessaan. Se saattaisi pitkässä juoksussa helpottaa joitakin asioita sekä nostaa lopputuotoksen tasoa, sillä oletuksella että omaa riittävän määrän osaamista ja aikaa kyseiseen työhön. Halpa Unityn kauppapaikalta ostettu lisäosa onkin usein huomattavasti helpompi ratkaisu kuin käyttää työtunteja vastaavan toiminnallisuuden itse tekemiseen.
Loppusanoina voinkin sanoa, että suurin osa haasteista tuli sovelluksen uniikeista vaatimuksista, joita ei tavallisesti peliteollisuudessa olisi. Miten peliteollisuudessa hahmojen vaatteita sitten lähestytään? Uskoakseni siinä on mukana reilusti oikopolkuja, ”smoke and mirrors”, kuten näin kansainvälisesti asian voisi ilmaista.
Vaate voidaan suurilta osin asettaa seuraamaan pelihahmon luurankoa. Tästä luurangon määrittelemästä sijainnista sen voidaan antaa heilua jonkin verran fysiikan mukana antaen vaatteelle elävyyttä ja uskottavuutta samalla kun vaate kuitenkin pyrkii seuraamaan luurangon määrittelemiä liikkeitä. Vaatteen alla olevia osia pelihahmosta tuskin on edes mallinnettu sillä näin sekä säästetään resursseja asioista, joita pelaaja ei kuitenkaan näkisi sekä vältetään tilanteet, joissa esimerkiksi käsivarsi pilkistäisi hihan läpi. Ja mitä törmäyksiin pelihahmon ja hänen vaatteidensa välillä tulee hyvin usein muutama sopivan kokoinen, hyvin aseteltu lieriö tai kapseli on riittävä esittämään uskottavasti vaatteen kosketusta käsivarren tai jalan kanssa.
Vastaavaa ”rehellistä” vaatefysiikkaa, jossa kaikki pyrittäisiin mallintamaan tosielämää vastaavalla tavalla, peleissä harvemmin näkee, niissä kun riittää että kaikki näyttää riittävän hyvältä hyvin rajallisella määrällä hahmoja ja vaatteita erittäin hallitussa ympäristössä.
Kirjoittajat:
Ville Berg, tietotekniikan lehtori, Savonia ammattikorkeakoulu, ville.berg@savonia.fi
Mikko Saari, tietotekniikan opiskelija, Savonia ammattikorkeakoulu, mikko.saari@edu.savonia.fi.
Lähteet:
https://www.emergingtechbrew.com/guides/your-guide-to-virtual-fitting-rooms
https://www.voguebusiness.com/technology/snapchat-boosts-ar-try-on-tools-farfetch-prada-dive-in
https://3dlook.me/content-hub/virtual-fitting-room-for-ecommerce/
https://style.clo-set.com/aboutus
https://style.clo-set.com/service/features#fitting-beta
https://wwd.com/business-news/technology/gucci-reveals-snapchat-ar-shoe-try-ons-1203661812/
https://nphysics.org/continuous_collision_detection/
https://docs.unity3d.com/Manual/class-Cloth.html
http://obi.virtualmethodstudio.com/manual/6.1/distancefields.html
https://magazine.renderosity.com/article/5921/unreal-engine-4-cloth-simulation-tips