You're Singing My Toon: Cartoon Style Nonphotorealistic Rendering in Macromedia's* Shockwave 3D


"When you see a comics rack, even at a distance of ten to fifteen feet, you're overwhelmed by the energy and the grossness and the vulgarity and the pure vitality that's spilling off that material." Gil Kane quoted in The Comic Book in America, page 29.

While much of 3D graphics research has been devoted to creating photorealistic images, many artistic styles intentionally veer away from realism to add a special emphasis, evoke a different emotion, or just for fun. Cartoonists, for example, use a set of techniques to create exciting and immersive visual experiences that often have little association with reality, visual or otherwise. Bugs Bunny* does not look anything like a rabbit, and it's really hard to render a believable superhero costume. By using simplified representations and bold colors, the animator draws the audience into the story and suspends the need to adhere to mundane details like gravity and broken bones.

The Toon modifier, developed in Intel Labs and included in Macromedia's Director 8.5 Shockwave Studio* provides easy-to-use nonphotorealistic rendering (NPR) techniques. In addition to novel visuals, Toon's simplified rendering style frees the developer to focus on modeling only the important elements of her animated world. Because Toon is a well-integrated piece of Shockwave 3D's engine, one can use NPR in conjunction with the other features, including bones-based animation and multiresolution mesh technology.

The Toon modifier temporarily converts the model's current shaders from standard to painter type. The other properties remain the same, so the model's colors will be consistent, but the rendering style will be change. When Toon is removed, it changes the shaders to standard and restores the model's original appearance.

In this article, we will:

  • Introduce the NPR techniques implemented in Shockwave,
  • Describe how to use Toon,
  • Explain how Toon interacts with other Shockwave technologies, and
  • Provide some example uses of Toon


Overview of Technique and Implementation

Illustrators often draw cartoon character with a limited amount of detail. Usually, objects are filled with bold colors. Hard shadows, often a darker shade of the normal color, give shape and contour cues. The toon modifier attempts to duplicate this simplified "two-dimensional" appearance.

To create the toon effect, first look at how models are normally rendered. For smooth shading, colors are interpolated across the surface of the model to give shape information. Equation 1 gives an example of how to determine the color value at a vertex using ambient and directional lights. The intensity of the color varies depending on the position of the light and the orientation of the surface.

Diffuse shading. The product of the light's color value determines the diffuse color and the mater ials color value and scaled by the dot product of the surface normal and a unit vector pointing to the light from that surface.

The toon style has a simpler appearance because it uses a limited number of colors. For toon shading, you create a one-dimensional texture that stores the colors that you will use for the model. For two colors, a shadow color, CS, and an illuminated color, CI; use:

You can vary the composition of the texture so that more or less of the model is in shadow, or you can add more colors to create a smoother look or a highlight.

The texture coordinate for each vertex is . The angle between the surface normal and the light determines the texture coordinate just as in smooth shading the angle determines the color intensity.

Inking is a technique that emphasizes the important details of the model by marking certain contours and boundaries. While the toon style shading removes detail from the model, the inking process reintroduces detail and depth cues. Inking will emphasize three kinds of edges: silhouette, boundary, and crease. To determine which edges to mark, the inker looks at the faces that share an edge. A silhouette edge has one face facing toward the eye and the other facing away.

The inker can also mark crease edges where the angle between face normals is greater than some threshold and boundary edges where an edge is used for one face, or when the faces that use that edge have different material properties.

Toon in Shockwave 3D

Shockwave3D exposes Toon shading through the toon modifier or the combination of the inker modifier with a shader of type painter. The toon modifier changes the shader type of all of a model's shaders to painter and allows access to the inker and painter properties. Using the toon modifier is a little simpler, but creating a painter shader and adding the inker modifier allows a little more flexibility. For instance, the software renderer does not draw lines, you can remove the inker modifier to avoid the unnecessary calculations and improve performance.

Painter styles and properties


The painter shader is implemented with three styles: black and white, toon, and gradient. The black and white style uses only black and white, toon uses a highlight color and a shadow color, and gradient uses 2, 4, 8, or 16 colors for shading calculations.

black and white                             toon                                      gradient

Shadow strength and highlight strength

The shadow strength is used in calculating the shadow color. Increasing the shadow strength increases the shadow color intensity. The property is not used with the black and white style because the shadow color is always black.

Shadow percentage and highlight percentage

For black and white and toon styles, the shadow percentage changes the amount of the object that is considered in shadow. The texture used for the color has 4 texels and these properties determine how many texels have the shadow color and how many have the highlight color. Normally, the texture is half shadow color and half highlight color. Because there are only 4 texture elements available, the useful values are 0 to 24, 25 to 49, 50 to 74, 75 to 99 and 100. Using these properties can be confusing at first because, while the sum of the shadow percentage and highlight percentage is clamped to 100, it may be less than 100.

The toon style bases the color calculations on the highlight percentage, and the black and white style bases the color on the shadow percentage. For example, with the shadow percentage property and the highlight percentage property both set to 0, the object will be all shadow color for the toon style, and all highlight color for the black and white style. These properties do not affect the color distribution for the gradient style.

Color steps

This property changes the number of colors used for the gradient style. The gradient will linearly interpolate from the shadow color to the highlight color using 2, 4, 8, or 16 colors. The default value is 2.

Inker properties


The rgb color value for the inker used to draw the inker lines. The default is black.


Makes the inker draw the silhouette of the model. The silhouette edges are those that have one face pointing toward the camera and one face pointing away. The silhouettes property is true by default.

Creases and creaseAngle

Creases is a Boolean property that tells the inker if it should mark edges, where the normals of the faces that make up that edge for an angle are greater than that specified by the crease angle property. The creaseAngle property varies from ?.0 to 1.0. If the cosine of the face normals is less than the creaseAngle, that edge is inked.


If true, the boundary proper ty tells the inker to mark all edges that belong to only one face or belong to faces that use different materials.

lineOffSet and useLineOffSet:

The lineoffset property designates how far away from the edge the inked line will appear. Positive values move the line closer to the camera; negative values move the line farther away from the camera. The lineOffSet property is turned off by default.

Using Toon with other Shockwave Features

Highly tessellated, smooth models will give the best result with Toon. The inker lines and the painter shader's transitions from highlight to shadow can be jagged for low-resolution models. Also, when exporting the model, the model must contain the neighbor mesh information for the inker to function. To save space, one can ignore the texture coordinates, since only the painter shader's texture will appear on the model when the toon modifier is active, and the toon modifier generates its own texture coordinates.

Generally, Toon works well with the other modifiers in Shockwave 3D because most of the calculations for the painter and inker are done for each frame. However, one must be careful with that the mesh deform modifier does not change the face compositions, or the edge information that the inker needs will be incorrect. Subdivision surfaces (SDS) modifier cannot be used with the inker or toon modifiers because SDS creates new edges that the inker cannot take into account.

The closest eight lights will contribute to how a model is shaded. With Toon, only one nonambient light contributes to the highlight color, while all possible ambient lights will contribute to the shadow color. Toon treats all nonambient lights as directional lights.

Sample Toon Effects

Glowing models
Below, the pyramid monster is lit by an eerie Masonic glow. To achieve this, one can use a low value for the ambient property of the shader, rgb(0,20,0), and increase the shadowstrength to 100. This increases the intensity of the shadow, but the highlight color remains the same because of the low intensity of the actual ambient property of the shader.

Playing with lights (limit to 8 ambient and only closest non ambient Used for Toon, can make special lighting effects local to each model)

Emphasizing Model geometry with the Inker
This technique is useful for technical illustrations. Here, we've created a box and set the box's shader's blend property to 50. Against the dark background, the box loses definition. Adding the white inker lines defines the box much more clearly. Changing the line color to something darker will create a more subtle effect.

Mixing Shader Types
Here we've added a painter shader to the head, and left a very shiny standard shader on the eyes to emphasize them over the rest of the head.


With a little practice, one can achieve high-quality nonphotorealistic rendering with the Toon modifier in Macromedia's Shockwave 3D.

About the Author

After dropping out of a Computer Science program, Dave Bookout received a BA in English from Purdue University. A few years later, he started another Computer Science program, but dropped out to work for a dotcom. He was promptly laid off. From there he worked with Intel on the Macromedia* Shockwave 3D project as a software quality engineer, a.k.a. the annoying guy with lots of questions. He continues to ask questions.
