Shading Model
We have created a custom toon shader using ShaderGraph which we use for both characters and environments, to create a very specific look for the game to match our concept art. You can find the base shader and all its variations in the folder /Shaders.
This article helps you orient yourself in the different ShaderGraphs and Subgraphs, and is mostly referring to the base shader, called Toon.shadergraph. For additional effects such as wind, dissolve, tinting; refer to the Shader Add-ons page.
The shader takes care of both dynamic (1) and static geometry (2) in a slightly different way. You can find this model inside a Subgraph called ToonShading.subgraph. This Subgraph is responsible for transforming the scene's lighting information into the final black/white toon shading, which is then multiplied by the colours to obtain the final pixels.
1. Dynamic geometry (the player, NPCs, enemies, and all usable tools) are shaded with two colours: one is full light, and the other shadow. The shadow the cast on static geometry is fully black. Additionally, they display a black outline that sets them off from the background. They receive an additional pass of light due to Light Probes. This pass is overlaid on top and just adjusts the brightness of the existing toon shading (i.e. it doesn't produce additional toon areas of light).
2. Static geometry (scenery, buildings, nature, ground, etc.) has colours that are more gentle and not so contrasted. The toon shading is 3 stripes, and they are not as hardly defined as the ones for the character. This geometry should have baked GI, so presenting a big range of light/shadow which is then simplified into these 3 bands. The shadows they cast are also paler, and made of 3 bands depending on their intensity (this comes from the lightmap).
Inside the ToonShading.subgraph, you'll find more Subgraphs such as ToonLightingModel.subgraph, which is responsible for the main directional ligth, the lightmaps, and the Light Probes, or AdditionalLights.subgraph which does the same thing, in a simplified way, for additional point lights (they don't cast shadows). Both of these light contributions are composited on each other to give the final lighting, on which the outline (Outline.subgraph) is added.
Notice that the lighting subgraphs rely on a variety of shader keywords, such as:
-
LIGHTMAP_ON(Multi Compile - Global) -
_MAIN_LIGHT_SHADOWS(Shader Feature - Global) -
_MAIN_LIGHT_SHADOWS_CASCADE(Shader Feature - Global) -
_SHADOWS_SOFT(Shader Feature - Global) -
_ADDITIONAL_LIGHT_SHADOWS(Shader Feature - Global)
The main light and additional lights information is gathered using some custom HLSL, which is embedded in the graph using Custom Function nodes. You can find the HLSL code in the folder /Shaders/CustomHLSL.
- Check out the initial introduction of the Toon Shading in Episode 1 of the Livestream (47:57). Keep in mind that some details of the implementation might have changed since then.
- The video Devlog 1: How we built the Toon Shading is a great and visual way to learn some of the above. However, keep in mind that the shading model has evolved since that video, so always use the version of the shader in the project as a reference to build something new.