Cel Shading | Code Like It's 198x

In May 2000 Edge previewed a Dreamcast game whose skaters and streets were 3D models but looked like a moving cartoon, with flat colours and thick black outlines. A caption gave the look its name: “The game’s visuals mark the beginning of a new trend, which Sega is dubbing ‘cel shading’.” The game was Jet Set Radio, and within three years the same look had spread to racing games, shooters and Zelda, and magazines were asking whether it was a fad.

The surprise is that cel shading, done well, is not a cheap way to draw. It throws away the smooth lighting that 3D hardware was built to produce, and adds work of its own: every model needs an outline that follows its edges as it turns.

Fast facts

The name: from the celluloid sheets (“cels”) on which hand-drawn animation was painted.
In animation software: LightWave 3D’s Cel Shader, a LightWave 5.0 feature, was rendering 3D vehicles for a 2D cartoon by 1997.
In games: Jet Set Radio (Smilebit, Dreamcast, 2000) made it famous.
The look: “bold colours, reduced detail and heavy black outlines” (PlayStation 2 Official Magazine, Australia, January 2003).
The cost: “the rendering can become more complex”, in the words of an art director who used it.

How it works

A normal 3D renderer shades a surface smoothly. It works out how directly each point faces the light (the dot product of the surface normal and the light direction, a number from 0 to 1) and darkens the colour in proportion, so a sphere fades gradually from bright to dark. Cel shading keeps the calculation but throws away the gradient. Frank Luna’s Introduction to 3D Game Programming with DirectX 9.0 (2003) splits the technique into two steps:

Shading in bands. The lighting value is not used to scale the colour. Instead it is used to look up a small strip of texture holding two to four flat shades, so every value in one range comes out as the same shade and the change to the next is abrupt. Texture filtering is switched off, because filtering would blur the bands back into a gradient.
Outlines. An edge belongs to the silhouette when one of the two faces that share it points towards the viewer and the other points away. Luna’s version stores a thin, collapsed quad along every edge of the model and, each frame, stretches out only the ones on the silhouette, drawing them in black.

Luna credits the approach to Jeff Lander’s article “Shades of Disney: Opaquing a 3D World” in Game Developer magazine in March 2000, two months before Edge’s Jet Set Radio preview. The extra pass for the outlines is why Russel Comte, art director at Melbourne House, told the Australian PlayStation 2 Official Magazine that his team’s cel-shaded game was “actually quite complex, and as such the cost of rendering the models was relatively high”. Capcom showed the magazine the result step by step on a car from Auto Modellista: “Notice how shadowing on the car’s body and windscreen is relatively blocky. There’s no attempt to graduate it.”

Before games: the Cel Shader

The technique reached games from the software used to make television animation. In July 1997 NewTek’s advertisement for LightWave 3D promised that “the Cel Shader comes standard with every copy”, and quoted an animator who found it “simple to use yet incredibly powerful”. The same issue of NewTekniques described how Foundation Imaging used it on Batman & Mr. Freeze: SubZero. Allen Hastings, LightWave’s author, had designed the Cel Shader, and the animators “tweaked with their models so that the Cel Shader gave them just the right look”. Vehicles and machines were built in 3D, rendered white with a black outline, printed out frame by frame and sent to the studio in Korea as guides for the painted animation. The technique began as a way to hide 3D inside a cartoon, before any game used it to make 3D look like one.

Jet Set Radio

Edge‘s preview of Jet Set Radio in May 2000 described “cel rendering, a technique which highlights main characters and background features by delineating them with a heavy black border”, and predicted a look “that will soon become a common sight in a new generation of games”. The same caption that named the trend admitted a rival: “Infogrames’ Wacky Races uses a similar method”. When a reader later wrote in to claim Wacky Races as the first cel-shaded game, Edge replied that Jet Set Radio “beat it to market in Japan by about four months”. The Jet Set Radio entry follows that argument. A programmer who had worked on cel shading for the PlayStation 2, Mark Baker of Climax, offered Edge a more cautious history in 2004: the technique “seems to have been developed independently by a number of people at the same time”, perhaps inspired by research papers and shaders for 3D animation packages, and Jet Set Radio “was one of the first games to make heavy use of cel shading”.

The team presented the look as a designer’s choice rather than a rendering trick. Ryuta Ueda, the art producer, told Edge he had been “surprised and disappointed” to find “only anime and manga-like designs” when he joined Sega: “With JSR, I have been able to explore my own ideas about design. There is not any special Sega concept or inspiration. It is my style.” By February 2001 Edge was reviewing Sonic Shuffle under the heading “Cel shading revisited”, with its “sumptuous hand-drawn effect” achieved through “the cel-shading technique that made Jet Set Radio so visually striking”.

Fear Effect and Herdy Gerdy

Not every cartoon-like game of the time was cel-shaded, and the press drew the line in different places. Kronos’s Fear Effect for the PlayStation, which Edge reviewed in April 2000, had “manga-style characters” and “a new graphical style”; Edge said “No other game looks like it”, but did not call it cel-shaded. An American reporter at E3 that year thought Jet Set Radio was “taking a page out of Eidos’ Fear Effect”.

Core Design’s Herdy Gerdy shows the same uncertainty from the other side. Edge’s preview in April 2001 placed its Disney-style look “on a wholly separate evolutionary branch to the cel-shaded likes of Jet Set Radio, or even the PS2 incarnation of Fur Fighters”. By January 2003 the PlayStation 2 Official Magazine was listing Herdy Gerdy among the cel-shaded games PlayStation 2 owners had already seen. The same magazine traced the cartoon look back to Dragon’s Lair in 1983 and Day of the Tentacle in 1992, which shows how loosely the term was used by then.

The trend

The look spread quickly. The April 2001 Edge that previewed Herdy Gerdy also showed Capcom’s JoJo’s Bizarre Adventure moved “from his 2D home into a cel-shaded 3D” world. Capcom’s racing game Auto Modellista followed in Edge’s January 2002 issue, billed as “the antithesis of the realistic simulations that dominate the motorsports market”, with “a combination of cel-shading techniques and ostensibly realistic lighting effects” and “up to eight cars onscreen”.

By January 2003 the Australian PlayStation 2 Official Magazine called cel shading “the new buzz word in the games industry” and “this year’s fad”. It listed PlayStation 2 games already using it (Klonoa 2, Herdy Gerdy and Looney Tunes: Space Race) and games shown at E3 in 2002 (Gungrave, XIII, Superman: Shadow of Apokolips and Auto Modellista). Rob Smith, senior producer of Superman, admitted that “some people in the games industry argue that it’s become an over-used technique”, but said the game had to match the look of the television cartoon. Comte, whose Looney Tunes: Space Race the magazine called the first cel-shaded game made in Australia, explained what the technique was for: it “renders the characters in a flatter, more controlled way. Tonal qualities of the surface are minimised, shape definition and profile are maximised.” He did not claim it was easy: “There are plenty of disadvantages actually, as the rendering can become more complex. The real advantage is simply the accurate interpretation of the cartoon style.”

Zelda

The most argued-over use was announced at Nintendo’s Spaceworld show in August 2001. Edge reported “the shock of Link … complete with cel-shaded polys and a stylisation harking back to ’50s Disney”, which “initially stunned attendees. A few half-hearted cheers went up, but the usually boisterous US correspondents looked on bemused.” Shigeru Miyamoto’s explanation was about the character, not the renderer: “I started to feel strange making Link like an adult. Link was growing up and I wanted to return him to a childlike state.” A caption summed up the reaction: “The American’s didn’t like it. Everyone else did.” Two years later the PlayStation 2 magazine still remembered that Nintendo had “enraged legions of Zelda fans” by dropping “a hyper-realistic GameCube Zelda in favour of a cel-shaded version”. The game shipped as The Wind Waker, and by 2004 Baker called it “probably the best known” cel-shaded game.

Baker would rather have dropped the name. “Ultimately, I’d like to ditch the term cel shading in favour of the more general ‘NPR’ — non-photorealistic rendering,” he told Edge: the point was not “simply aping cartoons, but rather developing a unique visual identity for each game”.

Sources

NewTekniques vol. 1 no. 2, July/August 1997: LightWave 3D advertisement (“the Cel Shader comes standard with every copy”); feature on Foundation Imaging and Batman & Mr. Freeze: SubZero, pp. 26–28 (Allen Hastings’s Cel Shader in LightWave 5.0; models rendered white with a black outline and sent to Korea as guides).
Frank D. Luna, Introduction to 3D Game Programming with DirectX 9.0 (Wordware, 2003), chapter 17, section 17.5, “Sample Application: Cartoon Rendering”: the two steps, the shade texture, point filtering, silhouette edges, and the credit to Jeff Lander’s “Shades of Disney: Opaquing a 3D World”, Game Developer, March 2000.
Edge issue 83, April 2000: Fear Effect review (“No other game looks like it”).
Edge issue 84, May 2000, pp. 36–39: Jet Set Radio preview and team interview (“cel rendering”; “a new trend, which Sega is dubbing ‘cel shading’”; Wacky Races; Ryuta Ueda).
Digital Press issue 44, July 2000, p. 3: E3 report (see the Jet Set Radio entry).
Edge issue 94, February 2001: Sonic Shuffle review, “Cel shading revisited”.
Edge issue 96, April 2001: Herdy Gerdy feature (Core Design); JoJo’s Bizarre Adventure preview.
Edge issue 102, October 2001, p. 86: letter and reply on Jet Set Radio and Wacky Races.
Edge issue 103, November 2001: Spaceworld 2001 report (Link; Miyamoto; “The American’s didn’t like it”).
Edge issue 106, January 2002: Auto Modellista preview.
PlayStation 2 Official Magazine (Australia) issue 10, January 2003, pp. 42–43: cel-shading feature (definition; the games; Rob Smith; the Auto Modellista step-by-step; interview with Russel Comte of Melbourne House).
Edge issue 136, May 2004, “Big break: cel shading”: Mark Baker of Climax (independent development; Jet Set Radio; The Wind Waker; non-photorealistic rendering).