| 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...
|
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. |
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.
|
| 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.
| 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. |
| 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 |
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.
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
|
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.
|
Here is the final version of the hair.
|
|
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.
Diffuse
|
Normals.
And at the end a few poses with Varga end her pet.
|
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
|
|
