Toon shading / cel shading

Lighting snapped into a few hard-edged tones instead of a smooth gradient, giving 3D objects the graphic look of animation cels.

cartoon 3D lookanime shadinghard light bandsflat two-tone shadowscomic book lightingmake my 3D model look like a cartoon gamecell shadingtoon shader

See it

Live demo coming soon

What it is

Toon shading turns a smooth lighting gradient into a small number of flat tonal bands. Instead of every angle getting a slightly different brightness, a surface might be either lit, midtone, or shadow. That borrows the graphic economy of painted animation cels; a separate outline pass often completes the look.

Jet Set Radio, The Legend of Zelda: The Wind Waker, and Borderlands all built their identity on it. Reach for it when shape and pose need to read faster than material realism: animated characters, diagrams, games, and graphic product illustrations. The band thresholds, palette, and shadow color do more for the style than adding extra lights.

Gotcha: quantization magnifies noise. Uneven normals produce wobbling bands, low-resolution shadow maps make hard stair steps obvious, and a threshold sitting on a nearly flat surface can flicker as the camera moves. Outlines are another technique, not an automatic property of cel shading.

Ask AI for it

Give this three.js character a three-band cel shader with MeshToonMaterial. Create a tiny horizontal gradientMap containing shadow, midtone, and light values; set its minFilter and magFilter to THREE.NearestFilter and disable mipmaps so the borders stay hard. Use one DirectionalLight for a readable shadow shape, then add a thin inverted-hull outline with back faces expanded along the vertex normals.

You might have meant

halftonematerialshadersurface normals backface cullingvertex vs fragment shader