In this site, in the customization section, how is the fabric selection applied to the clothing?
Which technology are they using?
Being in the fashion and retail sector, I am interested in knowing their methodology.
2 Answers
These are almost certainly 3D models, with fabric texture images which have been applied using UV mapping. As for which software was used, there's no way to tell for sure. However software such as Blender, 3ds Max, Maya, Cinema 4d, are some that could do it.
There is a stackexhcange site specifically for Blender - better to ask there if you want more practical help on how to do achieve it, or use google to find Blender tutorials for applying textures using UV mapping. There are also quite a few available on youtube, so it's worth looking there if you are interested in how it is done, even if you don't actually want to do it yourself.
answered Oct 3, 2018 at 10:38
From what I can tell, it looks like the customizer is just loading images of pre-rendered views of the shirts. Here's an example from one product where a flat "Ramsey Pale Blue" fabric option is available:
From a 3D modeling/UV Mapping point of view, this can be done in almost any program out there, though some programs such as Marvelous Designer are designed from the ground-up for modeling fabrics and cloths. Here's a list of 3D modeling programs that would all fit the bill for creating these types of images.
Essentially, you'd just create images for every possible combination and load the images based on user-configured variables on the front end. Simple for a handful of options but approaches impossibility once more options are added.
I recently worked on a project where a customizer was being built and, depending on the project requirements, shit can get out-of-hand fast taking this approach. For example, let's say you have 3 shirt models, 3 fabric options, 3 button styles, and 3 collar designs. That's 3 x 3 x 3 x 3 = 81 unique combinations that would require a separate rendering to load if you're application isn't loading textures and applying them dynamically.
That might not sound too crazy, but let's say you've got 30 shirt designs, 12 fabric options, 5 collar styles, 5 button styles, and 3 button colors to choose from. Seems like a reasonable amount of options for a shirt retailer? (I have no idea).
That's 30 x 12 x 5 x 5 x 3 = pre-renderd images 27,000 images! Probably a deal-breaker in most cases. To achieve something like that, you'd need a full-fledged application to load a 3D model (of your shirt in this case) and then apply different textures and have them rendered in the browser.
If you just want to load images in response to clicks, pretty vanilla JS can probably be used on the front end. If you want to dynamically apply textures, materials, or etc to actual 3D models being viewed, you'll probably want a more robust library. I've played around with Play Canvas before and it's really cool. Not so much a library as much as a framework (kind of like Unreal or Unity3D but for web 3D. Other libraries like three.js and babylon.js have strong reputations for creating really customized solutions.
