17 June 2021

Curly Hair – Character Breakdown – Thomas Sykutera

thomas-sykutera-flash-front

Introduction

Hi, my name is Thomas and I‘m glad to see you found here. I am a Junior Character Artist at Guerrilla Games, and on the side, I like to create real-time hair. In this article, I want to show you the creation of my latest personal project, from beginning to end. Every personal project should start with a goal. In my case, I wanted to create curly hair, because firstly, when I saw the photo (which became my main reference), I was super stunned by how great the haircut was. But honestly, I wanted to create curly hair because it looked very challenging and because it is, generally speaking, quite underrepresented in video games.

For this project, I used the following software packages:
PureRef: To create my mood board
Zbrush: For the creation of the head sculpt (which I started from a scan i bought at the ten24 store.
Maya (with a plugin for Xgen called Coiffure): To create the hair textures
3dsMax: For placing the hair cards
Substance Painter: To texture the bust
Marvelous Designer: For the creation of the sweater
Unreal Engine 4: To finally present the character

Alright, let‘s get started!

 

References – Hair

image-000-1

This was my initial moodboard (after a lot of cleanup). My general strategy is: Gather as many images as possible and then organize your images by their purpose/category (in my case: Silhouette, Short Curls, Longer Curls, and so on). Finally, clean up your moodboard by removing any duplicate images – these can be images that basically display the same kind of information.

Side note: Sometimes, it can be tough to find coherent references of one person. In case you‘re looking for a celebrity, I can really recommend gettyimages.com. They have a super big collection of images, and you often find many pictures from different angles taken at the same event.

The reference stage is the most important stage – just in this stage alone I learned so much about curly hair; how the hair (that make up each curl) flows and clumps and how the curls are layered.

image-002_comp-scaled

Spending the extra time analyzing and painting over the images yourself will make a difference and helped me immensely when creating the hair textures inside Maya as well as when placing the hair cards in 3ds max. First, let‘s quickly look at the textures.

Hair Textures

For the textures I used Coiffure, which is a plugin that basically makes your life using Xgen a lot easier. It also lets you set up your materials and quickly render your maps in an organized manner. If you want more info on Coiffure, there‘s a lot of youtube content on it done by Florian Croquet, the creator of it (plugin found here – https://gumroad.com/l/GcyWU).

 

image-006

The texture step is a very iterative one, I think I went over 30 different iterations before I found what looked best to me. For everyone‘s sake, let‘s skip to the final version, and let me quickly explain to you what my goal for these textures was.

From left to right: The purpose of the first two alpha strands is to give volume. The next three strands were there to add breakup and the last strand would help to add additional single, more clumped strands of breakup and flyaway hair. The hair on the bottom right was just used to create some very short curls along the back of the neck.

image-008

As you can see, the textures themselves are not looking absolutely stunning or amazing, but that is more often than not necessary for the final look of it. Let‘s jump into 3dsMax and see how these textures were used.

Hair card Modelling

The hair cards are fully created and placed in 3dsmax. The reason for choosing 3dsmax is the PathDeform modifier, as it gives me the freedom to control cards via curves – move, rotate and shift are all great ways to author your cards without overly stretching your textures! My workflow in 3dsmax is divided into a few steps. Before starting with creating the clumps, I lay out each hair card with its texture on the side.

image-010

As you can see, I also pinch them at the bottom, by pulling out the vertical edge loop that runs down the middle of the cards. This helps to give a bit of three-dimensionality already.

image-013

Now we are ready to create variations of clumps – it‘s important to use the different hair textures according to their purpose, which I talked about in the Hair Texture part. Below you can see an extract of clumps that I created.

image-012

These clumps are, just like the hair textures, used for specific purposes. The thicker clumps are used to cover the majority of the scalp and hair volumes. Thinner clumps are used to create variation and add a layer of breakup. Flyaway hair is used to create even more breakup, those single hairs breaking off the volumes help a lot to make the hair feel less like cards. The hairline hair is self-explanatory, it‘s just there to blend the hair better into the scalp. The clumps shown above are not for all the clumps used, I‘ve created around 6 thick and thin clump versions and 5 flyaway versions.

Here‘s a breakdown of the cards I used for the first of the clumps above.

This thicker clump is created of 11 cards. You can see they have specific names, these are related to the number of the texture (_01) and the number of the card using this texture (_009). Because I duplicate cards and their curves all the time, this naming convention is absolutely essential to keep an overview in your outliner. You can see, each card has a few modifiers, mostly related to tapering the card, adding edge loops, and tweaking uv‘s.

image-017_comp-scaled

To figure out if the strand is “successful“, it all comes down to looking at it on the curve, seeing if it deforms the way you want to and if it looks good. If it doesn‘t – back to building a new clump of cards. Looking at your references, how the hair clumps are looking there, and then trying again. Don‘t worry, this stage doesn‘t come easy and can be a bit frustrating, but the patience will be worth it. What generally helps me is to make sure that a clump looks natural from all angles, such as this one:

image-021

Again I‘m trying to follow the idea that is represented in the references. This is the biggest goal when creating all the clumps. And of course, try to pick differently-looking curls from your references so that you have a clear visual idea of what kind of clumps you want to create with your cards. I already thought about this when I was creating the textures of the hair. Planning this out beforehand will help you down the line not running into any surprises.

image-029_comp-scaled

And here‘s an example of how most (if not all) of my strands are build up (image 1). I use an EditPoly to allow the hair to look smoother since I used a strongly bending curve for this strand (image 2). The FFD was used to widen the strand at the root (image 3). This helps to cover up the scalp without using too much hair – but it moreover also lines up with how curly hair actually clumps together, as you can see in the reference below.

image-022_comp-scaled

Lastly, the PathDeform itself. In this case, I just shortened the strand a bit and shifted it from the beginning of the curve. I didn‘t have to twist the cards around the curve since I already spend the time manually shaping the curve to my liking.

image-031

What helped me a lot to make sure that I keep up variation across the entire haircut, I colored each clump variation in a unique grid color. Then I simply went into wireframe mode and made sure that adjacent clumps would have different colors (be different variants).

image-033

The hardest and most time-consuming step was the base layer, mostly because of the “empty canvas“ syndrome – figuring out where the hair should be placed. I think the best way is to look at your reference and loosely place it where you think it should go – by loosely I mean acting without overthinking. Here you can see the final placement of the Base Layer with curves and cards:

image-035_comp-scaled

You can see there‘s quite a lot of scalp uncovered, but that‘s okay, as we want to have space left for the breakup layer. It‘s also quite important to note, that we want some negative space between curls. This is super important to achieve so that the curls feel fluffy and like they can hold up their own volume- like it‘s visible in the references.

image-039_comp-scaled

Once you have enough hair placed all around the head, you can start moving them around a bit, and narrow down their almost-final placement. During the later stages, their positions will still change a little bit, mainly because you see things with fresher eyes again, and also because you will find potential for improvements while adding breakup and/or flyaway strands.

image-042_comp-scaled

As a little summary, here‘s a progressive lineup, showing all hair stages next to each other.

image-041

Sculpting the Head

The head was started from a scan that I bought off of 3dscanstore, to save some time. However, that scan received a big sculpt over as I decided to bring the face closer to Aiyana Lewis, whose hair inspired me in the first place. Again, references are key, so a lot of time was spent gathering good images.

image-046
image-048

Eyebrows, Eyelashes, and Peach Fuzz

For the eyebrows and eyelashes, I decided to use Xgen and play with the alembic hair inside Unreal Engine. There are some great tutorials out there, so I won‘t go too much into detail on the creation of the facial hair. The tutorial I followed (which is by far my favorite) is this one made by Hadi Karimi: https://www.youtube.com/watch?v=RkpJ4LGJrf8&t=1700s. For each, I created a new description and I kept them all under one collection, to keep things organized. Here are the modifiers I used for the brows, lashes, and peach fuzz.

image-065
image-051

To get the eyebrows closer to the reference, I used a region map. This helped me a lot to break up the hair into different directions, which is similar to what is happening in the reference.

image-053_comp-scaled

As pointed out by Hadi Karimi, it is quite handy to split the eyelashes into two descriptions.

image-067_comp-scaled

And lastly the peachfuzz.

image-065
image-069

Creating the Sweater

The sweater was fully created in Marvelous Designer, with little to no tweaks inside Zbrush. I wanted to have a simple sweater, and direct the main attention to the hair and face.

image-071

The work done in marvelous designer was nothing fancy, I freshened up my knowledge by watching various MD tutorials on Youtube. Two channels I can wholeheartedly recommend are Daniel (https://www.youtube.com/channel/UCT_Y4okpd6G0DUaNl1bT1sw) and Lori Griffiths (https://www.youtube.com/channel/UC8TvrdenlitmEGs2tjnalsA).

Below is the inspirational reference I used for this sweater:

image-073

For the fuzz on the sweater, I also used Xgen. This time I used randomly generated primitives driven by expressions.

image-077_comp-scaled

All credits for this workflow go to Bianchini95’s tutorial, it was very useful and you can check out his original post on his approach on Instagram: https://www.instagram.com/p/CLZRjsqDZEO/

 

Texturing the Head

image-085_comp-scaled

As a base, I used a texture that I bought from textures.xyz, as it was already going into the direction of my desired look (in case you’re interested, it’s this one: https://texturing.xyz/collections/multichannel-faces/products/female-20s-multichannel-face-43?variant=13609427238986). Secondly, I‘ll re-use the same scan texture on a new layer and fix up any texture stretching or seams. I repeat this step until all seams and stretches are gone and the texture looks as if it naturally fits on the head. Then, I‘ll start to tweak the skin tone by using an HSL filter, this is a super quick step and brings the skin a lot closer already. I then alter the texture to my likings, mostly focussing on the red, yellow, and blue areas of the face. There are basic references around the internet, that you
can follow, like these:

image-081_comp-scaled

For a lot more information on what I did, I would really recommend watching Magdalena Dadela‘s presentation on skin texturing in Painter, in case you have not seen it yet. I used this one multiple times for practicing skin texturing and it‘s covering a great range of information: https://www.youtube.com/watch?v=9ywhVkZBtq8&t=1487s

I always try to keep my files organized, so all of the channels are in their own folders

image-088

For all the other maps, such as Roughness and Spec, I didn‘t do anything out of the ordinary, so I will rather focus on the Roughness Zone map.  I was using Saurabh‘s UE4 skin shader, I ended up baking out these maps: Color/Albedo, AO, Height, Normal, Roughness Zone, Specular. The Roughness Zones map is basically an ID map for the different roughness zones of the head, in my case being forehead, nose, cheeks, and mouth. Below is a screenshot of what mine looked like:

image-090

Bringing everything into UE4

My version for this project was 4.26. To bring everything into Unreal Engine, I started from a brand new level. To understand how to import the head, I looked at how the Digital Mike was imported and used the same approach. While studying the Digital Mike, I also looked at all the meshes that were created to blend the eyeballs into the head (cornea, tear line, caruncle blend mesh, and the occlusion mesh between the eyelids and eyeball) and created my own, following the approach of Mike. For all the eye meshes, I simply reused the shaders from the Digital Mike scene.

image-092

For the skin, I used Saurabh’s shader. If you want to know exactly it works in detail, I’d like to refer you to Saurabh’s article over at texturing.xyz. It’s already very detailed and basically, I followed that completely: https://texturing.xyz/pages/saurabh-jethani-creating-realistic-skin-in-ue4

To show you how I used the shader, you can find my settings below.

image-094
image-096
image-098
image-100

That’s it for the skin – Let’s talk about the hair shader settings that I used: Brightness controls the amount of light that the hair can absorb, meaning how bright the hair can get. Since I wanted dark brown hair, I kept this value pretty low. EdgeMaskContrast and EdgeMaskMin decide how many of the hair cards you will see when the hair cards are facing away from the camera angle. The closer the EdgeMaskMin value is to 1, the more you will see of the card when it’s facing away from the camera. I am a fan of using this
(though below 1) as it helps to maintain volume where cards are usually the weakest – when facing away from the camera.

image-102

MipBias – The idea of it is to ensure that the texture resolution stays as high as possible over distance. This value should generally be left at default, but I found that I had the best-looking results at -1.

Roughness defines how a surface reacts to light, if it fully reflects it, or if it fully diffuses it. The roughness of hair is around 0.4, and for the look, I was after, I found this value gave me good results.

Scatter describes how far the light should travel into the hair and reveal the 2nd specular lobe. Looking at my references, I wanted to achieve a very dark brown haircut (A), that would – under strong rim light – reveal a slightly brighter brown tone (B).

image-104

Below is the final result captured in Unreal Engine.

image-106

Next up, let’s look at how I brought all the xgen hair into Unreal Engine:

To bring the eyebrows, eyelashes, peach fuzz, and sweater fuzz into Unreal, I converted the Xgen descriptions to interactive grooms, and then go to Generate → Cache → Export Cache.

image-108_comp-scaled

This will export the Xgen description as an alembic file (.abc), which can then be simply dragged and dropped into Unreal Engine! Unreal automatically creates a shader for your new abc file and assigns it to it. I edited these a bit, depending on what I wanted to use them for. For instance, for the sweater fuzz, I changed the roughness, so that it’s less reflective than hair. I also changed the color to blend better with the sweater itself.

image-110

When importing .abc files into Unreal, you can also change all the hair shapes of each file.

I wanted the sweater fuzz to be thicker than hair, so I adjusted the width (for comparison, the peach fuzz on her face has a thickness of 0.004).

image-112

For the Sweater Material

One important setting to note is the “Scatter Scene Lighting”. It allows the hair to get lit by light that is reflected from nearby surfaces. Therefore, I recommend you turn this on for peachfuzz. For the Sweater Material:
The sweater material was taken from RonanMahonArt. He’s done amazing work on these materials and I can only recommend you to check them out. There’s a youtube video where the artist goes over all the settings that you can play with inside Unreal to adjust the material to your liking: https://www.youtube.com/watch?v=3onVrSbxbgY

image-114

UE4 Lighting & Render Settings

My setup, with only meshes visible, looks like this:

image-118

Now, I hacked something together to render turntables. I placed a CameraRig_Crane right on top of my character so that the crane‘s rotation axis is in the character‘s center. I then attached a
camera to the end of the arm of the CameraRig_Crane. Then, I simply animated the CameraRig_Crane to rotate, and voi là – we got a turntable.

image-116

Let’s continue with the lighting itself. The first step for me was to add a skylight. I don’t use it for anything major, but I wanted to have one in to add subtle reflections. Therefore I set it to a very low intensity. Also, make sure it’s set to “movable” instead of static or dynamic.

image-120

First of all, again I had an inspiration image that I used as a reference. I picked it because I liked the dramatic lighting, but also because the pose was similar.

image-122

So, I directed my first light at the wall, to ensure that I offset my character from the background and create my character’s silhouette.

image-132_comp-scaled

Then I placed a key light. This helped to shape the first shadows and highlighted her right side. It’s important to play with all the settings to see what they do, but one of the major settings I always use is the transmission. It allows your light to transmit through surfaces that use Subsurface Scattering.

image-135_comp-scaled

I ended up duplicating this keylight, to achieve a smoother shadow on the features of the face, especially the shadow cast by the nose and lips. This is something I got from the Meet Mike scene. The idea behind it is this: If you want to smooth your shadows, you have to duplicate the key lights as much as you want and divide the light intensity by the number of lights you use. That way, you end up with the same light intensity, but a smoother shadow.

image-141_comp-scaled

Now that I had the main light shapes in place, I added a strong key/rim light, to place the highlights that I see in the reference. Since I didn’t change the checkbox light settings anymore, I’ll spare you those and only share the settings I changed compared to the lights above.

image-142_comp-scaled

Next, I started to add fill lights, to lighten up the dark shadows a bit. In this case, I wanted to play with area lights.

Then I added one more rim light to give the hair some highlight. I know this wasn’t in the reference, but the hair was most important to me so I wanted it to have a bit more attention. It’s good to understand and follow your reference, but also important to add your own touch to it.

image-156_comp-scaled

As you might have noticed from the renders, there is another lighting setup. For the sake of this tutorial’s length, I’ll refrain from going into that. Let’s continue to the post-process effects and the render!
I used a PostProcessVolume to push the final image a little more. I have all the settings set to a very subtle intensity, therefore I’ll show you a before and after with all settings turned off and on.

image-167_comp-scaled

With the PostProcessVolume

image-175

Let’s go over the camera settings that I used on my renders: I set my filmback to 16:9 Digital Film. I liked the result most and decided to stick with it. I set the focal length to 75, You can go a lot higher with this value if you want to do portrait shots –

image-176

I wanted a little bit of perspective left in there, so I went with 75mm.

Below is a reference showcasing the balancing between perspective and orthographic look. The lower the value, the stronger the perspective distortion will be, and the higher the value, the more orthographic your image becomes.

image-180

For the focus distance, I used the super helpful Debug Focus Plane. This is very handy, as you can clearly see what depth is currently set for the focus. Below you can see it enabled.
I did not use any post-process effects in the camera settings, as I used a volume for that

image-178

For the turntable animation, I just recorded a very basic 360 degrees rotation over 6 seconds, using the Sequencer.

image-181

Rendering with Unreal’s Movie Queue Render

The Unreal Movie Queue Render is absolutely amazing! For me, the major win using MQR is the fact that you can boost your Temporal Anti Aliasing to 64! To put it into perspective, rendering your images without MQR limits you to a Temporal Anti Aliasing of 4.
Your final renders look so much more cleaner with MQR, however, it also takes a lot longer to render these. I would totally recommend doing it, it’s really worth it. Especially when you are rendering hair.

I could go into detail on how I set it up, but I literally followed William Faucher’s youtube tutorial to the dot, so I would like to give him all the credit and link you his video instead: https://youtu.be/FxvF3zncClA

Below you can see an area rendered without MQR.

image-183

The image below shows the same area rendered with MQR. See how much smoother and nicer it looks with 64 samples of Temporal Anti Aliasing.

image-185

Alright, that’s it! Thank you very much for checking out my breakdown of my recent work. If you have any questions, please feel free to message me on social media. I’ll try to get back to you and clear out any question you might have on my work.

https://www.artstation.com/sykutera

https://www.instagram.com/thomassyku/?hl=en-gb

https://twitter.com/tsykutera?lang=en

https://www.linkedin.com/in/thomas-sykutera-a13426147

 

Thanks to Thomas for allowing us to have such an in-depth look at his process. If you liked this character breakdown and want to see more like it from other inspiring artist’s make sure to follow us on :

https://www.artstation.com/gamesartist

https://www.instagram.com/gamesartistuk/

https://www.facebook.com/GamesArtist/