Advertisement

Create a Game Ready Fire Extinguisher with 3D Studio Max: Part 3

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Create a Game Ready Fire Extinguisher.
Create a Game Ready Fire Extinguisher with 3D Studio Max: Part 2
Create a Game Ready Fire Extinguisher with 3D Studio Max: Part 4
Final product image
What You'll Be Creating
In this part of the tutorial, we will learn how to unwrap the low poly fire extinguisher model. UV Mapping is a major part of the video game pipeline, as many different things depend on it. A perfect unwrap is the combination of various tricks and techniques, which we will go over now.

Additional Files


Important Points About Unwrapping

When we talk about creating perfect UVs for an asset, there are a few points which are very important.

1. Keep Everything Inside the UV Box

When you open the UV Editor in 3ds Max, you'll see a box. I have marked it below with a green rectangle. This is called the UV space. We need to place our unwrapped faces inside this box, as anything placed outside of it will cause repetition (or texture tiling).

3dsMax_Fire_Extinguisher_PT3_1

2. Maximum Use of UV Space

Be sure to fill the UV Space with your UV layout as much as possible. This is the best way to get the most resolution out of a texture for your asset.

3dsMax_Fire_Extinguisher_PT3_1a

3. Overlapping Faces

Try to overlap any parts of a model that have the same UVs in the UV space, because if they look the same, or if you are going to paint the same texture on them, then why waste the UV space! For example, if we were unwrapping a car, we can overlap all four tires because they all look the same and will have the same UV layout.

3dsMax_Fire_Extinguisher_PT3_1b

4. Distribution of Texel/Pixel Density

Most of the time, we keep the distribution of texal/pixel density equal (the particular count of pixels in an area). For an example, say we're unwrapping a gun’s parts, like the barrel, trigger and handle. We should keep the same pixel density for all of these parts, otherwise they will look different, and you'll be able to see that difference in the textures.

This condition can change according to a particular game. These days, most of the FPS (first person shooter) titles keep the nearby parts of a model, double the resolution, as compared to the further away ones. For example, the backside of a gun is the most visible part in a war game, so we need a better texture resolution in this area, compared to hidden parts or parts that are further from the camera.

3dsMax_Fire_Extinguisher_PT3_1c

5. Try to Keep Similar Parts Together

Say you're texturing an asset in Photoshop, and are working on a particular part. If you suddenly need to find the adjacent part, you would go back to 3ds Max, open the UV Editor, and select the required part. This is a very long process, just to get to know the correct position of that part. To avoid this problem, it’s good to keep parts nearby and together when unwrapping.

3dsMax_Fire_Extinguisher_PT3_1d

6. Texture Orientation

Keep the UV orientation (or facing) just like your model. For example, if you flip an unwrapped face or rotate it vertically, then your texture and texture flow will also be flipped or reversed.

3dsMax_Fire_Extinguisher_PT3_1e

7. Keep the Seams Inside or Hidden

It’s a good habit to keep the seams inside your object, so they will be less visible.

3dsMax_Fire_Extinguisher_PT3_1f

8. UV Bleeding/Padding

Keep a small gap between each set of UVs, so that when we compress a texture later, they won't merge together. Most of the time, I keep the padding according to the texture's size. If the size of the texture is 2048x2048 pixels, then I keep a gap of six to eight pixels between each UV island.

3dsMax_Fire_Extinguisher_PT3_1g

UV Mapping Examples

Box & Cylindrical Mapping

Here you can see two objects and their unwrapped UVs. The box is split into six sides and is a bit separated, because each side has a different surface orientation (90 degrees). The sides of the cylinder are a single long UV plane, so there is no sense in splitting them.

3dsMax_Fire_Extinguisher_PT3_2

Planar Mapping

When you apply the Unwrap UVW modifier to an object, you'll get four different projection options: Plane, Cylinder, Sphere and Box. They project and open the UVs of the selected polygons, according to their names. For example, if you want to unwrap the selected polygon of the box shown below (which is facing the Y axis), you would choose a Planar Map projection and the Y alignment.

3dsMax_Fire_Extinguisher_PT3_3

Axis Alignment

In this example, the Cylindrical projection looks weird inside the UV box because I didn’t align it according to the right axis.

3dsMax_Fire_Extinguisher_PT3_4

But as soon as we press the Z alignment option, our UVs looks great!

3dsMax_Fire_Extinguisher_PT3_5

I hope you now have the basics of unwrapping. Now we'll start unwrapping the fire extinguisher model and you'll learn some more tips and tricks during the process.


1. Initial Unwrapping

Step 1

Let’s open the low res fire extinguisher model, which we saved in the last part of the tutorial. We will now unwrap it step by step.

3dsMax_Fire_Extinguisher_PT3_6

Step 2

First of all, with the fire extinguisher model selected, go to the Utilities panel and apply Reset XForm.

3dsMax_Fire_Extinguisher_PT3_7

Step 3

Now right click on the fire extinguisher and convert it to an Editable Poly by going to Convert to: Convert to Editable Poly (or you can collapse from the modifier stack by right clicking on the XForm).

3dsMax_Fire_Extinguisher_PT3_8

Step 4

Here we need to apply a Checker map to the asset, so we can see if there is any stretching in certain areas. Press M to open the Material Editor, select an empty slot and then click on the Diffuse channel.

3dsMax_Fire_Extinguisher_PT3_9

Step 5

This opens the Material/Map Browser window. Here choose Bitmap and select the Checker Map file provided, and apply it to the model.

3dsMax_Fire_Extinguisher_PT3_10

This is the Checker Map.jpg file.

3dsMax_Fire_Extinguisher_PT3_10a

Step 6

Here you can see the checker map applied to the model. Now go to the Modifier list and apply the Unwrap UVW modifier.

3dsMax_Fire_Extinguisher_PT3_11

Step 7

Here are some options found in the Unwrap UVW modifier. I will explain each of them.

  1. Selection: You can select the UVs by Vertex, Edge or Polygon. There is a white box at the end of this row; this is for Element selection.
  2. Modify Selection: You can grow and contract the selection with the + (plus) and (minus) buttons. There are icons with one single line, and three lines in a grey color. These will turn green when you select an edge on your asset. These lines help to Loop and Ring selections.
  3. Select By: This option is just to toggle Ignore Backfacing on or off.
  4. Edit UVs: Press the Open UV Editor button to open the UV Editor window, or alternatively you can press Control-E.
  5. Reset UVWs: With the help of this option, you can reset the UVs. You can also save and load a UV file.
  6. Map Channel: By default it should be set to 1, but you can have more than one map channel. You can open two different types of unwrap on the same asset, just by switching the map channel.
  7. 3dsMax_Fire_Extinguisher_PT3_12

    Step 8

    When we apply the Unwrap UVW modifier, some green lines appear on the model. These green lines are clearly visible, even when we turn off the material. Don’t worry about these green lines, they are just seam lines because the Unwrap UVW modifier applies a generic unwrapping by default, which is not very useful.

    3dsMax_Fire_Extinguisher_PT3_13

    Step 9

    Have a look at the UV Editor box. It shows a generic unwrapped map. Here you will see everything is merged together. So we need to reopen all the parts one by one.

    3dsMax_Fire_Extinguisher_PT3_14

    Step 10

    First of all, press Control-A to select all the UVs and move them outside the UV box with the Move Selected Subtool tool.

    3dsMax_Fire_Extinguisher_PT3_15

    Step 11

    Next go to Mapping > Flatten Mapping.

    3dsMax_Fire_Extinguisher_PT3_16

    Step 12

    This opens the Flatten Mapping dialogue box. If you want less seams, you can increase the Face Angle Threshold value, or else just press OK with the default values.

    3dsMax_Fire_Extinguisher_PT3_17

    Step 13

    Flatten Mapping breaks the UVs into many big and small parts. These UVs split according to their face angles.

    3dsMax_Fire_Extinguisher_PT3_18

    Step 14

    The seams lines (green) have changed according to our new unwrapped UVs.

    3dsMax_Fire_Extinguisher_PT3_19

    Step 15

    Open the Material Editor by pressing M , and turn on the Show Shaded Material in Viewport icon. Now you can see the checkers on the model, but we need smaller checkers so the stretching will be more visible.

    3dsMax_Fire_Extinguisher_PT3_20

    Step 16

    To increase the numbers of checkers, increase the Tiling values of U and V. There are no specific values needed, as we just want small checkers. So adjust the values according to your needs. In my case, I changed the Tiling value to 20 for both U and V.

    3dsMax_Fire_Extinguisher_PT3_21

    2. Unwrapping the Side Panel

    Step 1

    Let’s start unwrapping. For the time being, I have changed the material color on the model from the checker map to a grey color, for better visibility when selecting faces. First of all, we will unwrap the floating part of the fire extinguisher. So, select the faces of the side panel and they will turn red inside the UV Editor. You can press F2 to toggle polygon shading in selection mode.

    3dsMax_Fire_Extinguisher_PT3_22

    Step 2

    Now go to the Projection panel inside the Unwrap UVW modifier, and apply a Planar Map projection. You can see the difference in the checkers on the selected part. We have now unwrapped this part, but it's not complete. We need to make sure there is no stretching in the checkers.

    3dsMax_Fire_Extinguisher_PT3_23

    Step 3

    You can see the checkers of the selected part are not square, and there is some stretching in them. We need to remove the stretching and make the checkers perfectly square. First of all, move this part out of the box.

    3dsMax_Fire_Extinguisher_PT3_24

    Step 4

    Right click inside the UV Editor box and select the Relax tool. Choose the Relax By Face Angles option and then click on the Start Relax button. In a couple of seconds, you will see all the checkers turn to a square shape. Now this part is perfectly unwrapped and we can paint on it.

    3dsMax_Fire_Extinguisher_PT3_25

    3. Unwrapping the Main Tank

    Step 1

    Now let’s move ahead and select the faces of the entire main cylinder, as shown in the image. The conjugated UVs might be placed in different locations inside the UV Editor box—don’t worry about it. It depends on the size and coordinates of your asset.

    3dsMax_Fire_Extinguisher_PT3_26

    Step 2

    Apply a Cylindrical Map projection and choose the appropriate axis. In this case, the best guess is the Z axis. You can see the unwrap, as shown in the following image.

    3dsMax_Fire_Extinguisher_PT3_27

    Step 3

    Now just like before, move the selected UV out of the box and apply the Relax tool to them. This will make all the checkers square.

    3dsMax_Fire_Extinguisher_PT3_28

    Here is the result.

    3dsMax_Fire_Extinguisher_PT3_29

    Step 4

    One very important thing is the right placement of the UV seams. Here you can see the seam is visible on the side. So we will move it to the back, because it’s more logical to put the seam in a hidden or back area.

    3dsMax_Fire_Extinguisher_PT3_30

    Step 5

    Go to the back side of the cylinder and detach the indicated polygons.

    3dsMax_Fire_Extinguisher_PT3_31

    Step 6

    Select the edge on the right end of the UVs and then right click inside the UV Editor, and select the Stitch Selected option. The seam will now be moved to the back side.

    3dsMax_Fire_Extinguisher_PT3_32

    Here is the result.

    3dsMax_Fire_Extinguisher_PT3_33

    Step 7

    Now let’s move ahead and select the indicated polygons. This time use a Cylindrical Map projection with the Z axis option.

    3dsMax_Fire_Extinguisher_PT3_34

    Step 8

    Just like before, use the Relax tool to relax the faces to remove distortion.

    3dsMax_Fire_Extinguisher_PT3_35

    Step 9

    Using the Relax tool will convert that part into a strip, either horizontal or vertical.

    3dsMax_Fire_Extinguisher_PT3_36

    Step 10

    You can see the top part of the strip is not joined together and broken with many seams. In this case, we need to stitch the seams. So with the edge shown selected, right click and select the Stitch Selected option.

    3dsMax_Fire_Extinguisher_PT3_37

    Step 11

    After stitching the seams, you can see some edges are overlapping. So now we need to use the Relax tool on the selected edges. After using Relax, the UVs get properly unfolded.

    3dsMax_Fire_Extinguisher_PT3_38

    Step 12

    Since a straight strip is much easier to paint on than a curved one, we will now make the curved strip straight. With the curved strip selected, click on the Straighten Selection icon, under the Reshape Elements panel in the Edit UVs window.

    3dsMax_Fire_Extinguisher_PT3_39

    Step 13

    Now let’s select the indicated faces as shown in the image, and apply a Cylindrical Map projection. After that, apply the Relax tool.

    3dsMax_Fire_Extinguisher_PT3_40

    Here is the result after using Relax. Make sure to use the Relax tool in Face Selection mode only.

    3dsMax_Fire_Extinguisher_PT3_41

    Step 14

    With the bottom faces selected, apply a Planar Map projection and then use the Relax tool.

    3dsMax_Fire_Extinguisher_PT3_42

    Step 15

    Now follow the same procedure for the other bottom faces.

    3dsMax_Fire_Extinguisher_PT3_43

    Step 16

    Let’s move on and select the indicated polygons, as shown in the image. This time apply a Planar Map projection from the top, and again, use the Relax tool.

    3dsMax_Fire_Extinguisher_PT3_44

    Here is the result. But this time there is lot of stretching on this part. So to prevent the stretching, we need to create a seam in this UV island.

    3dsMax_Fire_Extinguisher_PT3_45

    Step 17

    Switch to Edge mode at the bottom of the UV Editor window, and select the loop of edges shown. Right click and select the Break option to create a seam.

    3dsMax_Fire_Extinguisher_PT3_46

    Step 18

    Switch back to Face mode, and use the Relax tool to relax the UVs. Now the checkers are quite equal and square. Sometimes I prefer straight shapes for this type of part, because straight parts are easy to paint and easily fit next to other parts.

    3dsMax_Fire_Extinguisher_PT3_47

    Step 19

    Let’s move ahead and select the indicated faces shown in the image below, and apply a Cylindrical Map projection.

    3dsMax_Fire_Extinguisher_PT3_48

    Step 20

    Use the Relax tool to make it straight, and make sure all the checkers are square. After following all these steps, I am sure you have a clear idea of projection.

    3dsMax_Fire_Extinguisher_PT3_49

    Step 21

    Now select the faces indicated below, and use a Planar Map projection on the Z axis.

    3dsMax_Fire_Extinguisher_PT3_50

    Here is the result, but we need to break it and unfold it into a strip.

    3dsMax_Fire_Extinguisher_PT3_51

    Step 22

    First of all, move the UVs outside of the box and Relax them.

    3dsMax_Fire_Extinguisher_PT3_52

    Step 23

    Select the edge loop shown, then right click and select Break.

    3dsMax_Fire_Extinguisher_PT3_53

    Step 24

    This breaks the strip in the middle. Now apply a Relax once again to open it, as shown in the image below.

    3dsMax_Fire_Extinguisher_PT3_54

    Step 25

    Use the Straighten Selection tool found under the Reshape Elements section to make the strip straight.

    3dsMax_Fire_Extinguisher_PT3_55

    Step 26

    Let’s move ahead and select the faces indicated in the image below, and use Planar Map projection to flatten them.

    3dsMax_Fire_Extinguisher_PT3_56

    Step 27

    Now select the center part, and again use Planar Map projection on the Z axis to flatten them.

    3dsMax_Fire_Extinguisher_PT3_57

    Step 28

    Move the shell out of the UV box and then use the Relax tool to relax it.

    3dsMax_Fire_Extinguisher_PT3_58

    4. Unwrapping the Handle and Supports

    Step 1

    Now select the faces on one of the four supporting clamps as shown, and use the Flatten Mapping option to flatten them. Then place them as shown in the image below.

    3dsMax_Fire_Extinguisher_PT3_59

    Step 2

    Follow the same process to flatten the other three clamps too.

    3dsMax_Fire_Extinguisher_PT3_60

    Step 3

    Now select the top cylindrical polygons.

    3dsMax_Fire_Extinguisher_PT3_61

    Step 4

    Use Planar Map projection on the Z axis, and you will get a shape similar to this.

    3dsMax_Fire_Extinguisher_PT3_62

    Step 5

    Next, select the bottom edge ring of this cylinder and break it by right clicking and choosing Break.

    3dsMax_Fire_Extinguisher_PT3_63

    Step 6

    You will now see a green seam line running around the UV shell. This means it has now been split successfully.

    3dsMax_Fire_Extinguisher_PT3_64

    Step 7

    Now select any of the horizontal edge loops and Break the edges.

    3dsMax_Fire_Extinguisher_PT3_65

    Step 8

    Once the edges have been broken, use the Relax tool to relax the shell.

    3dsMax_Fire_Extinguisher_PT3_66

    Step 9

    Straighten the shape with the help of the Straighten Selection tool.

    3dsMax_Fire_Extinguisher_PT3_67

    Step 10

    As you can see we have now finished unwrapping most of the parts, but there are still several small elements remaining inside the UV box which we have to unwrap.

    3dsMax_Fire_Extinguisher_PT3_68

    5. Unwrapping the Hose

    Step 1

    Select the faces of the hose.

    3dsMax_Fire_Extinguisher_PT3_69

    Step 2

    Stitch all the parts together one by one using the Stitch Selected tool. When you have a UV edge selected, its corresponding edge turns blue, so that you can easily understand which two edges should be stitched together.

    3dsMax_Fire_Extinguisher_PT3_70

    6. Unwrapping the Side Handle

    Step 1

    Next select the faces indicated below for the handle, but make sure you don’t select the bottom polygons of the handle.

    3dsMax_Fire_Extinguisher_PT3_71

    Step 2

    Just like we did before, use Planar Map projection.

    3dsMax_Fire_Extinguisher_PT3_72

    Step 3

    Select the edge loop shown in the image below.

    3dsMax_Fire_Extinguisher_PT3_73

    Step 4

    Right Click inside the UV box and select the Break option. You will see the edge loop turn green. This means a new seam has been created along the edge loop.

    3dsMax_Fire_Extinguisher_PT3_74

    Step 5

    Now use the Relax tool until the checkers become square.

    3dsMax_Fire_Extinguisher_PT3_75

    7. Unwrapping the Hose Joint

    Step 1

    Select the hose joint and apply Planar Map projection.

    3dsMax_Fire_Extinguisher_PT3_76

    Step 2

    Select the inner edge loop and then with the help of the Break tool, break the edge.

    3dsMax_Fire_Extinguisher_PT3_77

    Step 3

    Now use the Relax tool and you will get a shape like this.

    3dsMax_Fire_Extinguisher_PT3_78

    Step 4

    Select the polygons around the middle area (between the joint and the hose), and use a Cylindrical Map projection on the Z axis.

    3dsMax_Fire_Extinguisher_PT3_79

    Step 5

    Select the top and bottom polygons and this time apply a Planar Map projection on the Z axis.

    3dsMax_Fire_Extinguisher_PT3_80

    Step 6

    You will get the shape like this. The top chunk is perfectly unwrapped, but the lower chunk is still imperfect. So once again apply a Cylindrical Map projection on the Z axis.

    3dsMax_Fire_Extinguisher_PT3_81

    Step 7

    Now we have to open this small joint part. So select the polygons and apply a Cylindrical Map projection using the Best Align option.

    3dsMax_Fire_Extinguisher_PT3_82

    8. Unwrapping the Hose Nozzle

    Step 1

    Now comes the nozzle part. Select all of the polygons on it.

    3dsMax_Fire_Extinguisher_PT3_83

    Step 2

    Use a Cylindrical Map projection on Z axis. As you can see, there are lots of overlapping issues.

    3dsMax_Fire_Extinguisher_PT3_84

    Step 3

    To fix this, deselect the top and bottom polygons and only select the indicated faces shown below (make sure to deselect the inner faces too.)

    3dsMax_Fire_Extinguisher_PT3_85

    Step 4

    This is the result. But as you can see, there are split edges in the right bottom corner.

    3dsMax_Fire_Extinguisher_PT3_86

    Step 5

    Select all the vertices on this island, and weld them with a 0.01 value.

    3dsMax_Fire_Extinguisher_PT3_87

    Step 6

    You can see the problem is now gone. Now you can use the Relax tool.

    3dsMax_Fire_Extinguisher_PT3_88

    Step 7

    Next select the faces indicated in the image below, and use a Planar Map projection on the Z axis.

    3dsMax_Fire_Extinguisher_PT3_89

    Step 8

    Now select the inner polygons.

    3dsMax_Fire_Extinguisher_PT3_90

    Step 9

    And use the Relax tool to untangle them.

    3dsMax_Fire_Extinguisher_PT3_91

    Step 10

    Finally, select the indicated faces and apply a Cylindrical Map projection.

    3dsMax_Fire_Extinguisher_PT3_92

    Step 11

    We have now unwrapped all of the parts. During the unwrapping process, we really didn't care about the size of the UVs, so you can see a difference in the checker size on the different parts. We now need to make them all equal.

    3dsMax_Fire_Extinguisher_PT3_93

    2. Packing the UVs

    Step 1

    Select all the faces by pressing Control-A. Go to the Arrange Elements panel and click on the Rescale Elements icon. This will make all the UVs equal in size. You can now see the difference—the checkers are now all the same size.

    3dsMax_Fire_Extinguisher_PT3_94_V2

    Step 2

    You can see all the checkers look equal and squared, but due to the re-scaling process, the UVs now overlap each other. So just move all the parts aside to separate them.

    3dsMax_Fire_Extinguisher_PT3_95

    Step 3

    UV packing is like a puzzle game, and there's no automatic way to do it. You need to work using your best judgement, and fit all the elements into the UV box. If they are small, or there are any blank areas left after, it means you should scale them up and fit them in again. If the elements are larger than the box, then you need to reduce their size. We don’t want to waste any of the UV space if possible.

    See the following image. I have fit some of the elements into the box, but as you can see, some of the parts are still outside and there is no space left for them. Since in this case, we can’t reduce their size individually, we'll just reduce the size of all the elements globally.

    3dsMax_Fire_Extinguisher_PT3_96

    Step 4

    Here you can see, I have reduced the size of the elements using the Freeform Mode tool. Now I will arrange them again.

    3dsMax_Fire_Extinguisher_PT3_97

    Step 5

    Here I have packed the unwrapped UVs inside the box. There is no overlapping, except for the bottom UVs of the cylinder, which are placed in the bottom left corner.

    3dsMax_Fire_Extinguisher_PT3_98

    Step 6

    Here is the final unwrapped version of the fire extinguisher. It's now ready for texturing.

    3dsMax_Fire_Extinguisher_PT3_99

    Conclusion

    Unwrapping looks technical and is a bit tricky the first time, but once you understand it, it becomes an interesting puzzle to further solve. I hope you have enjoyed this tutorial.