Cel/Toon Shading

Exploring how cel/toon shading works.

When you want realism, you go with "Physically Based Rendering (PBR) shaders". But if what you render needs more spice, you want to change how you render it. Like the stylized shading in these orbs, or the shading on this monkey.

A really common and simple non-realistic shader is the Toon/Cel Shading. You'll see it in games like Zelda, hades, dragon ball, and even Genshing Impact. Where the aim is to give it a 2D flat look while keeping the three-dimensionality still obvious.

Getting started


Torus Cel Shading

This is one of the first demos I saw from Misaki that inspired me to learn WebGL. Notice how objects only have two or three colors of the same shade, this is toon/cel shading.

Here's a very basic toon shading with 3 "bands/sections":

float shade = dot(vNormal, lightDirection);
shade = floor(shade * 3.) / 3.;
Toon Shading by Misaki nakano

Noisy Contour

Something that usually accompanies Cel\toon Shading is edge rendering. Because toon colors are too flat, depth is sometimes lost or confused. Outlines help your brain understand which parts are in front of others.

This noise contour is a post-process effect. However, the outline in Misaki's is a cloned mesh scaled slightly bigger that only renders the backface, which is much simpler to implement.

Noise Contour by candycat

Hope Cel Shading

This Cel shader by TheSpite is in the style of the American Hope Poster. This cel-shading has lines in one of its bands by selecting it with an if statement:

if(shade >= 2./3.){
// shade with whatever you want.
color = vec3( mod(uv.y * 100., 1.) );

This would select the last band. TheSpite does it all in a post-processing step, but you could do the shading in the object shader.

Hope shader by theSpite

Black and white cel-shading

While used a lot in games to create a toon-y and friendly vibe. Cel also makes for a striking and contrasting style like in this black-and-white interactive comic. Here edge detection is key to give the detail of the object in the shadows.

Inkboots cartoon

Faking toon shading with hard edges

This is my favorite music WebGL demo. However, this is not cel-shading, but because all the geometries have hard edges, it gives the flat look that cel-shading does.

Dennis music video by Always & Forever

Further reading / Inspiration