Toon Shader Tutorial

Skill level: beginner

Explanation of a toon shader: What is it?

A toon shader is a shading technique used to draw an outline around your object and make it appear flattened. It is meant to replicate what an object would look like if drawn and painted traditionally or by hand in cel based animation.

This explanation is for the beginner and is based on limited knowledge of 3D software. The explicit example at the bottom is a how-to using Maya.

How that is calculated?

The software generally compares the normal from the camera to the normals from the objects being rendered. [A normal being a line drawn perpendicular from the face of the object in question.]

Normals from an object

Normal from camera

Working with the normals, it is possible to calculate a ratio of how a particular object normal differs from the camera normal. Using a dot product calculation, the ratio can become a 0 to 1 range.

0 0

0.4
0.4
0.7
0.6
0.8
1.0

Using this range, one can then specify that an outline should be rendered in the desired area. That is, we could set up a render to draw a black line between numbers ranging from 0 to 0.6 in our example image, to get a thick line in that area. Using that example, our results would look like this:

TOP

Using this theory, I wrote this tool back in February of 2003 to help with a class I was running at the time. This tool was designed for that purpose and thus is wide open. It will create a complex shading hierarchy that is wide open, with no hidden nodes. You can peruse through and learn what each connection is doing and why.

Of course, to make it easier, there is also an interface where you will create, assign, and even delete shaders. This tool will create a toon shader to the best of the Maya software renderer’s ability.

Download (Save As) here: tj_toonShader2.mel

Create your own toon shader: How-to? (Maya)

If you want to create a toon shader using your new found knowledge, the simple way, you can use my mel script as per above. The beauty of this script is it will create an interface to control your shading network, but leave the network visible. The benefit of that is you can pick apart the network and understand how it is functioning.

Ok, let’s create a simpler version than the tweaked out one generated from the script by ourselves:

1. Launch Maya and create your surface for use, don’t forget to throw in a few lights for test rendering.

2. Start your surfacing of the object with a surface shader and assign it to your object.

3. Create a lambert. This will act as the ink outline, so set it to black.

4. Create a condition utility. Link your lambert out colour rgb to the colour 2 rgb in the condition. Link your condition out colour to your surface shader out colour. Set the condition to greater than. The second term will be our line thickness ratio, let’s try 0.6 as in the above explanations.

5. Create a sampler info utility. Link your sampler info’s facing ratio to the first term of the condition.

6. Create a blinn.

7. Create a clamp utility. Link your blinn out colour to the input of the clamp. Set all min values to 0 on the clamp, while its’ max values go to 1,0,0. This allows us to determine where to put the shadows and highlights, while clamping them to a value range between 0 and 1.

8. Create a ramp. Set the ramp to V Ramp with smooth interpolation. Remove one colour so you only have two. The ramp will be the paint colours. The top being the brightest colour, and the bottom being where the paint falls into shadow but is not yet outlined with black. Set up your two colours appropriately, stacking them fairly close together (eg. at 0.585 and 0.390).

9. Connect the clamp output R to the vCoord of the ramp, to drive the highlighting area appropriately.

10. Connect the out colour of the ramp to the colour 1 rgb of the condition.

At this point, you have created a rudimentary toon shader. However, for more options and a better overall render, it is advised to use the above mentioned script and tweak it for your scene.

- tj, Feb 2003