Game Character Creation Series: Kila Chapter 4 - Texture Baking & Building

Final product image — What You'll Be Creating

We are now at the fourth part of the Game Character Creation Series and here you will finally begin to breathe some life into Kila and finalize the main game model.

Using a mixture of texture baking, photo manipulation and enhanced detail passes we will walk through one approach to texturing a real time character, turning the flat colored polygons into a stylized, yet lifelike virtual person.

What I hope to show you in the following tutorial is that texturing needn't be painful, and you don't have to be an accomplished 2D artist to get good results. With the help of a few key applications and techniques you will be creating professional quality textures in no time.

Additional Files:

Download the Project Files for Part 4.

1. Scene Preparation

At this point in the series you should be in the perfect position to begin creating your texture pages. You have a high resolution version of Kila, as well as a lower, game friendly model with a full UV layout.

Note: Don`t worry if you don`t have the models to hand as they are also included in the project files.

However, before you dive into Photoshop and start painting the details onto your model, it makes sense for you to linger in Maya for a while longer and generate a few key maps. These textures will not only improve the quality of your final textures by adding detail and depth, but will also guide you as you work, and speed up the texturing process.

As you will now be aware, each stage in the character creation process requires some degree of preparation. When it comes to texturing, particularly texture baking, it’s important to organize your scene so it’s easier to navigate and to also simplify your workflow.

The first step is to bring the models together into the same scene; this is so you can transfer information from the original high resolution version onto the lower.

Next it’s essential that you organize the scene correctly, with the high and low versions of Kila divided into key sections, named appropriately and then grouped. Even though the resulting version of Kila will be a single skinned model, working on her in segments will produce cleaner maps which can be easily combined in Photoshop later.

With the models ready you can now work your way around the high version of Kila adding key colors. You can just use basic Lambert shaders for this as all you are interested in is the color information.

Tip: You don`t have to just apply colors to whole models, you can go further and color individual polygons if you require a certain pattern or effect.

2. Diffuse Map Baking

That’s the scene fully prepared so let’s start baking.

First we will look at taking the color information from the high version of Kila and baking it to a texture page, using the UVs on the lower model as a guide. This can be useful not only as it will give you your base Diffuse Map, but this can also double as a Selection Mask.

To do this we are going to use Maya's Transfer Maps tool, which essentially transfers information between two models.

Go to Lighting/Shading > Transfer Maps to open the tool.

As you can see under the Output Maps tab, there are numerous textures this tool can generate a Normal, Diffuse and Displacement map, but for now you only need to concentrate on the Diffuse.

For this example we will focus on Kila's shirt, but the same process can easily be applied to the other areas of her model.

Select the low resolution shirt model, Kila_Shirt, and then add it to the Target Meshes list.
Next select the high resolution shirt, Shirt_High, and add this to the Source Meshes list.

Here you are telling Maya to transfer the specified information from the Source Meshes onto the Target Meshes.

Note: You can work with multiple meshes selected, but for now focus on just the one until you are more confident with the tool.

You next have to specify what it is you are transferring, so in the Output Maps tab select Diffuse.

This opens a new Diffuse Color Map section and in here you can choose the file name and format which you wish to bake to.

If you look under the Maya Common Output tab you will see that this section holds the details for the actual texture map you will be generating. These are the size and quality etc.

First set the size of your target texture page, something like 1024 x 1024 will be fine for now.
Leave Sampling Quality as Preview (1x1) initially as this will generate the map quicker and allow you to spot any issues early on. Once you are happy you can always turn the quality up before you produce your final maps.

Tip: As a general rule with textures its good practice to work higher than your target resolution. If your target maps are to be 1k, (1024x1024) work to 2k, so double the size. Not only does this future proof your work, but reducing a higher detailed map will give you a superior, lower resolution map compared to working at the original size.

For now, leave the other options at their default settings and then click Bake.

Maya will transfer the diffuse information to the lower resolution model in the form of a texture, and also apply it to the model so you can instantly see the results.

This may seem a little long winded, but as mentioned you can always work on a number of objects at once. I would suggest however that if you do, you choose non-connecting or intersecting parts so you don't end up with colors from other areas bleeding into each other.

Continue on now generating the diffuse maps for each section, and then combine them in Photoshop so you have a single Diffuse map.

Note: If areas of your model which sit on the surface, like the eyebrows, are being missed off the diffuse map you can adjust the Search Envelope (%) on the model. We will look into this in more detail through the next section.

3. Normal Map Baking

The Diffuse Map is complete so let’s keep the momentum going and plough onto the Normal Maps.

Unlike a traditional Bump or Height Map which uses a greyscale image to dictate surface details, (lighter shades indicate areas on the surface which are raised, and darker areas are recessed). A Normal Map uses three colors to indicate that particular pixels direction.

Red = X (Left & Right)
Green = Y (Up & Down)
Blue = Z (Depth)

With this map, Maya will essentially treat each pixel as a surface normal.

To create a Normal Map you again enlist the help of the Transfer Maps tool to bake the surface detail between the two models, in much the same way as you did previously.

This time however, instead of selecting the Diffuse Output Map, select Normal.

As you will see, the setup is pretty much identical to when we generated the Diffuse maps. The only extra attribute to consider is the Map Space, but how this is set will depend on the target game engine. The default setting of Tangent Space is most commonly used these days.

If you now click Bake, the Normal Map will be generated and a new shader built and applied to the model.

Tip: Once the shader has been applied it’s a good idea to change this to a Blinn, or a nice shiny material. This will show the Normal Map in more detail, and highlight any issues at this stage.

For some areas of the model the basic settings will work fine, but for others where there are extra surface details, like eyebrows or fabric seams, you will need to adjust the Search Envelope (%). A larger percentage will allow Maya more room to search for the source models it needs to include.

Under Target Meshes, change the Display drop down box to Both.

This will make the actual envelope visible as a red model, so you can interactively adjust it via the slider to ensure the high resolution model fits inside it.

The problem is, as the envelope gets larger it may also overlap into other areas. You can see this happening with the fingers below.

Tip: The search envelope can actually be edited. If a certain area is causing an issue just edit the envelopes vertices around that section to eliminate the problem, rather than expanding it globally.

It’s at this stage when you may need to be a little creative and generate a number of maps at varying percentages so all the key details are included. These can then be taken into Photoshop, overlaid, and the unwanted areas deleted, leaving you with a cleaner map.

You can see this demonstrated below, where we need a larger envelope to include the strap on her arm, but then a smaller one for her fingers. Creating two or more maps and then combining them will retain all the details and eliminate any overlap.

With all this in mind, now work through each section to create your Normal map, combining it as you did with the Diffuse so it’s a single texture page.

You should end up with something like the image below, with the low resolution version of Kila now looking much closer to the original, high resolution version.

4. Occlusion Map Baking

You now have color to work with, and surface detail but we can go a step further and generate an Occlusion Map. This is essentially a light map which captures all the ambient lighting in the scene affecting your model, and bakes it into a texture.

As you will see this adds an extra level of depth to the character, and can also help to strengthen the key details.

Note: Although you can use the Transfer Maps tool to generate an Occlusion Map, I find it can be a little unpredictable, so occasionally I opt for a simpler solution. If you require a more detailed Occlusion Map then use the Transfer Maps tool just as you did previously.

First strip everything out of the scene apart from the low resolution version of Kila.
Next combine the models again according to their texture pages. You should have one for her body, and another for her hair and eye lashes.
Select Kila's body model and assign a new Bake Set by going to Lighting/Shading > Assign New Bake Set (Mental Ray) > Texture Bake Set. This tells Maya to bake out the surface information on this model.
Adjust the resolution to match what you were working to previously, and also give the image a name in the Filename Prefix box.
Next set Number of Samples to 2, and increase Fill Texture Seams to 2 or 3.

Now create a new Surface Shader and apply this to the model. You will be using this to gather the information which will be baked and pass it to the Texture Bake Set.

At present the Surface Shader will only output a black map, so you need to connect a new mib_amb_occlusion texture node into the Out Color tab so it will gather and export the ambient occlusion data.

Now those are applied you can select the body model and go to Lighting/Shading > Mental Ray (Batch Bake) to bake out the Occlusion Map.

The default settings are quite low quality, but they should give you a quick idea of how the map is looking.

Once you are happy with the results you can then increase the amount of Samples on the mib_amb_occlusion node from 16 to something like 64, or even higher if you need to. This will also eliminate any grain which you may have seen when you initially used a lower value.

Tip: To increase the quality of the resulting map, and deepen the shaded areas, make sure any other effecting objects are visible. In this case her hair should be present, but not selected, and adding a temporary floor plane will also ground the character.

You will notice we haven't included the eyes in this section. That is simply because these will need to rotate, and any areas currently covered will be rendered black on the Occlusion Map. As you can imagine, if this was then baked into the eyes it would look strange when she looked around.

5. UV Snapshot

Before you move out of Maya there is one more map to generate, and that’s a UV Snapshot. This will basically take the UV layout of your model and export it as an image, which you can then use to guide you as you paint the textures.

Generating one is quite simple.

Select the model, so in this case Kila's body, and go to Window > UV Texture Editor. This is where you worked previously when you defined her UV`s.
Now go to Polygons > UV Snapshot.

Specify your target filename, type and size before clicking OK to generate your image.

Tip: Resist the urge to enable Anti-aliasing at this point as it could cause selection issues further down the line.

The result should be similar to the image below, a nice quick map which is also essential to creating your textures.

6. Quick Texture Combination

Now you have these key maps all you need to do is take them into Photoshop and combine them using the appropriate blending modes. The result will be a colored model, which also has an element of lighting to give it further depth and detail.

In Photoshop now, import your Diffuse, Occlusion and UV Maps bringing them all in as separate layers.
For each layer, delete the areas outside each UV shell. This can be accomplished easier as you have both the diffuse map, and the UV map to help with your selections.

Note: Your layers should be transparent, but for the purposes of the tutorial I have colored them pink.

Now hide the Occlusion Map for now and Invert the UV Map, setting its Blending Mode to Multiply. This will leave you with just the UV outline, allowing you to see and work easily beneath it.

Bring back the Occlusion Map now and set its Blending Mode to Soft Light, with an Opacity of around 50%. This will add the lighting information to the Diffuse map, while retaining the original tones.
Duplicate this map and this time set the Blending Mode to Multiply. This extra layer is used to deepen the shaded areas.

Play around with the layers and Blending Modes now to get the look you are after.

Tip: Try adjusting the hue and saturation of your occlusion maps to achieve different results on separate areas of Kila. Not all shaded areas are black or grey!

Also add the Normal Map to Kila to get a fuller view of how she is shaping up.

7. Flaming Pear

At this point you may be noticing an issue with your textures. While viewing them on the model you will see that the texture seams are quite noticeable, and may even be distracting.

Now, you could leave this step and fix the seams towards the end of the tutorial, which I urge you to also do, but it doesn't hurt to eliminate them early on, particularly if you are showing your progress to your managers or clients.

There are a number of ways to tackle texture seams but the easiest and best quality approach I have found comes in the form of a plugin by Flaming Pear called Solidify.

This plugin is available free and you can download it from here.

You will find it bundled with a series of other free plugins at the bottom of the page.

Once installed this will take the empty space in your layers and fill them for you. It does this by blending the surrounding pixels into the center of each space.

Let’s see this put into practice.

Once installed, select the Diffuse layer and go to Filter > Flaming Pear > Solidify A to fill the empty space.
Repeat the process now for both the Occlusion layers.

It may look strange, but these textures will now be future proof. What I mean by that is not only have you eliminated the seams, but if the textures are reduced the seams will remain fixed because of the pixels being blended rather than just extended.

8. Skin Tones

What you have now are the foundations for your texture pages. You have color, lighting and also surface detail. The problem is Kila still lacks any identity, and she still looks flat and lifeless.

It’s time to get your hands dirty and start to paint in some much needed details, and to begin let’s look at adding skin tones and variation.

Now, when I said “paint” what I actually meant was chop up and manipulate a few key photos. Using actual human reference is the best solution to creating skin textures. Yes, if you are after a more cartoon style then painting may suit your needs, but for Kila this will be easier and give us the look we are after.

The first step is to source some good, high quality anatomical reference.

You could opt for a simple internet search which may give you something to work with, but the better quality and higher the resolution the more superior the result.

For Kila I will be using one of a series of DVDs by Ballistic Publishing. This is called Ultimate 2 and features a model called Denise.

Another option is to go online and subscribe to a reference source like 3d.sk.

Either option is fine, so long as you have all the main views covered.

As illustrated below, take the hand photos and strip out anything which is redundant.
Position and scale the hands so they are roughly the same size as in the UV layout, and the pinkie fingers are opposite each other.
Now use the Liquify filter in Photoshop to gently nudge the hands pixels so they are closer together while also keeping within the UV guidelines.
At this stage bring in the front and rear arm photos and continue to use Liquify to smudge the images into place.
Finally softly delete the joining parts to blend them into each other.

At this stage this isn't a perfect result and you no doubt have a hideous seam under her arms, and around her fingers, but this is a step closer to the completed texture, and the seams can be eliminated easily later in the tutorial.

For now, continue the same process but this time add in the texture for her head, stomach and chest.

As you can see, she is a little rough around the edges, but the skin texture has made a dramatic improvement.

9. Clothing Details

The skin is looking much more lifelike and with all the exposed areas of Kila now textured, lets continue on and add more detail into her clothing.

Again, you are going to use some photographic reference to help you here, and in this section we will focus on her jeans initially to demonstrate the main techniques.

First you will need to find some images or photographs to use. As these are jeans you should look for a denim material, ideally a seamless one which will allow you to repeat it.
Also search out images featuring the studs, stitching, patterns and seams as these will help when adding the finer details.

Tip: If your budget will allow it, I would recommend investing in some of 3DTotal's Total Texture packs.

Using the main denim material, use the UV map to help cover the area of the jeans on the page, making sure the fabric grain is the correct size relative to the garment.

Tip: At this stage you may also need to adjust and deform the flow of the texture so it looks correct on the model. Maya has the ability to load PSD files, so save from Photoshop frequently and check how things look on your model as the texture is adjusted and applied.

If there are areas of the model where the fabric doesn't flow correctly use the Puppet Warp tool in Photoshop to easily bend and adjust the texture.

Once you are happy with the base fabric texture you then need to build in the details. Unfortunately the UV Map doesn't hold enough information to help guide you as you build the stitching into the seams and pockets, but the Normal Map does.

Import your current Normal Map as a New Layer.
Desaturate it so it becomes a greyscale image.
Now set its Blending Mode to Overlay and adjust its Opacity to around 50%.

You should now be able to see the main details held in the normal map over the top of your texture. If they aren't clear enough feel free to adjust the Brightness & Contrast, so they are more prominent.

Tip: You can always leave the desaturated Normal Map as part of the main texture if you feel it adds to the overall depth and quality of the image.

To add the seams and stitching, simply import a straight section of the seam and again use the Puppet Warp tool to bend it so it follows the seam which you can now see through the Normal Map.
Once the seams are in place you can then go further and add any more details, like the studs for example, until you are happy to move on.

You can now follow the same steps to add fabric details to her shirt, shoes and underwear.

10. Fixing Texture Seams & Adding Detail

You should be at the stage now where you are happy with the way things are looking, so it’s time to move on and address the texture seams as well as paint in some extra diffuse and normal map details.

To help with this we are going to switch applications and jump over to 3DCoat.

3DCoat is an application capable of so much, but for this section we are going to focus on its 3D texture painting tools. There are many options for interactively painting onto 3D models, but with 3DCoat you can also paint Normal Map enhancements onto a low polygon model much like you were sculpting. Plus you can use its Clone tools to help eliminate any seams.

Note: This section won`t be an in depth overview on how to use 3DCoat, instead we will focus on achieving the results we are aiming for by using this application. More in-depth tutorials can be found on the 3DCoat website.

Before you move into 3DCoat you need to make a few preparations.

Temporarily delete any extra geometry from Kila, which you won't need at this stage. So her hair, eyelashes, belt and MP3 player can go for now.
Export this stripped down model as an OBJ file.
Now reduce the Diffuse Map down to the basics, so remove the Ambient Occlusion maps, UV maps and also any extra details you may have added.

You need to strip down the texture, so you are focusing your efforts on the main areas which need attention. Working on the base layers of the texture will also allow you to keep your existing layers separate, and maintain maximum flexibility.

In this instance focus on her skin and clothing and then move on to paint in any extra details you may need.

Bring your OBJ and base texture into 3DCoat so you are ready to paint.
First you are going to use the Clone tools to reduce, or even remove the bad seams under her arms and around the fingers.
3DCoat's Clone tool works much the same as in Photoshop. Simply specify and area to clone from, and then begin gradually painting over the seams. Use a soft brush and a low Opacity to give you a more natural covering with no harsh edges.

Note: 3DCoat also works with a layer system similar to that in Photoshop, so make sure you are always working on separate layers.

Next focus on enhancing the Diffuse Map. Pay particular attention to Kila's face and hair, painting upon the base skin texture to enhance her eyes, lips and also making sure the hair matches the deep red color you need.

Once you are happy with the Diffuse enhancements, switch to working on the Normal Map.

This is where you can really improve the quality in Kila, particularly with her clothing. When building her initial high resolution model we opted to focus on the larger folds and creases. Now you have the opportunity to add in the finer details.

Go to town and paint in as much as you can, and remember to use reference images if you are at all unsure of how the clothing should look.

When you feel you are finished with this stage, Export your work as a PSD file, and bring your layers into Photoshop to add to your main texture files.
Reapply the enhanced textures to your model in Maya to then see the full results.

11. Enhancing Your Normal Map

We are now approaching the final stages of texturing Kila, but there is much more you can do. Previously you enhanced the Normal Map by painting directly onto the model, much like you would when sculpting, but now you can enhance it even more with a few simple steps.

We touched upon Height Maps earlier in the tutorial, opting to use Normal Maps instead. What you are going to do now is go back and create a series of Height Maps using the Diffuse texture you have already created.

These height maps can then be transformed into basic Normal Maps, which you will then blend with your main Normal Maps to add further surface details.

Open the main Diffuse texture page Photoshop file and quickly save a copy.
Now remove everything except the main Diffuse layers and any fabric details you added previously.
Also Delete the skin texture layers.
Fill the background with a 50% grey color. This will indicate the areas which are flat.
Finally, add a new Hue & Saturation Adjustment Layer, dropping the Saturation down to 0.

What you need to consider now is which areas of the texture will be recessed into the model, and which will stand out from it. Essentially, whiter areas will appear to sit on the surface, and darker details will be pushed into it.

Work through the following layers now adjusting each to get the heights you need.

Edit the denim fabric effect to give a slight grain to the surface.
Brighten up the denim seams to give added depth to them, bringing them out of the model.
Make the studs even brighter as these will need to appear as if they are on top of the seams.
You can also use this opportunity to add a pattern to the base of her trainers.

Once your Height Map is ready it’s time to convert it to a Normal Map and luckily there are lots of options which will allow you to do this. Below is a list of tools available. Some are basic, but free and the others offer more flexible options, but you will need to pay for them.

When used, these tools will simply read the information on your height map and attempt to convert it to a Normal Map.

Note: The results aren't a “true” Normal Map, so should only be used for basic surface details.

Once you have your resulting Normal Map its then time to blend it with your current Normal Map. Simply importing it as a New Layer and using the Overlay Blending Mode will work, but it’s not a step I would recommend. The problem with this approach is you will end up losing some information from your Blue, (depth) channel.

There are other approaches to blending, or mixing normal maps, and some of the tools listed above offer a quick, automated service.

A more complicated way involves separating the positive data and the negative data from the normal map, which will then allow you to blend them with your original and retain all your detail. Unfortunately explaining this would possibly add another large section to this tutorial, so to save time I have created a Photoshop Action which will do all the hard work for you.

You will find this in the project files (download at top of page.)

How you want to approach merging your maps is up to you, but this extra step will give you some much needed surface detail to your models.

12. Specular Map

You now have a set of completed Diffuse and Normal Maps giving Kila her color and surface details. You can go further and create many more maps, like an Emissive Map or even a basic Subsurface Scattering map to help the skin have the illusion of light bouncing beneath the surface.

For now we will look at just one more and that’s the Specular Map.

This is quite an important map as it will dictate which areas of Kila are shiny, and which are matte. By using a color version of this map you can also make each element of Kila feel more individual, almost like a different material.

At this stage, creating a Specular Map is quite simple, and is in many way similar to how you built your Height Map.

First remove the Occlusion Maps and any other lighting layer you have added. These will just confuse the specularity, so areas in shadow won`t be effected as they will be too dark.
Now focus on each layer remembering that the brighter is it, the shinier it will be.
As you are using a color map try and mimic real world specularity values. As an example, make the skin a pale blue rather than going for a brighter skin tone.

This map will take some experimentation to get looking right, but play around and see what affects you can achieve.

13. Eyes & Teeth

Kila is now fully textured and ready to be exported to a game engine. You may have noticed that her hair and eyes sneaked into the tutorial early on, so I thought it only fair to briefly talk about a few of the extra models and textures which are needed at this stage.

For her hair, you simply generate a base Diffuse Map with an Alpha Map. This extra greyscale channel is essentially a transparency map, with white being solid and black transparent. This is a great map to get the feathered effect at the end of each strip of hair plus a quick Normal Map also adds some much needed relief.

Note: You may notice that some of the hair strands aren't straight, and this is down to the low polygon nature of the hair model. To fix this you may need to add in a few more polygons, and tweak the UV`s slightly.

Obviously eyes are very important, but they are also a simple model created in exactly the same way you have the rest of Kila. The key is to try and copy the construction of a real human eye, with the cornea and iris separated to give it that extra level of depth and realism.

The other important additions are found inside her mouth. In future parts of this series, you will be exploring facial rigging and animation, so once Kila opens her mouth or smiles, you will need a set of teeth and also a tongue to be visible.

Conclusion

Well done! You have now reached the end of Part Four of the Game Character Creation Series and have a fully textured and game ready model at your disposal.

I fully admit that there are areas I can spot now which need more work, or adjusting, but you should have the basic techniques covered. With what you have learned so far you can continue on and create your own character, or indeed enhance Kila further.

So far in this series, you have explored high resolution organic modeling and also low polygon modeling. In addition to this you have also fully UV’d and textured your character.

What you have also done is considered how each stage was approached, and made allowances for model restrictions and character deformation for when you come to animate Kila in a future course.

Don`t worry though, the lessons don't end here and coming up we will explore how to rig Kila, set up facial animation and also investigate generating efficient Level of Detail models.