Low Poly Game Character Hair

This tutorial is dedicated to Polycount community.

1. Hairstyles
2. Game models approach
3. Example of hairstyle

3.1. Tools used
3.2. Painting the hair texture
3.3. Hair geometry
3.4. Using normal maps

4. Varga

This is not a step by step tutorial. I will nail down the main stages for creating hair for game characters using lots of images and some print-screens directly from the application used (Maya/Photoshop etc...). The idea for this tutorial came from the Polycount forums; for the Dominance War II contest I joined Polycount team and the folks there asked me if I can make a little tutorial about Varga's hair so here it is...

1. Hairstyles

This tutorial is about women's hair but the technique work for men as well; is just that I like long hair for women and my Dominance War II entry happened to be a chick.

I can write countless words about the importance of the hairstyle and the effect that the hairstyle adds to the personality of the character; we pay a lot (especially women) for a hairdo and we spend a lot of time styling our hair, or at least I am (every day in the morning I have to spend a few minutes to put some gel/foam in my hair, it does not matter if I will stay all day long at home and no one will see me, it's just that I am not feeling ok if I do not have my hair done) so I can not stress it enough that the hairdo will reflect the personality of the character ,that will add a strong touch to the mood.

Where do we find interesting hairstyles?

Well, there are a lot of sources of inspiration. First you have the internet where you can find tons of cool pictures, then fashion magazines, entertainment mags (playboy will do the trick) and a lot more... people you see on the street... for Varga's hair I was wandering around in a supermarket to buy some food and on a shelf I saw a box for Taft gel, ultra strong or something... and on the box there was a picture of a guy with his hairstyle in big clumps pointing in all directions that I liked a lot... it was before entering the Dominance War II competition... after I started drawing the concepts I went in the same supermarket searching the One box :) because didn't manage to find it on the internet... found it... took a picture and left.

Below there are a few variations for the hairstyle, some of them will be covered in this tutorial.

Back to menu.

2. Game model approach

There was a big problem concerning CG hair in the past but now there have been developed some solutions that will render realistic hair. For cinematic characters where the polygon count or texture size and numbers do not matter so much you have a lot of freedom and a lot of choices but when comes to game models you will always be limited to a number of polygons and number/size of the textures used. The solutions adopted for some time for more realistic hair is using textures with alpha (transparency). The problem is that the geometry mapped with transparency textures will add more computations to the render process and if you have some planes that will intersect and that have transparency textures that will be even worse; depending on the rendering engine there will be problems with the sorting algorithm (even at the version 8.5 Maya still has problems with transparency sorting when using high quality renderer in the view port... the default opengl renderer works fine... there is a polygon transparency sorting option that does the trick but when comes to highQ renderer problems will arise...) so geometry with transparency is tricky... some of the engines I did models for required that the geometry mapped with transparency textures will not self intersect.

There is some sort of confusion regarding the terms alpha and transparency ... alpha is a separate channel in Photoshop channels window but transparency is available for each of red, green blue channels and can not be edited directly in Photoshop but only using the paint/erase brushes on the red/green/blue channels; these are the right definitions for alpha/transparency that I know... but I see that the terms are used interchangeably so I will do the same.

In the past there were used (or maybe there are still used...) alpha test images (1bit alpha files) for transparency. Each pixel in the texture is either visible or invisible, no partial transparency is used; but now with the growing performance of the hardware the 8-bit transparency files are used. The 1bit transparency files will require fewer computations for displaying the geometry with alpha textures but the display quality will be poorer.

Back to menu.

3. Example of hairstyles

Below I will show you some examples for some of the hairstyles shown in the first picture. I have chosen a different hairstyle than the one Varga has because it would have been boring for me to use the same hairstyle to make this tutorial

The first hairdo (normal1) is the usual one... I will not spend so much time on it because you probably can find a lot of tutorials about it on the internet. In a few words you will map a texture like the one below on some geometry extruded from the skull like in the figure below and then tweak the shape of the hair by moving the vertices around.

For this tutorial I will go with a more interesting hairstyle.

Back to menu.

3.1. Tool Used

For the entire project I used Maya as 3d application, Photoshop for texture painting and Mudbox for high resolution. For the hair I used Maya paint effects a lot in the past... now i like to paint the hair in Photoshop, it gives me more freedom and variation using custom brushes and a little more time. You can customize some paint effects brushes in Maya to do the trick and I will show you later how to do it.

Back to menu.

3.2. Painting the hair texture

The most important thing when painting hair textures with alpha is the alpha channel (basically the transparency map). You should put more effort in painting the form and irregularities of hair strands and then concern about light and shadow in the diffuse texture.

I will nail down two approaches for painting the alpha for the hair:
- Maya paint effects
- Photoshop

' '

Maya paint effects

The first approach that I used a lot in the past and did the job well is using Maya paint effects. With a little effort and a few hours of work you can make some pretty good fx brushes for painting hair, I have a few custom ones done by myself but I will start from a basic one to show you the process.

This is Maya paint effects canvas:

Click on the brush presets icon and the visor will pop up. From the paint effects tab inside visor choose the "hair" folder and then the most saturated red hair there like in the picture below. You can play with other presets as you like but this one is best suited for what i need.

If you are using a Wacom tablet you can map the pen pressure to different attributes of the brush in the paint effects tool settings dialog.

This is how the default brush will look like (hit the alpha channel button shown in the paint effects canvas picture to work only with alpha).

Now to customize the brush hit Ctrl + b to open the Paint Effects Brush Settings dialog box. Here you can find all the parameters you will have to modify to customize the brush and there are plenty (I did not count them but I remember in a tutorial saying that there are more than a hundred parameters for paint effects brush settings ).You will not have to play with all of them ... but some are quite useful.

Pay attention to the brush profile parameters, especially Brush Width and Stamp Density.

Also under the Tubes section you will find Creation and there you have Tubes per step which modify the density of the tubes, the segments attribute (which you will have to increase if you have curly hair) (tip: you can enter a bigger value than the maxim allowed when you drag any slider by numerically entering the value in the field).

You can also modify some parameters in the Tubes->Behavior to alter the behavior of the brush.

In the Forces sections you can modify Path Follow so that the tubes will closely follow the path if you draw curved strokes and add randomness to the tubes using Random parameter.

Also play with the attributes found under Turbulence, Spiral and Bend ... they will add a lot of variation to the brush strokes.

Here are some results after playing with the parameters listed above:

All of these are done with a single brush stroke. Spend a few minutes playing with the parameters of the brush and you will end up with some cool brushes for painting the hair. Keep in mind to increase the number of segments located in Tubes->Creation if the strands of hair look like little straight lines connected and also use Path follow located in Tubes->Behavior->Forces if you want the tubes to follow the path of your stroke. Experiment a lot until you find something you are pleased with and then save the canvas as a file type that supports alpha channel and go to Photoshop for further tweaking.

That is all for painting the transparency map using Maya paint effects ... you can paint the diffuse texture at the same time; among those one hundred parameters for the brush settings there are a lot used for the color of the stroke, you can modify the colors, add variations to hue, saturation ... even map textures to the strokes in different modes ... but I will leave that for another time

As a final tip: use large canvas sizes for painting in Maya... if the hair texture is 512 square you may double the resolution in Maya (or go with even for higher resolutions ); you can scale down the texture in Photoshop to the size required... it is better to have more detail than the lack of detail. After scaling down the image in Photoshop, do not forget to sharpen the transparency map; I use un-sharp mask with the following settings: .4 .5 for the radius and around 100 for the amount... use the preview option to get a preview of the filter and analyze the result.

Painting the hair in Photoshop

The second approach for painting the hair texture is using Photoshop. With some simple custom brushes and a little more time you can achieve even better results than using Maya. The advantage is that you have full control over the strokes and you can shape the hair in whatever form you like... in Maya paint effects you have a ton of parameters to alter the stroke but it remains a procedural generated stroke.

There are a lot of good tutorials on the internet about painting digital hair (a very good one is here) so I will not insist on this subject more than is necessary.

These are the basic brushes I use:
1. Spackled brush for blocking in the shape
2. Detail brush
3. Single pixel brush for painting individual strands of hair
4. Default Photoshop round brush for rough block in.

Now all you have to do is spend some time drawing some clumps of hair.

Below are a few quick examples.

After the transparency map is finished you can paint the color map (a good idea is to keep the transparency map in the alpha channel of the diffuse texture for the hair).

You can paint over the transparency map, overlay textures of real hair or anything else (dirt, rust textures) to give more variations to the diffuse. Keep in mind to start with a flat color for the entire texture and add details on top; you should avoid the first approach in the picture bellow and go with the second one... keep the color around the edges of the hair the same as the hair color... otherwise it will look bad.

Back to menu.

3.3. Hair geometry

Once the textures are finished go back to the 3d application and start modeling the geo for the hair.

Pay attention to the outline of the hairstyle, the silhouette.

Start with simple geometry and block in the main shape of the hair... you will add more tessellations later if it will be necessary but for start keep it simple. When creating the geometry for the hair I usually start with a clump of hair and then duplicate it and move it around... I repeat the process several times until I will cover the entire head then start tweaking the geometry to better suit the hairstyle I want.

For volume hairstyles try not to model the geometry for the hair like in the picture below because it will require a lot more planes.

Instead aim for something like the next image where the planes with alpha are almost perpendicular to the head surface so that they will add a lot of volume to the hair. Now with some patience you will end repeating the process over and over again duplicating this clump of hair and moving it around to populate the hair. Spend some time moving and scaling the planes with alpha, move vertices around or the UV's if stretching in the texture will occur; give as much variation as you can, with one clump of hair you can make some neat hairstyles.

You can use this method for dreadlock 1 and chaotic hairstyles (Varga's hair was done in a similar manner... there is a chapter at the end of this tutorial showing Varga's hairdo and textures).

When tweaking I use the following trick: Maya has a lighting option for using all the lights in the scene in rendering the view port (keyboard shortcut 7) if you do not have any light in the scene then all the geometry will render black but still have the transparency working; be sure to have a light background (for other 3d apps I am sure there is something similar or you can create a material with color and diffuse black but still displaying the transparency map).With this option active you will pay attention only at the outline of the hair... keep moving around the hair and adjusting the vertices until you are satisfied, track, dolly, zoom and move around the head to see it from all sides.

For a quick afro hairstyle the texture will look something like this...

...and the geo something like this.

All you have to do is pay more attention to the outline of the hair so that you can create more volume with few geometry. The geometry for the hairstyle above has around 300 triangles.

In the image above there are some angles where you can see the planes ... if you increase the numbers of triangles and add more variations to the planes the effect will be less visible, this was a quick test to show you the workflow.

You can make the dreadlock2 hairdo in the same manner as the one above.

Back to menu

3.4. Using normal maps

I will start by showing you the difference between the hair with and without normal map
(left with normal map, right without).

Both versions have diffuse, transparency and specular map but the one in the right looks too flat. By using a proper normal map you will add a lot of variation in the surface direction of the hair and it will catch more light through specularity resulting in richer volumes.

Obviously the version with normal map looks better; the normal map adds more volume and realism to the hair. I have seen a lot of people doing normal map for hair by just using Nvidia normal map filter on the diffuse pass or actually sculpting the individual strands of hair in ZBrush/Mudbox; that will not help too much (the first example in the image below).

A better idea is to add big volumes in the normal map (the second example in the image above).

Something like in the picture below will work better. Just calculate a normal map between a plane and a blobby surface like the one below and overlay it in Photoshop in the normal map texture for the hair. This way you will have more variation in the surface direction and with a proper specular and transparency map a simple plane will look much better.

That pretty much cover all I wanted to include in this tutorial.

In the next paragraph I will show you the textures and geometry I used for Varga.

Back to menu.

4. Varga

Here is the final version of the hair.

Click images to enlarge.

The final geo has around 800 triangles and it's a mess.

These are the textures for the hair geometry (Diffuse, Normals, Specular in this order):

And below are the textures for the head; remember to treat the hair on the head geometry in the same way regarding color/specular (same colors/brightness for the diffuse and specular textures). If the head geo will be covered by the alpha planes this does not mean that you will have to skip detailing the head geo... there will be places where the hair geo will not cover entirely the head geo so the details on the head will be visible.




And at the end a few poses with Varga end her pet.

Click images to enlarge.

Click images to enlarge.

I hope you enjoyed this tutorial and that you did find something useful by wasting your time browsing it

Back to menu

www.paultosca.com © paul tosca 2006-2007

Fetching comments...

Post a comment