Need help and advise for a project

[Mahesh Iyer]

Hello everyone, I am involved in a project and I need help. I have been researching and doing my homework but I am still not making headway as to which direction to take. Here is my story. Request the masters here to help me.

Problem statement:

1. The project is a web and mobile based web portal that sells apparel of all kinds, especially for women
2. The proposal is to come up with a 3D virtual fitting room that will give the ability to virtually try out different apparel on a preset human model (both genders).
3. Users should be able to use the mouse and/or keyboard to perform different actions, such as lifting of hands, legs, walk, run and turn around
4. Should work on the web (at least on chrome, Firefox and opera. Safari and IE would be bonus - I know Microsoft Edge works)
5. Should work on Android and iOS mobile OS (Windows mobile would be bonus)

Resources currently with me:

1. A team of 3D modelers and animators on the 3DS Max, Maya platform (I can also rope in Blender professionals if required)
2. A team of HTML5 and Javascript developers (with no knowledge of Babylon yet and rudimentary knowledge on webgl. However, I can get professionals on board if required.)

What I currently know:

1. 3D Models can be exported as OBJ and MTL files but that would lose any animation
2. Have done a bit of homework on three.js and babylon.js - David Rousset gave me a heads up that Babylon.js would be perfect for what I want to achieve - thanks to him for responding quickly on twitter. He suggested I post my queries on this forum)

What I need to know:

1. How do I go about doing what I want to do?
2. Should I look at this project as more like a game or as an application?
3. Should I look at other modeling platforms other than 3DS Max and Maya?
4. Should I get the human models created in 3DS Max/Maya (or any other that you suggest) and import them to babylon and then animate them (if that is possible at all)?
5. Or is there a way that the models/rigs along with animation can be somehow imported to babylon?
6. If point 4 above is the way ahead, what do I need to do? Is there a set process that I need to follow?
7. So, if users should be able to dynamically select different apparel that would fit on to the model, how do I do that?

Pardon me for being a noob here, I am just very new to webgl and 3D. I am a .Net programmer myself and understand javascript pretty well.

Any advise and direction would be of really great help.

Best,

Mahesh Iyer

Edited March 5, 2016 by Mahesh Iyer
typo

[Wingnut]

Hi MI... welcome to the forum.  What a great project idea!  I love it, and you have built a fine post that summarizes the challenges you face.  Nicely done.

First, I'd like to say... that you have everything you need... with BabylonJS, and we have the best forum on the entire planet for a webGL framework.  The people here are smart, artistic, and VERY helpful.  But keep in mind that you have asked many questions/concerns... that WE ALL are experimenting-with.  WebGL is still quite new, and we are still testing its limits and freedoms.  Most of your concerns will be answered... as you work on your project.  YOU will determine what are "best practices" for your project.  It is not easy for others to predict what log-jams and victories you will encounter.  Still, there are many here who are VERY interested in what you discover and learn.

One particular interest for YOUR project... that many others haven't tested much... is cloth.  When working with garments/apparel, one of the primary concerns of your users is... "how does it hang?"... and "how does it flow?".  Your users will want their garment-modeling avatars... to spin, and hop, and possibly have a high-powered fan/wind in the fitting room.  Cloth... and its many characteristics... will be one of your more daunting challenges.

I have only seen one BJS demo to date... that has cloth "flow", and that is Gryff's fantastic Blue Lady demo... available for viewing on the main BabylonJS website.  Use your cursor keys to slowly zoom-in on the bottom of her skirt.  She won't mind.    I'm not sure how Gryff accomplished it (probably with vertex weighting)... but he has managed to get something that LOOKS like cloth-flow... on her skirt.  (He's a modeling genius, but he won't admit it.) 

There may be other demos and other people experimenting with cloth.  A playground search for 'cloth' shows 2 playground series that mention 'cloth', but, unfortunately, I can't seem to get any of them to work.  They are empty playgrounds - not sure why.  Make sure you search the forum for mentions of 'cloth', too.  I know there has been a few topics about changing uniforms on characters.

Ok, that's all I have to offer at this time.  I don't have much experience with large-scope projects such as the one you describe.  Others will surely join-in.  Again, welcome to the BabylonJS forum... good to have you with us.

[adam]

This sounds like a very ambitious project if your goal is to get the clothes to drape off the model in a realistic way.

Cannon.js can simulate cloth:

https://schteppe.github.io/cannon.js/examples/threejs_cloth.html

and BabylonJS has a Cannon.js plugin.  If you rotate the view, you will see that it has some trouble even with a simple sphere.

 

[NasimiAsl]

hi 

your project  have big problems

1. you need find some real parameters for make good simulation for each object ( all kind of your product )

2. you need 2 human body? ( all size - all age)? it is unlimited objects

 your customer need make himself first and go to find or make correct body

3. you need mix  object with other object same as shirt and pant ( shirt in pant (fit or unfit )) shirt on pant .....

4. you need make material HD for real quality in web (special in Mobile ) you have a limited resource so may be you need native app)

 

but if you serious for make this and have good resource for make it is possible  and any problem in world have solution  we can think about your request

[Dal]

As others have said, I would forget trying to do realtime cloth simulation. It's very tricky to get it to look right, particularly for clothing. There is an app called Marvelous Designer that is aimed at the fashion industry. I'd recommend you take a look at that. http://www.marvelousdesigner.com/

In theory you could use it to design the clothes to fit on your character model and animate the cloth, then export the animations to a 3d program as an animated model:

Once you have an animated model you can use Babylon's various exporter plugins to export to Babylon format for display.

Personally I wouldn't try to make it possible to "swap" clothes on the character either... that's very tricky to do, particularly if you want the character to animate without parts of the body showing through the clothes.

The easiest way would be to simply export each clothing item already animated on a body from Marvelous Designer as above and just swap the whole model outn when the user picks a different item.

 

[gryff]

Well Mahesh, this seems like a road I know - I was approached four years ago about a similar type of app that was trying to use 3D scanning to create meshes for clothes fitting. Curiously for military purposes - uniforms/kit for soldiers

I would make the same comments as NasimiAsl makes above about meshes for size/age/gender and the mixing or overlaying of garment meshes. I would add that shoe type - low or high heels would be another consideration for women. Whether it can be done with BJS - I do not know,as my programming skills are not good enough.

That said, you are not the first to come up with the idea ( my recollection from 4 years ago was that a university in Switzerland may have been one of the first). However, things have come along way since then and you might want to investigate Fitle. Here are some links to get you started:

Fitle1

Fitle 2

Fitle3

The Fitle2 link is a YouTube video about how a user would create his/her own personal avatar for clothes fitting using a smartphone which would overcome the age/size/gender issues - but I have no idea how successful it is in reality.

The other feature about Fitle which you have not considered in your post is that the user, as he/she buy clothes through the app, it creates a "your wardrobe" so you can test the look of a new garment with a garment you purchased 3 months ago.

So investigate further:)

As for software you might look at - MakeHuman and Blender - they allow you to create bodymeshes, rig them and add clothes. You can export a rigged mesh from MakeHuman to Blender, then create clothes for that mesh/rig in Blender, and then export the clothes back to MakeHuman. The "Blue Lady's dress was made that way. MakeHuman can also export in an fbx format - so could be used in 3DMax/Maya - but I have never tried it

cheers, gryff

PS Wingy overestimates my abilities