Voluminous Hair: Tips and Tricks
Jeff Hindsbøl Hansen talked about the hair for game production studied during the CGMA course Hair Creation for Games led by Johan Lithvall.
Introduction
My name is Jeff Hindsbøl Hansen, and I am 3D Artist currently living and working in Copenhagen, Denmark.
I actually started with digital art about 10 years ago at a technical trade school, where I learned basic 3D, how to do websites, and work with flash. I found the mix of Technical challenges and the creativity of art that 3D art brings to the table was something I wanted to pursue as a bigger part of my education, so I changed to one of the major 3D schools in Denmark.
I have spent most of my career working with animated TV-shows for kids and commercials. Recently, I’ve been making more Game art related stuff and I plan to keep on doing more Real-time work as I find it very rewarding.
CGMA Course: Goals
Game hair was one of those things that always seemed a mystery when it came to making it look good. I had a few goes at it, but I never got that proper hair feeling I was aiming for. So I wanted proper insight into the techniques used throughout a beautiful game like Horizon Zero Dawn. I also thought that in general, a lot of hair you see has that helmet feel to it, and being great at making game-ready good-looking hair is an attractive niche to have conquered.
About Linear Workflow
In the ArtStation post, I’ve mentioned that the project was created with a linear workflow. What I meant when I talked about it is just how I experienced the method. For me, it was a lot like when you build a face or a body.
I started the work from the bottom or innermost layers and made sure I basically have the hairstyle in place with the big, blocky and completely opaque hair planes.
When you’ve got the first layer set, you can start to get the more transparent and lusher hair cards on top and get a more intertwined look. Just like the way you build a face: you will build it all up together with the primary shapes first and then move on to the secondary shapes and so on.
Before this course, I had a hard time doing this as I wanted the first layer to actually look like hair when in reality the first layer looks more or less terrible, and you just have to deal with that and try to visualize the next layer on top.
Hair Workflow
As with most art, it always starts with reference. I looked at so many different hairstyles before I ended up choosing one. Vikings, in particular, have a lot of cool female hairstyles to study.
I wanted to challenge myself and to do something that I was unsure about and which required finesse. I also wanted it to be very lush and flowy which can be hard to achieve with cards. Plus, I looking for a smarter way to do braids, which is why I added one in for this hairstyle.
These two here ended up being the main references, though I had a board with around 15 or so. I tried to look for the amount of detail and the depth of the hair that I wanted to recreate in the cards.
You can see here how some of the depth in the thickness of the clumps is marked, and that is something I wanted to have in the cards so that the detail level and depth matched.
Johan talked about drawing out your hair cards in Photoshop as a quick sketch to help you visualize and think through what you want to end up creating when you go into 3D. I couldn’t understate how valuable that little step would be to me. It forced me to think out how I wanted it to look instead of going with the flow of what XGen gave me when I stepped into it.
Mine looked like this. It might not be much (and I would probably spend a little extra time here in general), but it makes the next few steps a lot easier.
I made 2 cards of each transparency level so you see it going from two cards that are completely opaque and all the way down to a single hair strand. In theory, one of each should be enough, but two helps add a bit more variety if you have the budget for it, so it is not just the same hair card repeated over the entire hair.
I left out some space in case I needed an extra card, or it can be for eyebrows, eyelashes or beard cards.
Textures & Clumps in XGen
XGen is a great tool for hair generation, it gives you a lot to work with its modifiers and parameters. Yet it has some bugs when it comes to the rotation of the guides you create to control the hair, unfortunately, which can be a pain to deal with. Johan has a great way around that though, and it happens to be one of the reasons why he talks about drawing out that sketch of your cards as well.
What he does is use it as a texture on a plane and then draw out curves matching the hair in the sketch. It gives you a lot of control over your final result and normal curves have no issues with rotating.
After drawing out the curves you can convert them into guides inside of your XGen description, and your hair should follow your curves (now guides) as you expected it to.
Once all the guides are in place, you start using the modifier stack. I usually end up with 3 clumping modifiers at the end of it.
Depending on the number of curves you made, for the first layer you can either use your curves as a clump guide or generate them with a low value to get fewer but big clumps, and then, in the second and third use, higher and higher values to get smaller subclumps.
I also used the coil, cut and noise modifier to achieve my results. In XGen, there are 2 expressions that I use a lot: the rand (x , y) and stray () ? x : y. Stray uses your set stray percentage to affect a part of your description with the modifier, and rand randomly distributes between x and y. If you are unaware of these you should definitely look them up as they can help you out a lot.
Baking Hair Cards: xGen & Arnold
The baking process is actually fairly straightforward, and mostly like you would usually go about it.
There is a little bit of planning to it though because of the ID map. First, I export all the curves out of XGen and into a mel file and then reimport the curves. I use a free script called simplePipe to make the curves into geometry.
This geometry can be used for all the bakes except the ID map. To get the geometry for the ID map I use a script that can randomly select a percentage of whatever you already have selected. What I want to end up with is 5 files exported with roughly the same amount of hair strands in them.
I make 5 different images each just a solid color of either black, 25% grey, 50% grey, 75% grey or white.
Inside of xNormal, I add each image as a base texture to a different export from the hairs from earlier and that should give you a result like this.
For the root map, you change the base texture to a gradient from black at the root to white just a bit further down. It should end up looking something like this.
I have used Arnold for a more recent project as well, and it comes with its own pros and cons. I think it mostly comes down to taste, though normal maps with Arnold seem to come out cleaner. The shader I used in Unreal doesn’t use a normal map, so depending on your engine that might be irrelevant.
I am currently working on a new workflow using a mixture of this technique and Arnold, where I use some utility nodes instead of images to make the different maps. I might write a small breakdown of that workflow at a later time.
Hair Placement
The time spent on hair placement wasn’t too bad, but obviously placing a lot of hairs generally is somewhat time-consuming. I am not exactly sure how much time I used on this one since I went back and forth with it a few times as my understanding of the process grew and I even ended up starting over halfway through the project.
The hair placement workflow here is super cool though, and not something I’ve stumbled upon elsewhere. I think it does speed up the process a bit.
The first part of the workflow centers around creating hair clusters to use for placement. This is done by taking 3-5 hair cards and placing them together in a tent-like shape to add more volume to the hair no matter the angle you look at it from. Most of them are just 3 cards where the one at the base of it is the most opaque, and the 2 on top are slightly more transparent.
Here are a few of those that I created:
Next, I place the cluster where I want it on the head, and I create a few deformers for it to make the deformation nice and smooth and avoid creating problems in the texture.
First, I add a Twist Deformer at the bottom of the stack, so no matter how I bend the hair cards I can always twist them around like I want to and have them facing out towards the direction I want.
Next, I might add a sine if I want waviness to the hair, otherwise, I just use a lot of bend deformers to fit it into the shape I want. Then at the end, I do a little bit of soft selected movement or rotation if needed.
You just use this method from the inside out so you start with the blocking layer until you have a base of your entire hair. Then you move on to the second and third layer with less and less opaqueness, and increasingly intertwined or flowy hair cards until you get to place pretty much single hairs for a flyaway layer.
Optimization
One of the ways the hair is optimized is the fact that the bottom layer of hair is 100 opaque. This helps the engine avoid dealing with too many layers of transparency, and helps the rendering be a lot faster and less taxing.
This particular hair was not really stress-tested in a real game environment, however, after this class, I have used this exact technique for real projects and I can say that so far it has been running smoothly even on pretty low specs.
Hair for Game Peculiarities
I think the most obvious peculiarity is that when you have to place and use hair cards, instead of simulating, you have to deliberately move everything into its particular place. For me, that means that the process is a bit more artistic since I am in full control of the outcome at every level. It also leaves you with a bigger risk of placing something where it doesn’t fit, which is one of the reasons I ended up redoing areas.
Another thing about hair cards is that you might end up with areas where you clearly can tell it is a card. It becomes much more obvious with lighting as well. I tried to get around that as much as I could with this hairstyle, but I couldn’t quite dodge it. I am more aware of it now.
Summing up, learning about placement and making the cards is definitely the biggest difference in my opinion between the hair production for games and non-game hair. I got to say though that I am very impressed by what the Paragon hair shader that I used for my project was capable of with so few and simple maps.
Feedback
All in all, this has been one of the most useful courses I have been attended. It was an area I wanted to get into my kit and I feel like I got it now. I have also been contacted through Artstation about the work I have made during the course and hired for projects because of it.
I always look out for courses I think would be cool, fun, and informative, and CGMA has a lot of great ones with some amazing teachers. So, I will definitely take more whenever I can fit it in.
