Toon Shading Effect And Simple Contour Detection

Toon Shading or Cel Shading is a render techniques used to simulate hand-drawn cartoons. The most important aspect of this technique is the steep difference between the colors used to render 2D or 3D models. If you want to have an effect like Don’t Starve or Borderlands games you probably want to add contour detection (or edge detection) to your models. Although these games might have more complicated techniques for rendering, toon shading and contour detection can offer a similar effect.

Don’t starve

First let’s see how can we find contour detection in fragment shader for our model. You know the backface culling algorithm or Lambert’s cosine law, right? The easiest way to explain this is to rely on Lambert’s cosine law but instead of light direction we will use the view direction:

Contour Detection

In the example below I use Blinn-Phong lighting model on a sphere with the same color on all channels(RGB) and I apply contour detection:

Contour Detection

This technique doesn’t give you the best results because it “eats” from the model, doesn’t render the same contours for two different view positions and doesn’t keep an uniform width. If you want better results you can:

Render the same object a little bit larger, then draw the normal object over. Works only for convex models.

Use an edge detection filter like Sobel to build a texture with your scene and then combine with your actual texture.

Draw silhouette lines using the geometry shader.

Use a stencil buffer.

You can also skip all this computation by having textures that already have black color on edges and contour. The only drawback here is that they are static.

I decreased the angle when the contour is detected just to see how it affects the overall model

Here is the vertex shader and fragment shader for this contour detection tehnique. Remember that all channles have the same color and we are using Blinn-Phong lighting model.

Now for toon shading we must create a sharp transition effect between the colors. Toon shading can be computed in many ways. Here, for our Blinn-Phong reflection lighting model, toon shading affects only the diffuse and specular components, the ambient and emissive coefficients remain the same.

Ambinet Light Toon Shading

Diffuse light can be quantized on a number of levels to create discontinuities between light intensities. To implement this discontinuities in our shader we can use an if else-ifstatement or we can use a 1D texture with already quantized color gradients, but we can be more elegant and create a math function. For example, we can floor or ceil the multiplication between the number of levels and the diffuse cosine term and after that we scale it by a factor.

Diffuse Toon Shading

For the specular component we can use the same approach that we used to get the contour above. If the cosine rised to shininess coefficient is lesser than a threshold don’t draw it.

Toon shading with ambient, diffuse and specualar components

Toon shading result

We keep the same vertex shader from above. Fragment shader is modified:

I have been working as a software engineer in computer graphics for almost 5 years. In the free time I love playing guitar, playing video games, hiking and studying computer graphics techniques.Follow me on : Google + , Twitter, Facebook