Skip to main content

Toon

The Toon material implements a stylized rendering effect that simulates cel shading popular in animation and games. The smooth gradient normally produced by direct lighting is modified to give a hard edge which results in a hand-drawn comic book or cartoon look.

demo

Download the following file package to obtain the Toon material.

Toon Material Properties

Use this project to create one of two variations of the Toon material. You can use the default Toon material, which exposes all the colors used for lighting as user-controllable parameters. Alternatively, you can use an albedo texture to supply colors for the lights, shadows, and highlights, as well as supporting a normal texture for adding bump details to the surface. You can rename this variation of the Toon material as ToonTextured. When the Toon material is selected in the Assets panel, you can view and modify the following properties in the Inspector panel.

Toon Ramp

The Toon Ramp texture is a grayscale texture that remaps the smooth gradient normally produced by direct lighting into discrete levels of light and shadow. Parts of the surface pointing completely away from the light are relit according to the leftmost side of the texture, parts facing directly towards the light use the rightmost side, and parts perpendicular to the light use the middle. Several common types of toon ramp textures are included in the project, but any grayscale gradient can be used to remap the direct light levels. Try experimenting with making your own toon ramp textures and see how they affect the material.

toon ramp

Lit Color & Shadow Color

The Toon material exposes two different colors: the Lit Color is used in areas of full light (after remapping by the Toon Ramp texture), the Shadow Color in areas of full shadow, with areas in between interpolated based on the value returned by the Toon Ramp texture.

lit color
note

If using the ToonTextured material, you can instead add an Albedo Texture parameter and use it to supply the lit color, and the shadow color is calculated by multiplying the albedo sample with the value returned by the Toon Ramp.

Specular Color

The Toon material exposes another color used for specular highlights, which simulates the light that is directly reflected off of a smooth or shiny surface towards the viewer.

specular color
note

If using the ToonTextured material, you can instead use the Albedo Texture sample again here, multiplying it with the calculated specular intensity and adding it to the final color.

Specular Size & Specular Softness

Both Toon and ToonTextured materials expose another two parameters for controlling the look of the specular reflections: Specular Size controls the total surface area of the specular highlights, and Specular Softness controls how hard the edge is between the highlights and the rest of the surface.

specular softness

Normal Intensity

The Normal Intensity parameter on the ToonTextured material controls how strongly the normal map texture should affect the surface.

normal intensity

Rim Light Color

The Rim Light Color parameter controls the color of the outline.

rim light color

Rim Light Softness & Thickness

The Rim Light Softness parameter controls the smoothness of the gradient between the outline and the lit surface, and the Rim Light Thickness parameter controls the overall size of the rim.

rim light softness

Deep Dive

Diffuse Cel Shading

The most important part of a toon shader is altering the direct diffuse reflectance model so that the smooth gradient produced by direct lighting instead becomes a number of discrete levels. The Lambertian reflectance model uses the dot product of the surface’s normal vector and the direction vector from the surface to the light to determine the intensity of the light reflected off the surface. This variable is often called “NdotL” for short. Assuming the vectors have been properly normalized first, the dot product will return -1 if the vectors are pointing in the exact opposite direction and +1 if they are the same direction.

diffuse cel shading
note

The Light Direction WS node gives us the direction vector of our scene’s main directional light; for example, a sun at noon casting light straight down would return a direction of (0, -1, 0). However, the Lambertian model calculates intensity using the direction from the surface to the light. For a light source considered infinitely far away like a directional light, you simply flip the direction vector. For a point light, you would instead subtract the position of the surface from the position of the light.

Specular Reflections

Unlike diffuse lighting, which can be calculated with only the light direction and the normal vector of the surface, accurate specular reflections are view-dependent and need to also incorporate the direction from the viewer to the surface. In this material, the Blinn-Phong model is used to calculate these specular reflections.

specular reflections
rotating sphere

As the camera rotates around the sphere, the diffuse lighting stays the same, but the specular reflection appears to move around the surface.

Fresnel Outlines

Another common aspect of a stylized toon look are thick outlines imitating the line work of an illustration. There are many different ways to accomplish this effect, but this effect uses the Fresnel node to add outline color where the angle between the surface normal and the view direction is greatest. This is a very loose approximation of correct outlines and does not work well for every mesh, but it can be accomplished within the same material as the other toon shading effects and has been included because of this convenience. Other approaches, such as the inverted hull method, where the mesh is drawn a second time inside-out and inflated along the mesh’s normals, tend to produce more consistent results but would require being drawn again using a separate material.

fresnel outlines

Final Graph

The final graph appears as the following, with comment boxes around the flows that control cel shading, specular reflections, and the outline.

final toon graph