Varga low poly 3d Hair Tutorial

8/13/2019 Varga low poly 3d Hair Tutorial

1/45

a Hair Tutorial

//www.paultosca.com/varga_hair.html#tools[3/13/2009 5:48:25 PM]

Low poly game character hair

This tutorial is dedicated to Polycount community.


2/45

a Hair Tutorial



3/45

a Hair Tutorial


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

You could also check the second part of this tutorial regarding normal mapping(workflow used for 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 printscreens 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 hairsyles?

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 onthe 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.
http://www.paultosca.com/makingofvarga.htmlhttp://www.paultosca.com/makingofvarga.html


4/45


5/45

a Hair Tutorial


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 trerms alfa and transparency ... alfa 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 ...) alfa 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 less

computations for displaying the geometry with alfa textures but the display quality will be poorer.

Back to menu

3.Example of hairstyle

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.


6/45

a Hair Tutorial


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

Back to menu

3.1.Tools used

For the entire project i used maya as 3d application , photoshop for texture painting and mudbox for high rez. 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:


7/45

a Hair Tutorial


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.


8/45

a Hair Tutorial


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.


9/45

a Hair Tutorial


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).


10/45

a Hair Tutorial


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 params for paint effects brush settings ) .You will

not have to play with all of them ... but some are quite usefull.

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 allowd when you drag any slider by numerically entering the value in the field).

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


11/45

a Hair Tutorial


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:


12/45

a Hair Tutorial



13/45

a Hair Tutorial


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->Behaviour->Forces if you want the tubes to follow the path of your stroke.Experiment a lot untill

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 tewaking.

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 thestroke , 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 highers 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 unsharp 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.


14/45

a Hair Tutorial


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 paiting 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 ps round brush for rough block in
http://www.furiae.com/popup.php?text=hairtutorialhttp://www.furiae.com/popup.php?text=hairtutorial


15/45

a Hair Tutorial



16/45

a Hair Tutorial


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

Below are a few quick examples.


17/45

a Hair Tutorial


After the transparency map is finished you can paint the color map(a good idea is to keep the transparency map in

the alpha cnannel 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 ;


18/45


19/45

a Hair Tutorial


Start with simple geometry and block in the main shape of the hair ... you will add more tesselations 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 untill 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.


20/45


21/45

a Hair Tutorial


When tweaking i use the followint trick : maya has a lighting option for using all the ligts in the scene in rendering

the viewport (keybord 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


22/45

a Hair Tutorial


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 untill you are satisfyed ,track, dolly ,zoom and move around the head to see it from all sides.


23/45

a Hair Tutorial


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

The quick process used for the geometry:


24/45

a Hair Tutorial



25/45

a Hair Tutorial


After the uv-maping will be done you will have to tweak the geometry to get the shape you want ( could youse

deformers ,lattice, hand tweaking of vertices ); don't forget to watch the uvs also ... after heavy tweaking the

texture might be stretched so you will have to readjust uvs.


26/45

a Hair Tutorial


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.


27/45

a Hair Tutorial


In the image above there are some angles where you can see the planes ... if you increase the numbers of trianglesand 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 differecne between the hair with and without normal map.

(left with nmap , 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.


28/45

a Hair Tutorial


Obviously the version with normal map looks better , the normal map adds more volume and realism to the hair. I


29/45

a Hair Tutorial


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).


30/45

a Hair Tutorial



31/45

a Hair Tutorial


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.


32/45


33/45

a Hair Tutorial



34/45

a Hair Tutorial


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


35/45


36/45

a Hair Tutorial


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


37/45

a Hair Tutorial


normals


38/45

a Hair Tutorial


specular

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


39/45

a Hair Tutorial



40/45

a Hair Tutorial



41/45

a Hair Tutorial



42/45

a Hair Tutorial



43/45

a Hair Tutorial



44/45

a Hair Tutorial


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

You could also check the second part of this tutorial regarding normal mapping ( workflow used for Varga )
http://www.paultosca.com/makingofvarga.htmlhttp://www.paultosca.com/makingofvarga.html


45/45

a Hair Tutorial

Back to menu

www.paultosca.com paul tosca 2009

Documents

Varga low poly 3d Hair Tutorial