Dev Diary: Shader Development, Custom hair for all

Let us take follow the last medium article and with more optimization and polishing of the overall game which help a smoother running process. These systems are not merely for the cosmetic style of the game but they play an important part on how Mist can run on more devices without having to experience speed issues.

Just like in any devlog, we like to keep the community up to date with developments of the game. We are releasing these logs in not a sequential order but more in a random manner. Also when we share one thing, it doesn’t necessarily mean that team is strictly working on it, rather these are the things that we find interesting.

Today we wanted to show some info about the tweaks and configurations that we do for the hair systems in our game, since we have talked about the skin optimization last time we found this one to be appropriate.

HAIR SHADER

For some of the races hair is much more important. Not for the look of the character but also to fit their style and culture. Beards are very important for Dwarfs so we need to be able to have more options and customizability.

The problem: We need to make cool looking hair in game. It needs to move instead of being just a block.

First step : reorganizing the uvs to make sure the hair alpha cutout is filling the totality of the beard in the hair growth direction starting from the face and going toward the beard rings and chest.

Hair shader does behave like hair on extremes of the mesh but not on the inner sections.

Below you are seeing the bear changing from a solid looking model into an actual hair.

Smooth hair set up on the shader with planes to hold the geometry of each vertex point is responsible for the spawning of more vertex points in a controlled direction , this is what results in the strands and the hair-like look , This is called a geometry shader.

To add life to the hair we include a vertex displacement property, that will allow the hair to move without the need for it to be animated manually.

The first draft looked like this :

The hair needed to be more refined, with thiner strands.

Now after changing both the color and masking parts of the geometry so the hair can be spawned in only some parts of the sphere, this is added to allow control over where the hair should be apparent and where we mask it .

we used a swirl mask in this, on the sphere and it resulted in this look.

As we experiment more with the look of the hair we increased the length with the masks and it’s looking like this:

This dev bit was from our graphic design team and they wanted to share the details about the cool details that we have in Mist!

Learn More About Mist: