Upcoming Events
Unite 2010
11/10 - 11/12 @ Montréal, Canada

GDC China
12/5 - 12/7 @ Shanghai, China

Asia Game Show 2010
12/24 - 12/27  

GDC 2011
2/28 - 3/4 @ San Francisco, CA

More events...
Quick Stats
104 people currently visiting GDNet.
2406 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!
Link to us Events 4 Gamers
Intel sponsors gamedev.net search:


In an era of increasingly realistic game graphics, buzzwords like bump-mapping and per-pixel lighting take all the glory.  The programmable hardware in today's consumer graphics cards does make these highly-realistic techniques available in real-time, but this same hardware makes stylized rendering available as well. Non-photorealistic rendering (NPR) is a branch of 3D graphics that has yet to be fully tapped for game use.  With the advent of programmable shaders, a whole range of NPR styles are available that previously existed only in the pre-rendered domain.

This article focuses on using programmable hardware for a popular NPR technique: creating cartoon-like graphics from 3D models.  Games are released every year that are based on cartoons but fail to convey the same look and feel as their subject matter.  This work attempts to make cartoon-style graphics available to 3D game developers.  It culminates in a powerful, fast cartoon renderer that will run on any Direct-X 8.0 compatible hardware.

We'll start by taking a quick look at our selected hardware, continue with a brief definition of cartoon rendering, describe the implementation details of our renderer, and finish with some benchmarks and ideas for the future.  As you will see, our renderer is accessible: It runs on ATI and nVidia hardware and even the X-Box console.  It is flexible: we can change the thickness, color, and style of our ink lines.  We can modify shading styles by altering a single texture.  It is fast: it runs at game-acceptable frame rates for scenes in excess of 40,000 polygons.  Best of all, the frames generated by our renderer look great!

Limitations of our Hardware

Since the goal of this article is to create a DirectX 8.0 compatible cartoon renderer, there are certain things regarding our selected hardware that we should be aware of:

Vertex Shaders:  We are limited to Vertex Shader language version 1.1 (VS 1.1) which means the 2.0 control instructions (if, call, etc.) will not be available to us.  We are also limited in the number of registers and total instructions we can use, although all of the vertex programs in this article stay well under these limits.

Pixel Shaders:  The first incarnation of the pixel shader language, PS 1.1, is a far-cry from what is available on more modern pixel shader hardware. The useful instructions that were added in language versions 1.2, 1.3, 1.4 and 2.0 will not be available.  We are also limited to eight instructions per pixel program (sixteen if we are good at co-issuing instructions to the RGB and alpha pipelines).

Texture stages:  We have only four texture stages, which is somewhat unfortunate, as the outlining technique we use would be more accurate with five.  On the other hand, the 5th stage wouldn't be all that useful without a higher pixel shader instruction limit, so the absence of the additional stage is somewhat moot.

Rendering passes:  Ideally, the entire scene would be rendered in one pass, but without the multiple render target support that exists on more modern hardware, our renderer is limited to a two-pass approach.

What Is Cartoon Rendering?

Cartoon rendering (sometimes referred to as cel-shading) has two major constituents: painting and inking.  In the traditional sense, painting is filling a cartoon object with areas of color.  A simple cartoon will use solid colors for different objects (flat-shading), but more complex cartoons use two or even three colors for each material.  This is often called stepped-shading because the color "steps" dramatically from the shadow color to the highlight color.  The stepped-shading effect looks quite different from realistic rendering techniques as there isn't a smooth gradient between the shadowed and highlighted areas of an object.

Inking mimics a traditional cartoonist's use of black ink to create a stylized world.  In a cel-shaded scene, each object needs an "ink" line to separate it from other objects. It also needs lines to emphasize its features, to show sharp edges, and to separate any areas of differing color.  In the examination of our renderer, we will look at the algorithms and implementations for painting and inking separately, as it represents a logical division of concepts.

The Evolution of a Cartoon Renderer

  The Evolution of a Cartoon Renderer
  Speed and Quality

  Source code
  Printable version
  Discuss this article