Cel Shading

Overview

Cel shading (or toon shading) applies non-photorealistic rendering to 3D graphics, creating the appearance of hand-drawn animation. Instead of smooth gradients, surfaces show flat colour bands separated by hard edges. The technique sidesteps the “uncanny valley” problem of photo-realistic rendering by deliberately leaning into the artificial — and ages much better, because hand-drawn-style art doesn’t look dated the way 1999’s “realism” does.

Games like Jet Set Radio (Sega, 2000) and The Legend of Zelda: The Wind Waker (Nintendo, 2002) proved cel shading wasn’t just a gimmick — it created timeless visual styles that still look great today.

Fast facts

Alternative names: toon shading, NPR (non-photorealistic rendering), comic-book shading.
Technique: Quantised lighting + edge detection.
Pioneer: Fear Effect (Eidos, 1999) used early cel-shading; Jet Set Radio (2000) made it mainstream.
Defining use: Wind Waker (2002) — the largest-scale cel-shading commitment of its era.
Modern status: Established art style option used by countless modern games.

Technical approach

Two core ingredients:

Quantised lighting

In standard shading, light intensity varies smoothly from fully-lit (1.0) to fully-shadowed (0.0), producing gradient surfaces. Cel shading quantises this — instead of a smooth gradient, the lighting maps to 2-5 discrete bands:

standard: light = max(0, dot(normal, light_direction))    // smooth 0.0 to 1.0
cel:      light = quantise(light, [0.2, 0.5, 0.9])         // → 0.2, 0.5, or 0.9 only

The result: surfaces show flat-coloured bands rather than gradients, with hard transitions between them. The number of bands and their thresholds are art-direction choices.

Edge detection

Cel-shaded objects need outlines — the dark lines around silhouettes and creases that make hand-drawn art readable. Two approaches:

Method	Implementation
Inverted backface render	Render each model twice: once normally, once scaled-up, flipped, and in solid black. The black version peeks out at silhouette edges. Standard 2000s technique.
Sobel / depth-based edge filter	Post-process: apply edge detection on the depth buffer or normal buffer. Modern approach.

Both methods produce the characteristic dark outlines.

Notable implementations

Game	Year	Studio	Notes
Fear Effect	1999	Eidos	Often cited as the first commercial 3D cel-shaded game
Jet Set Radio	2000	Sega/Smilebit	Skatepunk Tokyo aesthetic; defined the look for action games
Cel Damage	2001	Pseudo Interactive	Comic-book vehicular combat
The Legend of Zelda: The Wind Waker	2002	Nintendo	Major Nintendo commitment to the style; controversial at launch, beloved later
XIII	2003	Ubisoft Paris	Comic-book FPS adaptation of the Belgian comic
Killer7	2005	Grasshopper Manufacture	Suda51’s idiosyncratic cel-shaded action
Ōkami	2006	Clover Studio	Sumi-e ink-painting style — cel-shaded with brush-stroke aesthetic
No More Heroes	2007	Grasshopper	Wii cel-shaded action
Borderlands	2009	Gearbox	“Concept-art” cel-shaded FPS — defined a new sub-genre
The Wonderful 101	2013	Platinum	Heavy cel-shading + bright colours
Persona 5	2016	Atlus	UI + cel-shaded character animations
Spider-Man: Into the Spider-Verse (film, but technique-relevant)	2018	Sony Animation	Pushed cel-shading techniques into film
Hi-Fi Rush	2023	Tango Gameworks	Modern cel-shaded action with rhythm gameplay

Why it endures

Cel shading remains popular because:

Ages well — Wind Waker (2002) looks excellent today; many of its photo-realistic contemporaries look badly dated.
Stylistic identity — distinct from photo-realistic competition; instantly recognisable.
Performance — quantised lighting is cheaper than physically-based rendering.
Animation forgiveness — flat colours hide model imperfections that smooth shading exposes.
Anime / manga aesthetic — directly compatible with the visual language of those mediums (huge market in Japan, growing globally).

Variations

Modern non-photorealistic rendering goes well beyond simple cel shading:

Style	Notable for
Sumi-e ink-painting	Ōkami — Japanese brush-painting aesthetic
Comic-book	XIII, Borderlands, Comix Zone (2D) — halftone, panel borders, speech-bubble integration
Watercolour	Drawn to Life, Eastward — watercolour-style textures
Pencil-drawing	Mark of the Ninja, sections of Don’t Starve
Painterly	Disney’s The Lion King (1994 SNES, an early softer style); modern painterly games
Anime cel	Tales of series, Genshin Impact, Persona 5

The umbrella term NPR (non-photorealistic rendering) covers all these — cel shading is the most common subset.

Modern implementation

In modern shader-based engines, cel shading is typically implemented in fragment shaders:

// Simplified GLSL fragment shader for cel shading
float NdotL = max(dot(normal, light_dir), 0.0);
float band = 0.0;
if (NdotL > 0.95)      band = 1.0;     // Bright
else if (NdotL > 0.5)  band = 0.7;     // Mid
else if (NdotL > 0.25) band = 0.4;     // Shadow
else                    band = 0.1;     // Dark shadow

vec3 final_colour = base_colour * band;

Plus a separate edge-detection pass for outlines. Real production shaders are more sophisticated (multiple light sources, rim lighting, shadow softening) but the core idea is exactly this.

3D with cartoon style