Friday, 13 July 2012

Blender 2.57b & XNA 4.0 Part II

<< Pev | Next >>
In the previous post I covered how and where to get Blender, briefly described the windows we start with, covered a little bit about the 3D View window and how we can then export the cube mesh and add it to our XNA project.
In this post I intend to show you how we can take that cube and create a UV map for it so that we can then apply a texture to the cube in a render.
What is a UV Map?
Well, as I am sure you know, a mesh can be a complicated object, lots of detail, lots of vertices and faces, yet we are able to wrap a flat texture around the mesh. Well, we can only do that IF we have a UV map. The UV map describes what part of the texture appears on what part of the mesh and is stored in the vertex data of the mesh.
How does it work?
OK, the texture that gets applied to the mesh has it’s own coordinate system, this is sometimes called texture space. This coordinate system ranges from 0,0 (top left hand corner of the texture) to 1,1 (bottom right hand corner of the texture. Each vertices in the mesh will have a UV value, this tells the shader what part of the texture belongs to this vertex.
How do we create a UV Map?
Before we create our UV map, lets have a mooch around blender and discover some of the tools we are going to use. At the bottom of our 3D View

we have a load of buttons and options

As you can see in the above image, we are in object mode to start with, this is the default mode and we can use this mode to look around our mesh as we did in the last post, but what we want to do is use Edit mode. So, where you can see the option “Object Mode” at the bottom of the 3D View

Click on it and change to “Edit Mode”, alternatively you can hit the Tab key.

Your view should look something like this:

You can see our cube is nice an orange, this means that the whole cube is selected, to toggle select all hit the A key, so the first time you hit A you deselect the cube, the second time you will re-select all the cube, but all what? In blender you can select by vertex, by edge or by face. At this point you will be in vertex select mode, the selection mode is again in the bottom panel of the 3D view and looks like this

In the image above you can see we are in Select Vertex Mode. While in this mode, hit A to de select all the vertices, as we look at the cube move your mouse near the bottom right corner nearest to us and right click your mouse and you will see that just this vertex is selected, right click near another vertex and it will change to the selected vertex. Now just being able to select one vertex or all vertices is not much use, how can I select the four verts that are nearest me?, well right click them as you did before, but before you start clicking old down the Shift key for each click (not really needed for the first) and you will see you can select as many verts as you like, you can also unselect a selected vertex with the Shift key held down, you may end up with a screen a little like this

What if I want to grab a bunch of vertices in one go? Hit A and deselect all the verts, hit the B key and you will get a large cross hair that tracks your mouse pointer. Move the cross hair above and to the left of the mesh, hold down the left mouse button and drag it bellow and to the right of the mesh, you will see a box is drawn, let go of the mouse button and the vertices you just surrounded are now selected

Now, it looks like you have selected all the vertices, but you haven't, rotate round to the back of the mesh (as described in the last post with the mouse or the Num Pad keys 4 or 5) and you will see the vertices you have missed.

If you get back round to the front of the mesh, clear all the selected vertices (A) and take another look at the bottom of the 3D View screen and find this button next to the selection modes

This button allows us to see through the mesh so we can select elements not visible from this side of the mesh, so if you click this button you should get a mesh that looks like this

See how you can see the other edges and vertices behind the mesh, doing a box select (B) as before in the mode will select all the vertices on the mesh. You can also do a circle select with the C key, you can use the mouse wheel or + and – keys to scale the circle. With the circle you can click or click and drag over vertices to select them, once done hit the Escape key to come out of Circle Select.
Try all of the above with the other selection modes, Edge and Face, especially play with edge as that’s what we are going to use next.
Creating the UV Map
So how do we go about creating the UV map? Well we need to look at our mesh, in this case it’s a cube, so pretty simple geometry, and decide how we would cut it up and lay it out flat on the ground, or how we would “unwrap” it. A good description I read to unwrapping a model of a person was to do it how clothes would be cut by a tailor, so look at your own clothes and see where the seams are to help you best judge where to cut your mesh, indeed the method of cutting the mesh is call marking the seems. So, as I say we have a cube, so a pretty simple shape, we could mark every edge and have six separate squares to make up our cube or we could cut it like a cardboard box and end up with a cross shape, and that’s what I am going to do.
First of all, and I am sure you have noticed in all the images of the 3D View above, blender has the Z coordinate as the up axis, we can quickly remedy this by hitting the Num Pad 7 key, this should give you a 3D view something like this

Now you don’t have to do this as we know from the last post we can rotate the mesh when we export it, and even if we forget we can do it in our content properties in our XNA Content project for the mesh, but I prefer to model in the same space I will be rendering in, so I always get my orientation this way. So, now we are in the correct perspective, make sure you are in edit mode and have edge selection selected and that the model is not in transparent mode. Select the far right edge as well as the top and bottom edge,

move round to the left hand side of the mesh and select the top and bottom edges,

move to the right hand side and select the top and bottom edges

Now we have our seem selected, we need to mark it. On the left hand side of the 3D view window there is a panel, on this panel is a section called UV Mapping

Click the Mark Seem option and you will see that the seam has been marked in red. Alternatively you can hit Ctrl-E (so the Ctrl key an E at the same time) which will give you a pop up menu, select mark seem from this menu.
Moving back to the Top view (Num Pad 7), hit A to deselect all and you should have a screen that looks like this

So we have our seam created we now need to unwrap the mesh to give us the UV map. First we need to create a new window so we can see our model and our UV map at the same time. In the top right hand corner of all Blender windows are these diagonal lines image Left click and hold on them and drag the mouse to the left, this will open up a new window next to the 3D view, in fact you should not have two 3D view windows like this

But we don’t want two 3D view windows, one is enough, we want a UV/Image Editor window. To turn the second window into a UV/Image Edit window, click on the 3D view icon and change it to the UV/Image Edit icon like this

And your second window should now look like this (note, you can zoom and move about the texture space in almost the same way a the 3D view, mouse wheel to zoom etc.)

Not much in there, yet. So, move your mouse over the first 3D View window (this gives it focus from your keyboard commands) hit A to select all, then on the right hand panel under UV Mapping again click the Unwrap option and you will get a pop up menu, select Unwrap. Alternatively you can hit the U key and get the same pop up menu.

And Kabooooom! You have a UV map visible in the UV/Image Editor.

Before we do anything else, I want to just point you at a few tools in the UV/Image Editor, click the UV option at the bottom of the UC/Image Editor window and you get a pop up menu, there are three options there I want to quickly cover. Pack Islands, Average Island Scale and Minimize Stretch. Now, these options will make little difference here with this simple mesh, but as your mesh’s get a bit more complicated, you will want to use them. Pack Islands will ensure that the UV “Islands”, that’s each area covered by vertices in the UV map are fully packed into the map, so if you have an island hanging over the edge of the map, this option will ensure that ALL the islands fin with in the map.Average Island Scale, this option, probably best applied before Pack Islands will average out the size of your islands so if you have lots of small islands and some big ones, this option will average them all out so they are of similar size.Minimize Stretch, this is  a great option, some times when UV mapping you can end up with a UV map that can cause the texture that is rendered over the mesh to appear stretched, this option will minimize this, once selected the option will run and run until you click the UV/Image Editor window, the longer toy leave it the better the results.
So, we can now export this mesh as before, but now we can apply a texture to it and it will be wrapped around the cube correctly. So using this texture (my, we are a pretty bunch)

The cube will render like this

Now, that’s all well and good, but how do I know what to draw where on my texture other than referring to the UV/Image Editor window in blender? Well we can export the UV layout, in the UV/Image Editor window, in the bottom panel, select the UV option to get a pop up menu, at the top select the Export UV Layout option

And you should then have a screen that looks like this

Change the name of the file to what ever you like, I have called it Cube1UVLayout.png, you can change the size of the exported image, default is 1024x1024 and I set the Fill Opacity to 1 so I can see the area clearly, and just in case select All UV’s then click Export UV Layout and get a png file like this

So, now you know the coverage of your UV map. At this point it might be a good idea for you to save your blender project, go up to the info window

, select File and from the pop up select Save

On the next screen choose a location and name your project and save it.
Can I create a texture in blender that I can then use on my model in XNA?
Yes you can, it is called a UV/Image Editor window after all :D. This takes a bit of setting up, first of all we need to create the texture we are going to paint on, to do this, in your UV/Image Editor window click the New image option, it looks like this

Enter a name for your texture, I am going to call mine Cube1ColorMap, select the size you want it to be and the color, then hit OK, I tend to stick to the defaults other than the names. When ever I create a texture, for some reason Blender zooms me right into it, use your mouse wheel or the – to zoom out a bit so you can see the whole texture in the window, you should have something like this

So, now we have to set blender up so we can paint on the mesh and it writes it to our texture map and we can see it rendered in the 3D view. So, first thing we are going to do is change the mode in the 3D View, so select the mode option and choose Texture Paint

Your windows should look a bit like this now

As you can see we have a suite of tools on the left hand panel of the 3D View window, you can alter the color, the strength and the brush type, once you have selected the color, brush or texture you want to paint with you can paint directly onto the mesh. You can also paint directly onto the texture map, but to do this you have to enable image painting mode. To do this, go to the bottom of the UV/Image Editor and select the Image Painting mode icon

and you can now click and drag your mouse over the texture and it will appear on the mesh.
To paint with a texture we first need to set up the texture to use. So, first we need to load up a texture in the UV/Image Editor. We need to make some changes to the Property window, the right most window

 select the texture option from the list of property options after the icon

and the property panel should look like this

We need to now set up the texture type, change the Type from None to Image or Movie

Now we can select the texture we want to use, move down the Properties window and find the Image Panel, now select the Open option and choose the image you want to use I have chosen a brick texture for me cube and I have named the texture Bricks

Now on the left panel in the 3D view find the Texture panel and click the red and white checked image to see the images you have to use

Now, for some reason, Blender does not load the  snapshot of the image at this point, but it is useable, so either click the texture you want to use or type it’s name. Now before I use this texture I am going to ramp up the strength of my brush. Simply move up the brush panel in the 3D view and slide the value up to one, or just click the center and type the value toy want. Also another tip, under the Project Paint in the brush panel, set the bleed to 0 or you can end up with some artifacts as paint bleeds from one face to the next, default is 2.
So I have done all my painting in blender, how do I get it out?

Well, quite simply, in the UV/Image Editor, click the Image option, select Save As Image and, well save it :)

And then you can render it in XNA as you would any image on a mesh

Now keep in mind that the texture is separate to the mesh and the last exported mesh did not have any textures associated with it, if you export now then this texture will be associated and will have to live along side the mesh in your project as the content pipeline will pick it up and compile it into the mesh’s effect. If you recall in the last post you could set the Path Mode in the export, this will specify how the texture path is stored in the FBX file.
Keep in mind that I have just lightly skimmed the surface here, and hope you have as much fun mining the features of Blender as much as I do :)
Well, that turned out to be a huge post and took me all evening to write, much more than I indented to post today, hope there is stuff in there that helps you out, and remember, I am no Blender expert, this is just how I am going about it, if you have any hints or tips of the content of this post, then pleas feel free to comment below :)
<< Pev | Next >>

No comments:

Post a Comment