Can I make a UV unwrapping of a model Programmatically with Three.js

Haven’t used skype in a long while, like using slack these days because you can setup private/public channels and invite

I did a fair amount of research in 2017 on UV unwrapping for Three.js, don’t have anything to share other than links I discovered along the way - only thing I can do is to help you think about what you are trying to do. I’m just saving you the time/headache from hunting for automatic UV unwrapping(holy grail) as it’s been said before this is all related to the seam.

Unless someone can reveal a project they have seen or are working on such a concept themselves I believe is the only way we’ll see a form of UV unwrapping through Three.js. I’m just as curious as you are!

What do you need UV unwrapping exactly for? Since you mentioned a shirt designer now.

1 Like

the fabric of nearly every part of the cloth can individually change. so i wanted to know what the best solution for that would be if i implemented mine?

That doesn’t sound like you need a runtime solution for UV unwrapping. If each part comes as a model you would rather let your modelling tool generate the UV coordinates. To change the fabric you just switch between the fabric materials then.

Since we’re talking about clothes with literally seams, tools providing a seam based UV mapper like shown above would be all needed. But as mentioned in the other topic about this designer you started, this designer isn’t visualizing the shirts in 3D, but in layered pre-rendered images. Archiving a photo-realistic visualization similar to it is quite possible, but i don’t see much benefits in visualizing shirts in 3D, since there is no 3D complexity in it’s shape.

Making it photo-realistic will also require more power than you can expect from average user devices and will make it less compatible as well. After i launched a configurator for example the main issue i noticed are machines without dedicated graphics card, if at least the integrated graphics is able to run WebGL, it will often perform very bad at simple scenes already.

what do you mean by in layered pre-rendered images (i noticed it was sending the visuals as png) and what is the best way of achieving this ? and secondly if my model was a low poly mesh with good texturing to make it look photo realistic, could any graphics card render it well ?

The images seem to be pre-rendered in rendering software like Cinema4D or 3D Studio. When the fabric is changed the colar for example stays exactly the same, what can be archived by rendering with the different material, doing this with photos would be impossible. It looks very realistic though, but the depth and ambient occlusion grain seems very suspicious, as well what i mentioned before. With layering i mean just drawing the parts together in a 2D canvas.

1 Like

So if the images are rendered in Cinema 4D that means they have integrated with Cinema 4D which is a back end service which picks a users option and quickly renders it and sends it back to the website? and secondly explain the “drawing parts on a 2D canvas” or are you saying i should take the 3D model and draw it on a 2D canvas ?

All you can do is try you will soon find out what works or doesn’t work for your project.

When you are targeting high end realism we all question what is the right program/framework/library to use.
If you haven’t done your research as to what is out there in the wild, i’d recommend spending a month or 2 as to what else exists. Not saying Three.js isn’t the answer.

Here are some that I’m aware of:
Three.js related
nunustudio
WebGLStudio

Not Three.js related
BabylonJS

Other
Keyshot
3DCoat

Woow, Nunustudio seems great. Most of peoples opinion on the tailor store site i sent you, was that it was pre-rendered images so i found a service (https://www.migenius.com), they pre-render 3D images on the cloud and send it back as jpg. I feel this is the best solution, but my only problem now is the pricing and the fact that i don’t think there are any other alternative to this service.

Thanks for sharing.

The downside with a service and you probably already know is

  • how to deal with latency?
  • an extra hop(s)?
  • what happens on a mobile device?
    … and so forth, you then go into software architecture methodologies

The cost of what you are doing is indeed a guessing game i’d say between 2 - 3 months you will know what you should be selling your product at.

I didn’t said they are rendered with C4D, there is a lot render software out there. Using it to render remote is basically possible but inefficient and expensive, you’d rather just let it automatically pre-render all materials per model once, since there are no fine granular modifications such as seamlessly changing size and proportions.

With drawing parts on a 2D Canvas i’m speaking of each part being loaded as pre-rendered image, just drawing these together, basically it could be even just overlapped image elements.

But this is going off-topic now.

1 Like

so far tho, this is what i havw accomplished with three.js https://ngcouture.herokuapp.com/ and https://ngcouture.herokuapp.com/2 my only problem now is i am afraid the the models i use may not be rendered so realistically due to users graphics power as @Fyrestar said .

You probably won’t know unless you do some form of A/B Testing

If the users machine doesn’t has a graphics card but integrated, the performance will be very weak if it doesn’t crash already. Also notice notebooks with nvidia might have optimus enabled by default, it will force the horrible intel graphics performance. Most machines will run from 1-20 FPS then. In my scenario i even don’t use any postprocessing effects, optimized everything and a additional runtime optimizer will try to teak the performance by reducing settings and resolution.

It’s rather a minority which has to be ignored if you intend a WebGL application. But in your case the requirements for realism are rather too high to cover most devices.

It is still possible to archive a good level of realism without much cost by using baked effects, such as ambient occlusion, shadows etc. If the lighting and shape of a shirt is static for example, you can let blender bake them for you, and they will come without much additional cost in performance.

Hello @ben

Any update on this issue? I’ve posted a similar question recently, still looking for a solution…

Thanks!

I’m sure there are ways of making UV unwrapping with Three.js. Currently using multiple tools as the above answers are suggesting. Maybe someone in the community that can help or there is a tool that exists that I am unaware of.

In Polygonjs, I use Potpack from mapbox.

Here is an example scene using it: https://polygonjs.com/gui/uvwrap/edit

and the algo I use to give data to Potpack: polygonjs/UvUnwrap.ts at fca274020514732459aaae903259deebf85ba0ae · polygonjs/polygonjs · GitHub

It’s far from perfect yet, as at the moment every triangle is assigned its own box, where ideally this would manage them as quads. Not entirely sure how to tackle that yet.




1 Like

Shortly after my previous reply, I found inside @gkjohnson 's three-gpu-pathtracer an implemenation of xatlas, which I was not aware of.

So I’ve adapted it for Polygonjs, but it’s roughly the same, and that gives a much better uv unwrapping. Pretty close to Houdini’s uv layout tool.

2 Likes