Unwrapping with Unity

Hello,

Since a few weeks, I try to wrap a customized texture on a 3D model then to the unwrap, all to have a pattern of the object.

It is also necessary that we can move the texture on the model, make it turn and enlarge / shrink it in my project.

I first looked at the side of BabylonJS, but the offsetU and offsetV properties of the Texture class require a page reload, which is not very practical since the changes must appear live. In addition I have not really found a solution to unwrap the texture and retrieve it.

Then I went to see if we could do it with Three.js but there, I did not find anything to recover the texture unwrapped.

So I turned to Unity3D (I code in C #) but I can not either ... I start to doubt the fact that one can unwrap a texture outside a publisher.

Would someone have a track to unwrap a texture and retrieve it, all with a script?

 

Its not quite clear what you're asking...
Of what I understand, you want to be able to switch textures on a model and animate it?
There are quite a few shades/scripts you can find that do this.
If you're asking if you can do UV Unwrapping in unity, the answer is yes and no.
Yes if you are a shaded wizard (probably some way to do a geometry shader that recalculates your mesh and make new UV's)
No if you're looking for a Unity feature.
Maybe on the asset store?

 

I'd say the more important question is what this is going to be used for.

 

Hello,

I'm sorry, I'm not English native and I have few difficulties to speak English again...

I'm in traineeship and I have to do an interface where the customers can import, move, rotate and scale their personal texture. The texture is placed on an outfit. When the customers are finished to place their texture, we export and print them. The project is in WebGL.

So, how I can do UV Unwrapping exactly ? Have you got an exemple, please ?

Thanks for your answers.

 

What do you mean by "outfit"? Texture and UV unwrap usually imply 3D models.

Is this something like, there's a 3D model of a piece of clothing, and the customer picks the patterns or design they want on it? If that's the case it sounds like the customer can make their own designs to put on the clothing.

 

The outfit is a 3D clothing

Yes that's it. And I don't know how to unwrap the texture to print it.
I am a beginner in 3D and I don't really understand UV mapping. Is it like a positioning of the texture on the model? When we get that, we can reconstitute the pattern?
Is it possible to do it with a script ?

 

If you search the terms "uv unwrapping" on google, you'll see pictures like this:


But what UV unwrapping means in practice, is sort of cutting and flattening the model out on a texture. Nothing is constructed or deconstructed. There are 2 coordinates, the UV coordinates dictating the pixels assigned to the faces of the model, and the 3D coordinates which form the 3D model's shape and form.

In your case, I'd say the clothing needs to be modelled out, UV unwrapped and cut based on the seams of the clothing. With the UV map of the clothing, you can use it as a template image for your customer to draw on, and the pattern should "magically" appear on the model.

So based on my own understanding, this is not something you can do completely in script since you probably require 3D models of the clothing.

If you want to make the models via script, it's possible, just not practical at all I feel.

 

Thank you, I understand better now the UV mapping.

The model isn't made with the script. It is already in the scene. It's the unwrapping that I search to do with a script because this step is executed when the customer click on a button "Finish".

That is the interface for the moment (there is no script):

 

How in-depth is the interface intended to be?

At it's simplest, it looks like you are only matching up textures to models.

 

like @Laperen says, you just need to switch textures, no need to unwrap by script, just do it in your 3D software.the UV is just you verts of the model mapped to a 2D plane, so that if the shader draws your model, it knows what pixels to draw between your verts. So the UV is only position data the texture has the color data, if you want to change the look of you model you change the texture not the UV.
there is likely to be only one "best" UV layout for your model, looking at yours: slice down the middle, so you have your front and back next to each other on the UV.

 

You can unwrap wherever you want. Unwrapping is just doing a projection from one space to another.
In unity you would have to do the new projection and then construct a new mesh with the updated uv or positions.

With out more info it's hard to say. But a model can have more than one uv set.
So set uv1 like you have now for your 3D model.
Set uv2 to a flat projection that maps the triangles to the correct place on the image template to be printed.

You use uv set one to draw for the user. You move the texture using the materials offset and tiling letting them place it.
When they are happy, you remember these numbers.

Now you draw to a render texture using the same offset and tiling.
But the shader you draw with uses the models uv2 channel as screen space coordinates. It does not do a transform based on the 3D position of the model. So no model/view/projection. Then the rest is like normal. You lookup the texture color using uv1 in the pixel shader and draw.

This will now give you a image that if the uv2 matches your pattern you should be able print out.
Using the render texture and something like the save to png functions.

If you apply multiple logos just render once for each sticker into the render texture. Disable z test it it will stack the textures so you can have multiple on the same print.

 

The interface is composed of 3 parts:

• The presentation of the model with the texture. We can move, resize and rotate the texture with the cursor (part on the top left corner),

• The camera position around the model to have different views (part on the right),

• Textures already created and the possibility to upload a personal texture: button with + (part on the bottom).

The button "Finish" triggered the unwrap and save the textures in the web server.

My problem isn't to edited the texture but to "export" it.
I should have that (it's a picture that my traineeship master sended me): http://hpics.li/727fff8

But I have (for the moment): http://hpics.li/7587a35
(Sorry, I couldn't upload the pictures. I don't know why, it mays be the size.)

I think that is normal because you say, @jister, that the texture is used only for the color.
So how I can get a result like the master's picture?
Can I get and use the UVs data to obtain the same result?

EDIT: @daxiongmao, I just read your solution and I'll do that right away. I'll tell you what it's all about later.

 

the picture from your master is how your UV for the model should look. then you can render only the pixels inside the uv islands to a texture.
don't know right away if unity has a build-in function to render your uv's to a texture. good question actually.

 

Hello,

The @daxiongmao's solution doesn't work.
So I think that I only keep the position, size and rotation datas and I create a new picture with php. If I have the time, I will search a solution and I will come to share it.

Thank you for your help, everybody.

 

Just to make sure my method will work i mocked up a little project.
I create a really simple kind of shirt model.
Did simple uv mapping to the tshirt texture you had.

I applied that to the scene view and then wrote a shader to do the screen space projection of those same uvs. I think i said too use two UV sets. You probably don't need too.

The camera then renders out what is basically the same image as the input texture.
I moved the background image bit to make it more clear in the picture. The background is your original picture, the purple is my uv mapping and then the foreground picture with the panda logo on top is the shader rendering the UV to the screen.
Its a very quick thrown together demo, but it might give you a starting point.

 

I'm agree, I have the same result, but I can't save it in a file...
This my code to test in the editor (I think I don't have the right method):

Code (CSharp):

1. public void exportTexture()
2. {
3.         string path = EditorUtility.SaveFolderPanel("Sauvegarder la texture", "", "");    
4.         Texture2D texture = model.GetComponent<MeshRenderer>().material.mainTexture as Texture2D;
5.  
6.         Debug.Log("path: " + path);
7.         Debug.Log("texture: " + texture.ToString());
8.  
9.         byte[] pngData = texture.EncodeToPNG();
10.  
11.         if(path.Length != 0)
12.             File.WriteAllBytes(path + "/Texture.png", pngData);
13. }

After selecting the folder, nothing happens.

Edit: model is ShirtModelUV

 

You want to save the screen not the textures. The screen is the output. The textures are the input.
Unity should have a way to capture the screen. Or you can set the camera to use a render texture and then save that to png.

 

still i believe it must be possible to render your UV islands to a texture... :s
but anyway if you setup your render camera right @daxiongmao method would work for convex models.

 

To render to a texture just attach a render texture the the camera.

My method will work as long as the UV layout is planar and non overlapping. Convex should not matter.
Since he is trying to print to a tshirt (i believe) the pattern and UV layout should always be this way.

Agreed though this would not necessarily work for any arbitrary model.

 

Hi,

I'm sorry to not answered this week: I have a demonstration on the first part of the API tomorrow.
So I try to finish the textures manipulation. (Perhaps I can show you the result if my Master is agree.)

So I tried to apply your solution last weekend, but I don't have any result.
I think I have forgotten something.
Moreover, there are lots of clothes (dress, tshirt and skirt), so I suppose there are much Shader to make, wrong ?

Thanks for your help