by Jeff Lander GRAPHIC CONTENT

Under the Shade of the

Rendering Tree

T
he goal of computer graphics has always been to create increasingly realis-
tic images. Faster processors and more sophisticated rendering techniques
have allowed computer artists to create scenes that come very close to sim-
ulating reality. In particular, computer graphics are good at rendering
architectural scenes. Raytracing and in these terms. However, even the most if I could simply upload a small pro-
radiosity renderings often fool me into basic 3D rendered scene can be gram that handled all my procedural 1
believing I am seeing actual photo- described in these {the preceding or textures? Then all I would need to pro-
graphs. Even in the real-time game the following terms?} terms. A texture vide to the rendering hardware would
market, techniques such as multi-pass map that is applied to a 3D polygon be a few variable settings for each dif-
rendering and precomputed lighting simply describes the color of the light ferent material. Sounds kind of futuris-
have enabled game players to run that leaves that polygon at any point tic, right?
around in a world complete with reflec- on its surface. Likewise, the Gouraud It is not as far out as you think. Shad-
tions, shadows, dynamic lights, and an shading model is a series of parameters ing languages have been around for
impressive amount of texture detail. that controls the interaction of the quite a while. The first, and still most
As I write this, QUAKE 3: ARENA has lights in the scene with the color and commonly used, is Renderman. First
been unleashed upon the world. This roughness of the polygon surface. The described in the late 1980s, this render-
impressive game takes real-time render- power of a shader language, however, ing language has been used to create
ing technology to a new high. Once goes way beyond what we have tradi- some of the most memorable computer
again, the graphics capabilities of this tionally done with real-time 3D render- graphics scenes of all time, including
game {Do you mean as each of id’s ing. Since a shader describes the color the recent movie Toy Story 2. While it
games has done before it? } stretch leaving the surface of polygon, it can may seem that we are a long way from
real-time rendering to its limit, bringing be used to generate a complex pattern creating scenes this complex for real-
even the latest “graphics processing of colors without texture maps. time games, you may be surprised.
units” to their knees. QUAKE 3 also Most of you are familiar with proce- Listing 1 describes a Renderman shad-
marks the industry debut of program- dural textures. This is where a texture er that creates a checkerboard pattern
mable “shaders,” which are used for map is created by some form of mathe- on a surface. The shader takes three float
describing the look of a real-time ren- matical formula instead of being drawn variables and two colors and creates a
dered image. in an art package. Procedural textures checkerboard of any size and frequency.
A shader is a form of programming are commonly used for patterns such This is done without any texture map.
language that describes the look of a as noise (like TV “snow”), lava, water, For a checkerboard, this may not seem
particular surface in a rendered world. marble, or fire. UNREAL implemented very impressive; however, it’s the idea of
In its most abstract sense, it is a func- procedural texture techniques for sev- controlling the look of an individual
tion that is given a series of properties eral effects used throughout its envi- pixel on an individual surface that
and then returns the color of the light ronments. This allowed the designers makes Renderman so powerful. A shader
leaving any position on the shaded sur- to have a nearly unlimited variety of doesn’t need to be as simple as a
face. Normally, the properties given to certain types of textures without hav- checkerboard. Shaders can be used to
a shader include such things as the ing to store all those bitmaps on the create all kinds of surfaces, everything
lights in the scene, the color of the sur- game CD. However, the textures still from highly-detailed wood, marble, and
face, and some measure of the rough- needed to be generated in order to load fire to even a moldy cue ball (my
ness of the surface. them onto the 3D card for rendering. favorite Renderman shader).
Game programmers and artists don’t Wouldn’t it be nice if those textures A closer examination of the checker-
normally think of the rendered world never had to be generated at all? What board shader reveals that the only other
thing the shader really needs to know
When not ditching work to catch the latest animated feature film, Jeff can be found about is the position of the view and
at Darwin 3D trying to convince clients that things can’t look any better. Tell him the lights in the scene. Interestingly,
how wrong he is at [email protected]. the new generation of 3D graphics
hardware such as Nvidia’s GeForce 256

http://www.gdmag.com FEBRUARY 2000 G A M E D E V E L O P E R

 GRAPHIC CONTENT

keeps these positions in hardware With human characters, on the other

already. I can’t help but think that the
Welcome to Toon Town hand, the story is entirely different. In
hardware manufacturers are thinking of
the implications in the same way that I
am. I don’t know how long it will take,
I have lamented before in this column
that creating 3D characters is very
difficult. I can take some comfort from
my experience, as a 3D computer-gener-
ated human is rendered in an increas-
ingly realistic manner, it paradoxically
but I am going to dust off my Render- the fact that even Pixar, with its terrific looks increasingly strange to viewers.
man Companion and start thinking Renderman shading system and all the They can’t really say why it looks odd,
about how to integrate programmable money and talent possible, has trouble just that it’s not quite right. This is espe-
shaders into my art production path- getting human characters right. They cially noticeable when the texture maps
ways. Since I can’t really see envision have hit upon one of the great ironies for the character faces are created from
many artists learning to program Ren- of computer graphics. When rendering photographs of real people.
derman, I think there are going to be a 3D environments, the technology has Particularly frustrating is the fact that
lot of tools that will need to be created. enabled increasingly realistic final people are able to look at a stick figure
However, until I get my ultimate shader images. With each advance in model- performing an animation and appreci-
language written, I am stuck with the ing or lighting, the images take a step ate the lifelike motion. However, when
traditional texturing and lighting meth- closer to what we see around us in the that same motion is applied to a syn-
ods to get the results I want. real world. thetic 3D character, those same people
get hung up on the look of the
L I S T I N G 1 . A Renderman checkerboard. character. They no longer
2 regard the motion of the char-
// acter as realistic simply
// Shader: Checkerboard Shader because it looks “odd.” If the
// Arguments:Diffuse and Ambient Coefficient character is a monster or some-
// Number of squares thing else nonhuman, this
// Two colors to alternate problem seems to go away.
// Well, that’s great if you’re cre-
surface checkerBoard( ating a shooter filled with
float Kd, Ka; // Specular and Ambient Lighting mutated zombies and uncon-
float frequency; // Number of Squares trollable robots. However, if
color c1, c2 // Two colors you’re creating a realistic scene
) filled with average people,
{ you’re in trouble.
// S and T vary from 0 - 1 across the surface This observation has led me
float smod = mod(s*frequency,1); // Interval in S direction to think that for now, at least,
float tmod = mod(t*frequency,1); // Interval in T direction the focus for real-time 3D
characters should not be on
// Ci is the output color trying to achieve realism. In-
if (smod < 0.5) { // Odd Columns stead, we should be looking at
if (tmod < 0.5) approaches to creating stylized
Ci = C1; // C1 Square characters. Perhaps Disney had
else the right idea. For years, its
Ci = C2; // C2 Square artists have seemed to under-
} else { // Even Columns stand and appreciate this para-
if (tmod < 0.5) dox. They were able to create
Ci = C2; // C2 Square very realistically painted back-
else grounds full of color and
Ci = C1; // C1 Square depth. For the actual charac-
} ters, though, they still rely on
simple pen-and-ink drawings.
Oi = Os; // Opacity out = opacity in Even when the first fully CG
character was introduced in a
// ambient() returns ambient light value Disney animated feature, the
// diffuse(N, I) returns the sum of lights from magic carpet in Aladdin, it was
// incident vector I and surface normal N rendered in a style that
Ci = Oi * Ci * ( matched the traditional meth-
Ka * ambient() + ods. With this in mind, is it at
Kd * diffuse(faceforward(N,I)) ); all surprising that 3D animat-
ed series such as Mainframe
// Ci is final color Entertainment’s ReBoot and
} Beast Wars focus on robotic
and animal characters?

G A M E D E V E L O P E R FEBRUARY 2000 http://www.gdmag.com

 faces, but this method has the benefit of identifying the
actual edges that define the silhouette. This could be useful
if I wanted to apply some other effects to the silhouette
lines. But for now, I want to look for a faster way that makes
use of my existing 3D hardware.
I can start by drawing the front-facing polygons with tex-
ture. I can then draw the back-facing polygons in line mode.
Since the Z-buffer is already filled for front-facing pixels, the
only pixels drawn will be those pixels along the edge. How-
ever, in order for this to work, I need to set the depth test so
it draws pixels that are at the same depth as those in the Z-
buffer. In OpenGL, this setting is glDepthFunc(GL_LEQUAL). This
gives me a rendering algorithm like this:
1. Draw front facing textured polygons
2. Set depth test to LEQUAL
3. Draw back facing lines.
Or in OpenGL:
glPolygonMode(GL_FRONT,GL_FILL); // Draw Filled Polygons
F I G U R E 1 . Our original character, outfitted with textures glDepthFunc(GL_LESS); // Don’t draw shared edges
created from photographic scans. glCullFace(GL_BACK); // Draw front facing polygons only 3
DrawModel(); // Call my draw routine
glPolygonMode(GL_BACK,GL_LINE); // Draw Lines
Losing a D glDepthFunc(GL_LEQUAL); // Draw shared edges
glCullFace(GL_FRONT); // Draw back facing edges only

P erhaps it is time to look at using 3D technology to create

much more stylized animations instead of realistic ones.
This technique, called non-photorealistic rendering (NPR) in
DrawModel(); // Call my draw routine
You can see the result in Figure 4. The first frame shows just
the resulting silhouette lines and the second frame shows
academic circles, has emerged as a strong research field at the combined image.
industry conferences such as Siggraph. That means there are With this technique, I can use OpenGL to enhance the
plenty of fresh, steaming piles of research to get me started. effect. I can make the lines thicker or even anti-alias the lines
The character in Figure 1 was created using textures creat- with alpha blending (or even anti-aliased hardware lines, if
ed from photographs and scans. I wanted to get something available). It is even possible to make the lines pop out off the
much more stylized, so we had another model and set of
textures created with a cartoon kind of look in mind. You
can see the results in Figure 2. This character is much more
typical of the kinds of characters you may see in a 3D game.
However, it doesn’t quite capture the 2D look I had in mind.
For one thing, the shading implies too much depth. The
maps really need to be reduced to only a few colors. This is
no problem to do in any image processing program as you
can see in Figure 3. This is much closer to the idea of a car-
toon rendering. However, the image is clearly missing the
bold outlines that characterize cartoon images. To create
those lines, I need to turn to some technology.

GL to the Rescue

T he first lines that I need to create are the silhouette lines.

These lines define the outline of the character. On a 3D
model, the outline of a model is defined by the model’s edges.
Intuitively, I know that a silhouette edge must occur when an
edge connects a polygon facing forward and a polygon facing
backward. This can be expressed mathematically as:

(N • (V − E))(N • (V − E)) ≤ 0
1 2

where Ni are the two face normals for the adjacent polygons,
V is a vertex on the edge, and E is the eye point. When this F I G U R E 2 . A more styl- F I G U R E 3 . Reducing the
statement is true, the edge is part of the silhouette. ized, cartoonish version of depth of colors gives a
As you can imagine, this would be a rather time-consum- the character. more 2D look.
ing process on a model that had any significant number of

http://www.gdmag.com FEBRUARY 2000 G A M E D E V E L O P E R

 GRAPHIC CONTENT

model using
glPolygonOffset(). Howev-
er, this can lead to a
mess, so you need to be
careful.
Another approach
that may make cleaner
lines requires the use of
an extra pass and the
stencil buffer. In this
technique, the algo-
rithm is:
1. Draw front facing
textured polygons
2. Set draw mode to
stencil only
3. Draw front facing
edges in line mode
4. Draw back facing
4 lines where stencil
is set.
This will ensure that
only edges that are F I G U R E 4 . To complete the cartoon look of the charac- F I G U R E 5 . Finally, shading is added
shared front and back ter, black outlines were added with OpenGL. with our lighting model.
are drawn. However,
since the stencil buffer
is not commonly available across con- Some Shadier Business tain threshold, ε, the vertex is shaded
sumer hardware, it may be wise simply with the “dark” color. Otherwise, the
standard color is used. The ε value can
to test for it and use it when possible.
In addition to the silhouette lines, I N ow that I have a nice method for
creating cartoon-style characters
probably want to add interior lines that with silhouette lines, I need to think
be changed to allow for more or less
shading on the character. You can see
define changes in the material of the about shading. Applying typical the results of this shading in Figure 5.
character. This cannot really be done Gouraud shading to these characters
easily with just rendering tricks. This would ruin the effect I am trying to
requires a pass through the object to achieve. I need to change the lighting The Squashy and Stretchy Show
detect edges that share polygons with model to make this work.
different materials. These edges are
marked as material boundaries and are
drawn after the render. Luckily, the
In the Gouraud shading system, the
angles between the viewer, light, and
surface normal are used to determine
I think these techniques provide a
new way of thinking about real-time
3D animation. It’s a classic example of
material edges are not viewer-depen- the shade of the vertex. For my simple embracing your limitations. There is
dent so they can be calculated only cartoon rendering, I only want two lots of room for experimentation and
once as a preprocess. shades for each material, light and exploration. Creating the ideal texture
dark. In order to do this, I need to cal- to work with non-photorealistic render-
FOR FURTHER INFO
culate the vertex colors myself. The for- ing will require some creativity on the
Siggraph 1999 had an entire course on mula I applied is: part of artists. Some experimentation
Non-Photorealistic Rendering. If you are (N • (V − E)) < ε
V
with brush patterns and other artistic
styles might be interesting as well.
interested in the topic you should defi-
nitely get the notes or the courses CD: where NV is the vertex normal, V is the Another intriguing idea would be to
“Non-Photorealistic Rendering,” Course vertex position, E is the eye point, and apply some of the soft-body deforma-
17 (Siggraph 1999, ACM Siggraph). ε is the shading threshold. This is very tion techniques that I described in my
similar to the silhouette-detection for- March 1999 column to the models
• Markosian, Lee, and others. “Real- mula. However, in this case, when the (“Collision Response: Bouncy, Trouncy,
Time Non-Photorealistic Rendering,” result of the formula is less than a cer- Fun”). These new squishy objects can
be rendered using NPR techniques to
Proceedings of Siggraph 97. New
York: ACM Siggraph, pp. 415–420.
Acknowledgements get a real Road Runner feel. For this
Thanks to Lisa Washburn at Vector month, play around with the simple
• Uphill, Steve. The Renderman Com- Graphics (http://www.vectorg.com) and cell shader and begin exploring the
panion. New York: Addison Wesley, Tom Knight at Imagination Works (http:// world of the less-than-realistic. Grab
1990. www.imagination-works.com) for the the source code and the application
models and textures used in this article. from the Game Developer web site at
http://www.gdmag.com. ■

G A M E D E V E L O P E R FEBRUARY 2000 http://www.gdmag.com