Chapter 3

Creating Texture Maps from Photographs

In this tutorial, I cover the basics of creating texture maps from photographs. We’ll be creating the type of texture maps that we used in the cardboard box and plastic barrel tutorials. We will then create some alpha maps and a model to put one of the maps on to.

Camera

The first thing to consider when taking photographs to be used for texture map creation or reference is what camera to use. When I was in charge of camera equipment at Evolution Studios, almost every time someone new asked to sign a camera out, I was asked, “Which camera can I take?” My response was always, “Which camera do you know how to use?” All too often, when given a choice of cameras, most people will take the most expensive, or the one with the most megapixels, or the one with the biggest lens. Well, you would too, wouldn’t you? But there is absolutely no point if you don’t know how to use it.

So we need to take some photos to use as reference. If you don’t have a digital camera, you should probably think about buying one if you’re serious about doing 3D professionally. You don’t need to fork out thousands on 12-megapixel SLRs; a decent compact digital camera will do, at least for now. As I’ve been doing this professionally for fifteen years, I have a few to choose from, but one of my favorites is a little Canon Digital ELPH (or IXUS in some countries). These ultra-compact cameras are great because they have a flash and a reasonable zoom, and they are small enough to put in the pocket of your jeans, so you will never miss a photo opportunity. I always carry a Canon ELPH with me wherever I go.

Photo Shoot

Ideally, you should try to take reference photos on a neutral day. A light overcast day is ideal, as it means that you won’t have any shadows on your photograph. England is great for this, but if you live in one of the sunnier areas of the world, pick a time when there aren’t long shadows across everything that you want to photograph.

Taking photos in bright light or where there are a lot of shadows on the subject matter can mean that you have to do a lot of retouch work (sometimes many days’ worth), as you’ll need to go through and retouch every image you want to use as a texture. It may be worth postponing the photo shoot to another day, if you can, to prevent this kind of extra work.

One final point to consider when you are taking reference photos is that if you see something that is really good and you can’t miss taking a photo of it, remember to take more than one shot. When you see a great photo opportunity, it’s a terrible shame to stop the car and take the shot, only to find out when you get home that it wasn’t properly exposed or that you shook the camera, or whatever. If it’s worth stopping to take one shot, it’s worth taking a few.

There is a fantastic book written by Luke Ahearn called 3D Game Textures: Create Professional Game Art Using Photoshop (Focal Press, ISBN-10: 0-240-80768-5). If you are new to modeling or creating texture maps, I highly recommend that you buy this for your bookshelf. It covers most aspects of creating texture maps and how to use them, in far more detail than I can do in one chapter here.

Creating the Cardboard Box Texture Map

On to the texture creation for a cardboard box. I chose this model for its simplicity. The model had only six polygons, which we mapped with six separate texture maps. I have included a number of photographs of boxes which I have taken in fairly good conditions. These can be found on the DVD under Chapter 3Source Files box photos. As in the first tutorial, we are not too concerned with laying out all the sides of the box on one texture sheet; we’re just quickly throwing the textures out, for you to get modeling quickly.

If you can, take some photos of something yourself, instead of using the ones provided on the disc. This is a great habit to get into, and you’ll learn far more by completing the whole exercise yourself. You’ll also be able to add this model to your portfolio if you use your own photos, which we will cover in a lot more detail in Chapter 9. From whatever source, you should have six photos of a box-like object. You may have decided to take photos of a cereal box, a DVD player, or even a piece of furniture, but as long as you have some photos of a square or rectangular object, we can progress.

Next, upload the first photograph into Photoshop and drag some rough guide lines around the straight edges of the box. We’re going to use these to make sure the box is square when creating the texture. Then, using the Rectangular Marquee tool, select an area around the box in the photo and crop the image. Make sure that you don’t crop to the guidelines—we need a little extra to play with.

With the cropped area still selected, use Edit > Transform > Skew to line up the edges of the box roughly with the guide lines. Once the box texture is approximately squared and the Skew modifier hasn’t distorted the image, crop it at the guidelines.

If the box has slightly rounded corners, use the Clone Stamp tool or the Healing Brush tool to tidy up the edges and corners of the image. Then go to Image > Image Size and rescale the image to a size that we can use in game.

In this case I’ve selected 256 × 256 pixels. This size might be considered fairly large for a lot of game engines, for such a small asset, but as this will be primarily for a portfolio composition, let’s keep it quite high. You don’t have to scale the proportions down at all, but it helps to make scenes more believable if all the pixels in the scene are approximately the same size.

To explain this a little more, if your next asset to be built were half the size of this box, you would probably want to use a texture map that is half the size. That way, if they are positioned next to each other in the scene, one won’t look like it’s of a higher resolution than the other.

After repeating this exercise with all the other photos of the box, you should be left with a set of six new texture maps. You could speed up this process by taking only a photo of the top of your box and a photo of one of the sides and then using only two textures on the box that you build. This is a great trick for texture memory usage in a game (you’ll use much less texture memory) and you’ll also be able to complete the build in a fraction of the time.

Here are the completed textures:

Creating the Barrel Texture Map

First, open up the reference photos from the DVD (Chapter 3Source FilesDrum Photos. You definitely need Photoshop for this part of the texture creation process, as you’ll have to use some of Photoshop’s tools to create the seamless blends. You should see that we have a top and bottom for the barrel and also four side photos.

What we are going to try to do is to recreate the key parts of the barrel from the photographs provided and fit it all neatly onto a 1024 × 1024 texture page. This time, instead of cropping each photograph and using the resulting image for each side of the model as we did with the cardboard box, we’re going to blend key parts of some of the photographs together to make something that looks believable and is also laid out neatly. In the games industry, it’s very important to have very efficient texture pages. An efficient texture page uses up as much of the page as possible and does not have lots of gaps or unused space that the model doesn’t use.

As you can see from this flower image, there is the least amount of texture map waste around the flower as possible (shown in green). This is a good example of minimizing waste on a texture sheet. Although there is quite a lot of waste (shown in green), it is the least amount possible to produce the right effect.

There are a few different ways by which to create texture maps for models like this, but here is the method that I think is most appropriate for this exercise. First of all, we need to think about how the barrel texture can be laid out or unwrapped. We want to represent the key components of the photos and we want the barrel to look as realistic as possible when we finish.

For this model, I think that there should be three main parts to the texture map: the top, the bottom, and the sides. To make the model look realistic when it is mapped, we want as few joins on the texture map as possible, as all of the edges on this model are rounded. If we were modeling an asset like the cardboard box again, this issue wouldn’t matter, as the joins on each of the sides are hidden by the corners and also by the smoothing groups. But for this model, we’ll need to treat the edges differently.

Although the barrel shape has flat sides, its corners are rounded, so in this instance we should consider mapping the sides with cylindrical mapping. This means that the texture for this part of the model needs to “tile” (that is, to wrap seamlessly around the model). With this in mind, we will dedicate most of the texture page to the sides, but we’ll also make sure that it covers the top area of the texture completely (from left to right) so that we can use the Offset tool in Photoshop. This approach will enable us to tile the texture and thus to seamlessly map all the sides on the barrel.

To keep the texture resolution roughly even across the model, allow the top and bottom of the barrel around 30 percent of the height of the texture page as shown in Figure 3.13.

Dividing up the texture map in this way should give us plenty of room for the top and bottom details and also enable us to tile the side’s part of the map easily in Photoshop. It does, however, leave us a small area spare. We can use this for any extra details that we haven’t thought of yet, or maybe a label or some other feature not on the source photo. Dividing up the texture page in this way will mean that we will not be using each side of the barrel directly from the photograph. As texture pages need to be either square (512 × 512) or divisible by two (1024 × 512), we would have to cram and stretch the four sides of the barrel into this area, which wouldn’t really work, as it would cause distortions.

A texture that is divisible by two could be used, which would give us plenty of room for the four sides and the top and bottom, but again we would still be stretching the photo reference to use the texture page efficiently, so we will opt for the first layout, as it is closer to the reference.

Obviously, if you never intend to put your texture maps into a game engine, you could make them any size or shape you like. The best way to do this is to model your barrel, then take screen grabs or wireframe renders of the front, sides, top, and bottom, and use them as a guide for your map. There are also other plug-ins and tools that help, but these are the simplest methods to get you started.

Let’s get started with the texture map creation. First, open up the reference photos from Chapter 3Source FilesDrum Photos on the DVD and copy and paste the components that you’d like to see on your texture map into a new Photoshop file. Once you have the main components for the sides, crop the image and save it out. Next, flatten the image by going to Layer > Flatten Image. This step should give you with a nice canvas to start to work on.

Next, use a combination of the Clone Stamp tool (shortcut S) and the Healing Brush tool (J) to cover up the parts of the texture map that we don’t want. Start with the really dark areas and the lines that don’t line up by replacing them with the more generic parts that we do want. If you have an older version of Photoshop, you’ll probably just have the Clone Stamp tool. Don’t worry—you’ll do just fine using that.

If you haven’t used these tools before, here are some basic instructions. Start by holding down Alt and left-clicking the area of the texture map that you want to clone from, then just left-click and hold to paint over the area that you want to change. Experiment with the opacity settings of the tools for varied effects.

One thing to watch out for when creating texture maps with these tools is not to repeat obvious areas of the texture. This sort of repetition really stands out and ruins the illusion of your model being real. Any bright spots or dark creases should only exist once or be completely removed. The horizontal lines around the barrel should be removed too, as we’ll add these back in later.

As you can see from this image, after only a few minutes of cloning and healing, the texture map is starting to take shape.

Continue this process until you have eliminated all the areas of the texture map that we don’t need and you have a fairly generic barrel texture. If the Healing tool is taking a long time to calculate, just resize the image so that it is smaller and use slightly shorter brushstrokes; this should improve the update speed.

Let’s next make sure that the image tiles. To do this, we use the Offset tool in Photoshop: Filter > Other > Offset and select an offset so that the join mark is roughly in the center of the image.

Use the same Heal and Clone tools to remove the join line down the center of the texture map. Once the join is removed, we can either leave the texture map as it is or offset it back to its original position. I always like to offset it back, but there’s no need, as this texture map now tiles on the horizontal axis. Once finished, you should end up with something like this:

Now we need to add the other details of the texture map. As we didn’t create the first part of the texture page with any size considerations, let’s do that next. We need to start to lay out the texture map so that the new components will be in the right place and at the right scale. We need to create a new image to lay out our map, so create a new file measuring 1024 × 1024 pixels. Go to Edit > Preferences and set the rulers to measure in pixels, then press Ctrl + R to show the rulers, if they are not already displayed. We next need to create a few guidelines to help us with the proportions of the rest of the texture. To do this, click on the ruler on the left hand side of the image and drag a guide out to 341 pixels. Just drag it out to approximately 341 pixels and use the Move tool (V) along with the Zoom tool (Z) to make it accurate. Do this again from the left margin to 682 pixels and again from the top margin to 682 pixels. This should give you perfectly measured guidelines to fit the top and bottom of the barrel on the texture map.

Next, cut out the top and bottom of the barrel from the photo reference and lay them out in the gaps on the texture map.

Then clone and heal the areas around the top and bottom of the barrel so that they blend into the surrounding area. You can adjust these joins once you have the texture mapped onto the model. We might make these areas slightly lighter or darker, depending on their corresponding edge on the model. We then fill in the blank space on the map with base texture or we can choose to leave it blank, so that we know there is some spare room on the texture map, should we come back to this model in the future to make changes or add details.

Finally, create a new layer and draw the dark and light lines across the sides to suggest that there is extra detail where there isn’t—and our texture page is complete.

Creating Alpha Maps

“Alpha maps” are partially transparent maps used for 3D models that need to create the illusion of complexity without having lots of polygon detail. One of the most popular uses for alpha maps is foliage (trees, bushes, and plants). For instance, when creating the illusion of lots of trees in an in game environment, if we were to model and texture every leaf on a tree, not only would it take the artist a long time, but it would also be expensive for the 3D engine to run. If you needed to show thousands of trees in a game, then the problems would be thousands of times worse. Alpha maps do not come without cost, but they are usually preferable than this approach, called “poly modeling”, where thousands of instances of the model are to be used.

So, to create an alpha map from a photo, we first need to take the reference image. It can be really useful if the photo is taken with a neutral background to the image. Good examples include taking a photo of a tree against the sky, holding up a white sheet behind a bush, or even just photographing leaves against a white foam board. Obviously, smaller items like chocolate bar wrappers or leaves can just be scanned, but remember to make sure that they are clean before you scan them. We don’t have to use a photograph to create alpha maps: we can also create them from scratch in Photoshop or a similar graphics package.

Once you have the reference image to create the alpha map from, remove all of the extra pixels on the photograph that you don’t want to be included on the image. For this step, I use Photoshop again. Open the image in Photoshop. (If you are using an application other than Photoshop, you should really think about upgrading, as it is the industry-standard package for this type of work.) Once you have the photograph loaded up, create a duplicate layer of the image. I always create an extra “empty” layer beneath my duplicated background layer, which I fill in neon pink or green so that I can clearly see what I am taking away and what parts of the photograph remain.

Remove the parts of the photograph that you do not want to see on the 3D model in the alpha map. I tend to use the Magic Wand tool or the Eraser tool for this. There are a number of plug-ins for Photoshop that help to do this, such as Fluid Mask 3 from Virtus, but the Magic Wand and Eraser tools work well enough for most artists.

Once you have the flower cut out, use the Magic Wand tool to select the empty area. Go to Select > Inverse so that you now only have the flower selected. Finally, use Select > Modify > Contract and contract by 1 pixel. The reason we are reducing the selection by 1 pixel is to prevent a halo on the areas around the edges of the alpha.

Create a new layer with a white background (RGB 255,255,255) and fill the selected area in black (RGB 0,0,0). The white area of this layer will be the part of the texture we see in game on the alpha map and the black area will be the transparent part. The RGB values are important when creating alpha maps, as 0,0,0 is completely invisible and 255,255,255 is completely opaque, so if you were to choose values between, they would be semi-transparent.

We now need to copy this whole layer (Ctrl + A and then Ctrl + C) and then copy it into an alpha channel in the Channels tab (next to the Layers tab). To do this, click the Channels tab and then click on the tiny arrow on the right-hand side, just right of the Paths tab. This will open up a fly-out box. Click New Channel on the fly-out box and name the channel Alpha 1 (it may default to this). Paste the alpha information into this channel by using Ctrl + V. The final thing to do is to invert this channel so that the flower part is white. To do this, go to Image > Adjustments > Invert or just use the shortcut Ctrl + I. Our alpha channel is complete. Now we need to save the image as Flower.tga.

It’s important to save this image with a TGA extension, as it is a lossless format, but more importantly, TGAs support the alpha content of the file via the alpha channels, which will be picked up in 3ds Max. You could also use PNG or DDS for your alpha maps, but they are not as straightforward and therefore aren’t covered here.

Alpha Maps in 3ds Max

To view this map in 3ds Max, create a simple primitive object and apply our Flower.TGA texture map to it. First we need to open up 3ds Max, go to Create > Box, create a box of any dimensions, and then hit Z to Zoom Extents All. With the box still selected, go to Modify > UVW Map > select Box from the mapping parameters.

Next, open up the Material Editor (shortcut M), click Diffuse > Bitmap, and then load Chapter 3Source FilesFlower.tga from the DVD. Still in the Material Editor, click the Assign Material to Selection and Show Map in Viewport buttons and you should see the flower image mapped neatly on all sides of the box.

Next, click the Go To Parent button in the Material Editor and open up the Maps rollout menu. Check the box on the left of Opacity and then click the None button to the right to open the Material/Map Browser window. Double-click Bitmap and open up the Flower. TGA file as before. This time, in the Bitmap Parameters select Alpha in the Mono Channel Output box. This basically tells 3ds Max that we want to alpha this bitmap. Go to Rendering (click F10) and then click the Render button; you should see our flower alpha map clearly rendered against the background (which I have made light grey in Figure 3.27).

Alpha maps can be used on models with any number of polygons. As long as you take care to lay out the UVs properly, you can work with any number of polygons and bitmaps, just like any other type of modeling. Alpha maps can also be separate files to the diffuse texture and don’t need to be in an alpha channel defined within the TGA file. They can be other file formats, too. The reason we use TGAs (or DDS) for alphas is that we don’t need to define and load a separate alpha map into the game engine, which makes it more economical, but it also means that we don’t load up the wrong alpha map or delete or modify it by accident.

Next we’ll create another alpha mapped model to be used in a scene in Chapter 8.

Creating a Tiling Alpha Map

For this exercise, we will create another texture map from a photograph, but this time we’ll make it tile in both the X and Y axes. We need to start with some source material. We’re going to make some chicken wire from this reference photo:

As you can see, it’s not the greatest reference photo in the world, but often you have to make do with what you can get your hands on, and this is a good example of making something good from very little.

Start to build up a reference library of your own by filing good reference images when you find or take them. This habit will help you immensely if you turn professional. Most artists that I know have a secret stash of photos that they’ve taken throughout the years of stuff that they’ve either needed in the past or that they think will come in handy at some point.

Common models like traffic cones and street signs often come in handy for populating all sorts of virtual worlds, so if you take a good set of reference photos once, they can serve you for many years. Construction vehicles like diggers and tractors come in handy too—not to mention generic trees and plants. As you travel around, keep your camera handy and build up your collection. Remember to organize your photos so that you know where everything is, or even meta-tag them so that you can search them like a database.

Let’s move on with the texture map. Just like with the flower alpha map, make a copy of the background layer and add a brightly colored layer in between so that you can see what you’re erasing. Take out all the areas of the map you don’t need. For this particular map, it’s probably best if we just use the Eraser tool (E) instead of the Magic Wand tool, as the pixels that we want to delete are closely matched in color to the ones we want to keep.

Keep on erasing until all you have left is the chicken wire part of the texture. Create a new image measuring 512 × 512 pixels and paste our piece of chicken wire on it. Using all the tools we’ve used before (Copy and Paste, Clone, Skew, Offset…), keep working on the texture until you have a basic tiling pattern.

Use the same techniques as earlier to create the alpha version of the texture and add it to the alpha channel of a TGA file or save it as a separate alpha TIF file.

It’s good practice at this point to fill in the bright neon color with one a little closer to the chicken wire color; this step will help prevent halos or green pixels from showing on the model if your alpha map does not match perfectly.

Finally, we need to create a chicken wire model onto which we will map the texture. Here is the texture mapped onto a simple box, tiled ten times in both the U and the V.

Congratulations! You’ve now completed Chapter 3—well done. You should now have the ability to create most primitive objects in 3ds Max and also to create texture maps for them in Photoshop.

At this point, feel free to move on or to play around with what you have learned so far. And don’t feel that you have to rush on to Chapter 4. You will probably retain all the stuff you’ve learned so far much better if you go over it a few times, so maybe before you move on, practice what you’ve learned and reread these first few chapters—it might help speed you along in the long run.

The next chapter is the first one from a guest writer in this book. Davie Wilson, a lecturer from Derby University in the United Kingdom, covers the theory and construction of Normal Maps.