Cel/Toon Shading Material Help UE4

I’ve been looking for information on how to do anime-style shading, but I didn’t like any of them since it didn’t look very stylized. I clarify that I am not an expert using UE4, I have barely been using it for a week and with the help of a tutorial I was able to create this material that suits what I want to create, but it still does not look as I would like. If someone could help me that would be great. I am attaching a shading that I did in Blender which is what I am trying to achieve in Unreal.


model is from hinokami chronicles
and this the material that i’m working.

The material uses two textures for the basic shading, one texture for the drawn shadows (thresholdtexture) and another in which there are some lines drawn.
What I’m trying to achieve is that when the character is fully lit the shadows that are drawn don’t disappear only if it’s completely dark. In the video that I uploaded you can see that the texture of the shadows drawn disappear when receiving light and also that the textures in general look as if they had some fusion option.

3 Likes

with the right approach, you can achieve Luffy life looks! Maybe combine various techniques such as texture manipulation, material setup, and post-processing effects?

  1. Create a new material and assign your textures to the appropriate slots.
  • Adjust the material properties to achieve the desired stylized look. This might involve tweaking the colors, roughness, and specular values to match the anime shading style.
  1. Using Drawn Shadows:
  • To make the shadows persist even when the character is fully lit, you can use a technique called texture masking.
  • Create a mask texture (thresholdtexture) that defines where the shadows should appear. In this texture, areas that should be shadowed should have values closer to black, while areas that should remain lit should be closer to white.
  • In your material, multiply the drawn shadows texture with the threshold texture, using the alpha channel of the threshold texture as the mask. This will allow you to control where the shadows appear based on the threshold texture.
  1. Achieving Fusion:
  • To achieve the fusion effect you mentioned, you can experiment with different blending modes and material setup.
  • One approach is to use a blending mode such as Multiply or Screen to combine the textures and achieve the desired fusion effect. You can try different combinations and adjust the blending factors to get the desired look.
  1. Post-Processing:
  • After setting up the material, you can further enhance the anime-style shading through post-processing effects.
  • Use the Post-Process Volume in UE4 to add additional effects such as bloom, tonemapping, and color grading to achieve the desired overall look and feel.

tldr to achieve the desired anime-style shading:

  1. Importing Textures:
  • Import your textures into UE4 and ensure they have the correct settings (e.g., sRGB enabled, compression settings).
  • Let’s assume you have two textures: shadowTexture for drawn shadows and thresholdTexture for the threshold mask.
  1. Material Setup:
  • Create a new Material in UE4.
  • Double-click on the material to open the Material Editor.
  • Drag and drop the shadowTexture and thresholdTexture into the Material Editor.
  1. Drawn Shadows Persistence:
  • Right-click on the graph and search for “Multiply” node.
  • Connect the shadowTexture to the A input of the Multiply node.
  • Right-click on the graph and search for “Texture Sample” node.
  • Connect the thresholdTexture to the B input of the Multiply node.
  • Right-click on the graph and search for “Texture Sample Parameter 2D” node.
  • Connect the alpha channel (A) output of the Multiply node to the Opacity input of the Texture Sample Parameter node.
  • Rename the Texture Sample Parameter node to “MaskTexture”.
  • Connect the MaskTexture output to the Opacity input of the Material’s output node.
  1. Fusion Effect:
  • Right-click on the graph and search for “Multiply” node.
  • Connect the Multiply node to the A input of the previously created Multiply node.
  • Right-click on the graph and search for “Texture Sample” node.
  • Connect the shadowTexture to the B input of the Multiply node.
  • Adjust the blending factor of the Multiply node to control the fusion effect. You can connect a scalar parameter node to control this value dynamically.
  1. Post-Processing:
  • Exit the Material Editor.
  • Place a Post-Process Volume in your level.
  • Adjust the settings of the Post-Process Volume to achieve the desired bloom, tonemapping, and color grading effects.

Remember to experiment with different settings and adjustments to fine-tune the material and achieve the desired anime’s styles’ shading.

1 Like

I made some changes regarding the material and now it seems to work fine,

By the way used the command r.TonemapperFilm = 0 to adjust colors.

Now I have another problem and that is that the character has a mesh for the shadows of the hair and on the face.


At first I thought that it would be solved by lowering the opacity and it could look good, but it wasn’t. I was investigating and I discovered that the creators of the character used a technique called “Tone Control Shader” that serves to project according to the shape of the mesh or the texture of the mask. I really don’t know how to achieve that effect, any support is welcome :smiley:


So its shadows on specific areas of the character’s mesh? the forehead and corners of the eyes are tough youll want to

  1. Separate the Hair and Face Shadows:
  • If your character’s hair and face have separate mesh components, you can create two separate materials for them.
  • Apply the anime-style shading material to both the hair and face materials.
  1. Create a Mask for the Hair Shadows:
  • In your hair material, you’ll need a mask texture that defines which areas should be shadowed.
  • Create a grayscale mask texture where white areas represent regions with no shadows and black areas represent regions with shadows.
  • You can create this mask in an image editing software, such as Photoshop, by painting the areas that you want to be shadow-free.
  1. Apply the Hair Shadows Mask:
  • In your hair material, right-click on the graph and search for “Texture Sample” node.
  • Connect your hair shadows mask texture to the Texture Sample node.
  • Right-click on the graph and search for “Multiply” node.
  • Connect the hair shadows mask texture to the A input of the Multiply node.
  • Connect the output of the Multiply node to the Opacity input of the hair material’s output node.
  • Adjust the blending factor or opacity of the Multiply node to control the strength of the hair shadows.
  1. Refining the Face Shadows:
  • To address the shadows on the face, you can try a few different approaches:
    • Adjust the lighting setup: Sometimes, the placement and intensity of your scene lights can cause unwanted shadows on specific areas. Experiment with adjusting the lights’ positions and properties to minimize or eliminate the undesired shadows.
    • Modify the mesh: If the shadowed areas are a result of the character’s mesh geometry, you may need to make adjustments to the mesh itself. This could involve smoothing or modifying the geometry around the forehead and eye corners to reduce the shadow artifacts.
    • try normal maps or masks, to control the appearance of shadows on the face. These techniques can help you manipulate the surface normals or restrict the shadows to specific areas.

Can you show different configs in a grid? Something to show the difference like a shading matrix or x/y plot i.e:

   | Config 1          | Config 2             | Config 3                 |
-----------------------------------------------------------------------------
A  | Soft Shading       | Distinct Shadows    | Controlled Shading       |
   | Technique          | Technique            | Technique                |
   | (e.g., "Your Name 2016") | (e.g., "Attack on   | (e.g., "Demon Slayer")  |
   |                    | Titan")              |                          |
-----------------------------------------------------------------------------
B  | Cel Shading       | Cross Hatching       | Line-based Stylization   |
   | Technique          | Technique            | Technique                |
   | (e.g., "Dragon Ball | (e.g., "Berserk")    | (e.g., "JoJos Bizarre  |
   | Z")                |                      | Adventure")              |
-----------------------------------------------------------------------------
C  | Watercolor         | Flat Colors           | Silhouette Rendering     |
   | Technique          | Technique            | Technique                |
   | (e.g., "miayazak s    | (e.g., "One Punch    | (e.g., "SAO")|
   | Away")             | Man")                |                          |

  • Config 1 (A, Opacity Control Technique): Description: This technique focuses on adjusting the opacity or blending factor of the shadows to control their strength. Approach: Utilize the opacity or alpha channel of the shadow texture to control how the shadows blend with the character. soft or subtle shading styles.

  • Config 2 (A, Stencil Masking Technique): Description: This technique employs a stencil mask to define the areas where the shadows should appear. Approach: Create a grayscale mask texture where dark areas correspond to regions with shadows, and light areas represent unshadowed regions. Use this mask in combination with the shadow texture to determine the shadowed areas. distinct shadow patterns.

  • Config 3 (A, Gradient Threshold Technique): Description: This technique involves applying a gradient threshold to control the visibility of the shadows based on the lighting conditions. Approach: Create a gradient texture that ranges from white to black. Use this texture to control the shadow intensity by blending it with the shadow texture. The gradient threshold helps shadows appear more prominent in darker areas and fade in brighter regions. This approach is similar to anime styles with defined and controlled shading.

  • Config 1 (B, Cel Shading Technique): Description: This technique aims to achieve a cel-shaded look with flat, stylized shading. Approach: Use a step or threshold function to create distinct bands of color based on the lighting conditions. “Dragon Ball Z” or “One Piece.”

  • Config 2 (B, Cross Hatch Technique): Description: This technique mimics the appearance of cross-hatching, which is a common shading technique in traditional manga and anime. Approach: Overlay a cross-hatch pattern texture onto the character’s surface, using it to modulate the shading. The cross-hatching lines can be based on the character’s curvature or specific areas that require more emphasis. This approach resembles the cross-hatching style seen in anime and manga like “Berserk” or “JoJo’s Bizarre Adventure.”

  • Config 3 (B, Line-based Stylization Technique): Description: This technique focuses on using lines or strokes to stylize the shading and emphasize the character’s features. Approach: Apply a line-based texture or stroke pattern to enhance the shading. These lines can follow the character’s contours or specific facial features. “Attack on Titan” or “My Hero Academia” incorporate line-based stylization.

  • Config 1 (C, Watercolor Technique) [continued]: Approach (continued): This approach involves using diffuse textures with soft edges and employing techniques like color mixing and blurring to achieve a watercolor-like effect. The result is a soft and painterly appearance, like “Aqua” or “Sora no Woto.”

  • Config 2 (C, Flat Colors Technique): Description: This technique focuses on using flat, vibrant colors with minimal shading to create a bold and graphic look. Approach: Apply solid colors to the character’s surfaces without intricate shading or gradients. The emphasis is on crisp, well-defined shapes and colors, giving a vibrant and eye-catching appearance. s like “One Punch Man” or “Pop Team Epic” that utilize flat colors for a striking visual impact.

  • Config 3 (C, Silhouette Rendering Technique): Description: This technique accentuates the character’s silhouette, making it a prominent visual element in the overall shading. Approach: Render the character with a strong emphasis on the outline or silhouette, using solid colors or minimal shading. The goal is to make the character’s shape easily recognizable and visually impactful. like “Kill la Kill” or “Black Rock Shooter.”

1 Like

I was trying what you mentioned but it doesn’t work at all. Although I think there is another way to achieve the desired. I have used blender and there is an option called “show backface” which if you activate it shows you the mesh that is behind the same mesh and if you deactivate it then it does not show you the back. Is there any way to achieve the same in Unreal Engine 4? I have used transparency but I can’t find any similar option, I already poor with “two sided” but it is not what I am looking for.
backface 1

bump