The Stranger Character + UE4 Character Customization Shader

greentooth
Offline / Send Message
Goeddy greentooth
Hey, this is my latest Character: 
The Stranger




This is a little demonstration of the Stranger in action, running around in UE4



Okay so this time I wanted to go all out: a full character that could be part of a AAA-Game, including setup in UE4 with a basic movement system, swappable equipment & armor customization like in For Honor or Warframe.

To achieve this I built a custom Layered Shader in UE4 that I'm sharing with the community.

You can get the Armor Customization Shader here: https://gum.co/ZcrMO

Buuuuuut to achieve flexibility like this, your mesh needs to be set-up and planned in a certain way, so bfeore you go ahead and try to use the shader please read the following explenation of my character setup.

But first a big shoutout to Natashia Tjong who skinned this Character for me:
https://www.artstation.com/latiwings
And Denys Rutkovsky, I used his Medieval Environment for the background of this character.
https://www.artstation.com/rutkovsky
https://www.artstation.com/rutkovsky/store/xr3/fantasy-village-kit-ue4

How does the Armor Customization Shader work?


Simplified my shader looks like this:



Basically it takes a base texture and blends 5 Layers of different materials ontop of the base,
to do this is uses a Mask texture that tells it where to blend each layer, additionally it also uses a 2nd & 3rd UV channel to add more flexibility to the way the different layers are blended into each other.

What does this actually look like in UE4? Like this:


Yes that looks quite intimidating but you don't need to understand what all those nodes do, you just need to feed them the right mesh & texture information.
So let me illustrate how I created my character to work with this shader setup:

1. The Base Layer

  
The Base Layer is quite simple, it includes:
Basecolor
Normal Map
Channel Packed AO, Roughness, Metalness
Channel Packed Masks for 2 Cloth layers & 1 Paint Layer

To be able to paint the additional Masks I added 3 Custom Channels in Substance Painter:

Lets take a look at where I painted the masks for the different layers on the Stranger Character:

As you can see the Metal and the Cloth masks don't overlap each other, but the Paint Mask is overlapping some of the cloth.
Additionally I did not use full black/white layers for the Cloth. This is because I wanted to have some AO and Dirt shining through from the Basecolor.

2. Cloth & Metal Layers

To be able to input tintable Cloth Layers I created another Mask setup:
The cloth layers use the Red & Green Channel as tint masks and the Blue channel for the roughness. So it looks something like this:
Red : Tint
Green : Tint
Blue : Roughness

I also created a Variable called "Leatherswitch", if it is set to 1 instead of the tintable textures it will use a Full RGB texture and take the rougness from its alpha channel.

The metal layer uses the metalness from the Base Layer as its mask. Additionally it uses another channel packed texture with this channel setup:
Red : Roughness
Green : Tint
Blue : Metalness

3. Trims

For the Trims at the edge of the clothing I used a different setup: It uses the meshes UV Channel 2 for blending and a horizontaly tiling texture.
To be able to preview the Trims on my mesh I created this handy debug texture:

If you look closely there is a little white dot at the top left corner of this texture, this is the Alpha Deadzone.
This is where all the UVs of your mesh need to be that won't have any Trims applied to them.
If you apply this texture to my mesh it looks like this:

To achieve a good result when applying the trims it is important to plan the mesh with the trim locations in mind. This is helpful during the highpoly stage and invaluable during lowpoly to avoid reworking the mesh.
This is the wireframe of the Stranger Character:

If you look closely you will notice how I adjusted the edgeflow to conform to the trim shape so that I could easily cut the UVs for them.

But not everything went smoothely, some design decision were suboptimal for future use I would like to note that any angles larger then 45 degrees will cause problems for the trim UVs, here are some problem areas of my mesh highlighted:


4. Paint Decals

The last layer is the Paint Layer, it blends ontop of all other layers.
It uses the paint mask from the Base Layer and another channel packed texture for its colors.
In this case Red, Green & Blue are all Tintable so if you input a regular full color texture and apply leave the tint values default the shader will just display that texture as is.
The idea for these paint textures was for them to be sharable between different characters, so they use a 3rd UV set that can be individually adjusted to make the texture fit on any character.
The master layout for these textures looks like this:


5. Other Shader Features 

With all the above features applied you should be able to achieve a result like this:

But the shader has a couple more miscelanous features, for example both the Trim and Paint Layers have an opacity slider that allows them to be deactivated at any point during runtime. I used this to quickly preview different variations and debug the shader and textures.
There are tint inputs for the Basecolor and Vertex paint is used for 2 functions:
Blue controlls the color opacity of the Trims, it can be used to use the trim as normal decals, for the Stranger I used it to have normal decals on the belts.
Green is plugged into the opacity mask and can be used to hide or toggle parts of the mesh.

I created these 2 versions of the character just using those miscellaneous features. One could easily imagine them as a Basic & Prime Variant



If you like this character you can buy the whole thing including sourcefiles here:
https://gum.co/MXIZY



Alright sorry for the massive amount of text, I hope the function of this shader is understandable to everyone.
Ofcourse please let me know if you have any trouble using it and I will do my best to answer any questions in this thread.

Replies

  • PeterK
    Offline / Send Message
    PeterK polycounter lvl 14
    This is quality work,  thanks for sharing.

    My biggest internal issue has always been making quality cloth sim. Your cloth sim is very high quality, What did you use for this? Was it the internal UE4 cloth sim, rigid body node, or do you have any other thoughts on that?
  • slosh
    Offline / Send Message
    slosh ngon master
    Wow this looks great!
  • Torch
    Offline / Send Message
    Torch greentooth
    Badass.

    That is all.
  • JohannesAg
    Online / Send Message
    JohannesAg polycounter lvl 3
    love it!. Super cool to see the breakdown as well
  • bkost
    Offline / Send Message
    bkost polycounter lvl 4
    Wow, this is excellent work @Goeddy!! I've been wanting to pick up some UE4 character shader tech work for the longest. Can you please share some resources that you used to get started? 

    I've always been attracted to the idea of non destructive forms of shading, where maps can be editable in engine. Versus baking it all down in Painter. 

    Thank you for sharing your awesome work!
  • Michael Knubben
    @Goeddy Lovely work, thank for the breakdown!
    One thing that immediately jumped out to me is that your chest uv's seem to be rotated, resulting in the normalmaps (most notably on the diamond stitched cloth) being lit from the wrong side.
  • Obscura
    Offline / Send Message
    Obscura high dynamic range
     chest uv's seem to be rotated, resulting in the normalmaps (most notably on the diamond stitched cloth) being lit from the wrong side.
    That shouldn't happen with "tangent space" normal maps. You should be free to rotate the uvs over the normal map. If this would be a problem with ts normal maps, it wouldn't be widely spread and you couldn't use trim sheet techniques.

    Now back to the case of Unreal Engine specifically. UE only generates tangents for the first uv channel, so if the normal is based on any uv channel other than index 0, what you say would definitely happen. But if its based on uv index 0, it shouldn't happen and rotated uvs should work correctly. To get rotated uvs to work with uv channel other than 0, you need to use the derive tangent basis node in the material and manually provide tangents.
  • Goeddy
    Offline / Send Message
    Goeddy greentooth
    Obscura said:
     chest uv's seem to be rotated, resulting in the normalmaps (most notably on the diamond stitched cloth) being lit from the wrong side.
    That shouldn't happen with "tangent space" normal maps. You should be free to rotate the uvs over the normal map. If this would be a problem with ts normal maps, it wouldn't be widely spread and you couldn't use trim sheet techniques.

    Now back to the case of Unreal Engine specifically. UE only generates tangents for the first uv channel, so if the normal is based on any uv channel other than index 0, what you say would definitely happen. But if its based on uv index 0, it shouldn't happen and rotated uvs should work correctly. To get rotated uvs to work with uv channel other than 0, you need to use the derive tangent basis node in the material and manually provide tangents.
    uff thats actually more in depth than what I was aware off x)
    but yes the UVs are rotated and it is a problem. Thats why I stressed that planning the mesh is very important, because in my case I didn't plan properly in this regard and I only noticed this problem after I finished the textures.
    Ofcourse I could rotate and reproject the textures but admittedly I was too lazy to do that (and I hoped noone would notice) 
  • RulazM
    This is actually enlightening, i'm new in UE4 and this actually helps alot, I would love to polish my character design abilities but don't know where to start, any ideas/links?
  • Goeddy
    Offline / Send Message
    Goeddy greentooth
    alright so its time for the

    cloth simulation breakdown

    handling cloth simulation in UE4 is as much about planning as it is about debugging.
    I got lucky because the way I built my cloth meshes worked quite well with unreals cloth sim in the end.
    getting there took a lot of itteration though.

    If you are using a cloth mesh with thickness it is necessary to use a cloth LOD for simulation, otherwise the mesh will loose its thickness when simulated.
    for the cloth LOD it is best to match the underlying mesh geomtry as closely as possible.
    this will produce the most accurate and realistic looking cloth deformation.
    ofcourse for lower character mesh LODs the cloth LODs will also need to be reduced to match the LOD topology or even simpler.

    this is the cloth LOD I ended up using in the end:


    there are a couple of important things to note here:
    the 2 layers of the skirt are welded into 1 mesh, originally I tried simulating them seperately but the clipping was quite intense since cloth can't collide with each other.
    this might have worked better if the distance between the 2 mesh layers would have been greater, but then the outer would always look like its floating quite high above the inner layer.
    as you will come to see cloth simulation is a lot about making tradeoffs.

    I added some cloth simulation for the pouch and the belts, those are on a seperate material from the rest of the cloth so they can be controlled indipendantly.
    both of those could have been achieved with jiggle bones but doing it with clothsim was a lot easier.
    also jiggle bones can't react to cloth so they would have always pushed the underlying cloth layers around, wich would lead to a lof of weird clipping, since cloth will start to react violently when its stuck between 2 collision primitives.
    talking about primites...

    Physics Asset handling

    physics assets are the biggest pain point in UE4s cloth simulation.
    this is due to the subpar state of documentation from epics side. I can understand their dilemma in a way due to these systems being very complicated from a physics standpoint.
    Initally my plan was to just use the characters physics asset for the cloth simulation as well. That is not possible as I came to understand through a lot of trial & error.
    One important note: all of the following tips apply to UE4.22 the physics asset behavior is frequently being changed by epic and might be completely different in other versions of UE4
    So what happens when you use your character collision for your cloth sim? Well it might work perfectly fine, or not at all.
    I encountered some weird issues where certain collision volumes would be entirely ignored by the cloth.
    Some times collision volumes would be ignored after a certain distance from the root and working when I moved them closer. By root I am referring to the root of the cloth which seems to be automatically calculated somehow.
    Sometimes the weird behavior would dissapear after an engine restart and reappear later.
    I have captured some of the weird behavior in this gif:

    one of the bones causes the cloth to spasm violently while the other is behaving as expected.

    so how to fix all these issues?
    the most reliable way I found is to create a unique physics asset for every element of cloth simulation and reducing the used physics asset collision volumes as much as possible.

    Cloth Simulation Configuration

    okay the last and least important part are the values used for the cloth simulation settings.
    I recommend to leave most of those at the default values, even though they all have elaborate discriptions I found that modifying them has absolutely no impact on the behavior of the cloth.
    For my cloth I only changed 3 values and regardless what type of cloth you create these values should be the only ones you need to modify:
    Friction is the least important value and fo rmost types of cloth also won't need to be modified, but in my cased it helped me to reduce some small errors in the simulation. as you can see I managed to eliminate the clipping on the shoulder by increasing the friction value.


    the most important value is Solver Frequencey this value has the largest impact on the look of the cloth. at the same time it also controlls how precise the collision with the physics asset will be. In my epxerience lower values give the most natural looking cloth simulation result, but due to the collision being so vague a high solver frequency isrequired to eliminate clipping.
    In the video of my character walking around you can see the cape clipping through the arm when I raise the sword, I then fix the clipping by doing a minor arm movement. This illustrates how easy cloth will clip through collisions with a low solver frequency.


    on a final note I would like to give some advice regarding animations.
    the more realistic your animations, the better the result of any cloth simulation will be. If limbs accelerate too fast, your cloth will fly and clip all over the place.
    Also having sufficient animation blending time will help to mitigate cloth simulation problems.
    Also some little tricks: using a preview animation on your character will help you debug simulation issues. but don't be tempted to change the playback speed, this will change the way your cloth is being simulated in unrealistic ways that are not indicative of the actual ingame behavoir.

    this concludes my little cloth sim breakdown, I hope its helpful.
  • PeterK
    Offline / Send Message
    PeterK polycounter lvl 14
    Thank you for the breakdown, much appreciated. great work.
  • CybranM
    Offline / Send Message
    CybranM greentooth
    Now this is a quality post :smiley:
    Love the breakdown and all the gifs
  • Carlos Eduardo
    Offline / Send Message
    Carlos Eduardo polycounter lvl 4
    This is indeed a great post! Thanks for all the information!
  • jimsvanberg
    Offline / Send Message
    jimsvanberg greentooth
    Stellar breakdown! Thank you! :3
Sign In or Register to comment.