Anime Toon Shading

Download

Main references to create Anime Toon Shading was “Gravity Rush” and “Dragon Ball FighterZ” so if you want to achieve this kind of feeling with dynamic cartoon lighting in your game, then this package will be a perfect starter for you.

Anime Toon Shading is a post-process independent approach to cartoon style effect, which means it uses geometry based shading model that allows customizing every character on the scene to specific lighting conditions and works perfectly in the forward rendering mode.

Package contains a full lighting system that supports single dynamic directional light and multiple dynamic point lights. Perfect choice for VR games as well as mobile.

Features

• Advanced material configuration instanced per object specular/shading/outline
• Dynamic directional light support
  Multiple dynamic point lights that can affect actors
• Very fast and GPU friendly
• Material function, which can be used as an unlit/lit material
• Tested on meshes from paragon (great for stylizing assets)
• Geometry based shading. No need to use post-process uses, forward rendering mode works in VR and mobile.
• Interface for an easily combined dynamic toon lighting system with any actor
• Outline shell mesh (material for additional mesh rendered from inside)
• Multiple parameters designed with thinking of customizing toon shading on characters
• Anisotropic specular (hairs), specular matcaps support (Eyes, Metal)
• Easy to integrate with external post-process.
• Toon specular parameters: Specular size, color, and translucent, softness
• Toon shadow parameters: Glossy effect
• Aberration effect, softness, width, two shading methods (texture and smoothstep function), multiple shading textures
• Toon outline parameters: width, softness, color, and translucency

Gallery

Release changelog

Documentation

Geometry based shading

There are two types of packages on the marketplace that supports toon/cel-shading in UE4. Post-process based (other packages) and Geometry based (this package). Both have cons and pros and It is important to understand the difference to know with them chose. A table below shows basic differences and possibilities that will be supported or blocked depending on what you choose.

Probably there will be support for the post-process shading model in future versions of this package but in the current state, I’m focused on geometry-based shading.

Get started with material

This part of the documentation covers the basics of creating material in Anime Toon Shading. The system is divided into two types of material that can be used on geometry lit and unlit. Both types of material support similar functionalities and parameters but there is a small difference:

• Unlit (M_ToonShadingUnlit) – Very fast but can’t receive shadows.
• Lit (M_ToonShadingLit) Little slower but allow to receive shadows.

To start working with Anime Toon Shading you need to create material for your mesh:

1. Chose the material type that will be used on mesh for example M_ToonShadingLit.
2. Click right and select “create new material instance”.
3. Open material and set up parameters of new material as you like to see an object on the scene.
4. Apply created material to your mesh.

Using directional light

Directional light can be used for setting up global lighting that will be affecting all objects on the scene. Just drag and drop BP_ToonDirectionalLight on scene and setup parameters.

Using multiple point lights

Anime Toon Shading supports multiple point lights that are combined into second directional light data and applied to the base shading model. That functionality can be used for light flashes like explosions, some additional lighting on the scene, and shadowing in darker places where the directional light should not affect the object.

The dynamic light will only affect objects that implement properly BI_ToonShading interface. You can use an example implementation and inherit a base class of static mesh (BP_ToonStaticMesh) and skeletal mesh (BP_ToonSkeletalMesh)

1. Content Browser -> Crete Actor
2. Select BP_ToonStaticMesh or BP_ToonSkeletalMesh
3. Setup default mesh in the blueprint.
4. Set Toon Shading material on the mesh (Get Started section describes how to create new material).
5. Drag and drop created actor to your level.
6. Drag and drop BP_ToonPointLight to your level. Set up parameters:
   

   BP_ToonPointLight
   Intensity	Light color and shadow multiplier.
   Light Color	Color of direct lighting.
   Shadow Color	Color of indirect lighting.
   Position	The position of the light.
   Scale (radius)	The radius of lighting.
   Base Light Weight	How base directional light color affects meshes in this light. 0 means additive, 1 means override the base light.
   Base Shadow Weight	How base directional light shadow affects meshes in this light. 0 means override the base light direction 1 for no change.
   Scene	Will be updated automatically after adding light to the scene.

7. Drag and drop BP_ToonScene to your level.
8. Select BP_ToonScene and add Lights and Actors that should be managed by the lighting system.

Custom character interface

Sometimes there is no possibility to inherit example actors (BP_ToonStaticMesh, BP_ToonSkeletalMesh, ThirdPersonCharacter) that contains the implementation of dynamic lighting. Fortunately “Anime Toon Shading” is very extendable, you can modify your own character to be affected by dynamic Toon Shading lighting as well. It’s a bit complicated but believe me, I did everything I could to make it user-friendly.

1. Open Character blueprint. Add BP_ToonScene reference attribute to your actor. Variables->Add:
   • Variable Name Scene
   • Variable Type BP_ToonScene
2. Add a new component BP_ToonShadingComponent that will be used to communicate with the scene.
3. Add a new function Toon Shading that will be evaluated to update lighting on the object. Functions->Add.
   
4. Add ApplyShading evaluation for every mesh in pawn that should be affected by lighting. In this case, the character contains one Mesh.
   
5. Call function in the constructor to activate lighting on start.
   
6. Implement the ToonShading interface. Open Class Settings and add interface BI_Toon_Shading to list.
   
7. Call toon shading update on events BeginPlay and IToonShading
   

Remember! This modification creates dynamic material instances to communicate with the scene manager, you should use them instead of creating a new one. Custom character interface

External post-process

It’s a good practice to combine two types of toon shading systems for example by using “Anime Toon Shading” for characters and post-process material for the environment.

Post-process based toon shading should support excluding the shading materials that using “Anime Toon Shading”. Generally in this kind of problem full-screen mask tells the post-process shader where to live pixel is not changed. It can be implemented easily by using a custom depth stencil mask. This is a simple example of how to integrate this package with post-process material.

1. Set up your project to use the stencil buffer. This functionality is required because we need an additional buffer to mark pixels rendered by AnimToonShader.
   
2. Select mesh that is using “Anime Toon Shading” material and set stencil mask value:
   

   Remember: It is just an example configuration of the mask. If you already using custom depth stencil for outlines then you should reserve one bit for “Anime Toon Shading” masking.

3. Use MF_PostProcessMask material function as a mask on your post-process effect:
   

Outline shells

The outline effect for forward rendering can be realized by creating a second expanded mesh with front face culling (rendered from inside). “Anime Toon Shading” contains tricky material that can do it for you. You can find an example of this part of the documentation in Demo/Characters/ThirdPersonCharacter blueprint.

1. Duplicate mesh component in your character and rename to ‘Shell’.
2. Initialize Shell in construction script
   
3. You can add the attribute ShellColor to your blueprint or use MakeVector. The alpha value in this vector is responsible for the outline width.
4. The shell material supports the vertex color alpha multiplier. You can locally control the width of the shell by painting (alpha channel) on the vertex color of the mesh. It is a cool feature used in the current generation games.

Flat surfaces

Questions & Answers