Swift 3D: Vector Animation for the Web | 2 | WebReference

Swift 3D: Vector Animation for the Web | 2

Swift 3D: Vector Animation for the Web

You can break up the different categories of fill rendering styles into two main categories: Flat Fills and Gradient Fills. Flat fills give you five options: Cartoon Single Color Fill, Cartoon Average Color Fill, Cartoon Two Color Fill, Cartoon Four Color Fill and the Cartoon Full Color Fill. All of these options have one common feature – only flat colors are applied to your objects. To give you an idea of what they look like, below are several images of a film reel rendered with the different fill effects.

Note: When rendering your objects, scenes, etc., be aware that if you’ve built your scene using textures or bitmap materials, the underlying material properties will be used. In the following examples, the film reel initially had material properties of a mustard yellow, which looked hideous after rendering. Changing the color to a gray tone improved the result.

Cartoon Single Color Fill

Above left is a basic Cartoon Single Color Fill. Although it exports very small files, often the quality of resulting image is less than desirable, as you can see. Depending on your output requirements, this fill might be enough if you want the look of a real cartoon, but you might need Outlines (as in the image on the right, with a black hairline and high edge definition at 45 degrees) to give your objects and/or characters more definition. Specular highlights and shadows are also useful.

Cartoon Average Color Fill

The cartoon effect of the Single Color Fill may be the look you're after, but as you can see, the Cartoon Average Color Fill creates a more realistic appearance (with this image) than the Single Color with Outlines. And to bolster the effect you can add shadows, specular highlights and reflections to build a sense of depth in your scene.

Cartoon Two Color Fill

According to the Swift 3D manual, this export format is the next step up in quality. Because there is more vector information going into the file (additional fills), your files will be larger than the Single Color Fill option, but if you compare them side by side, you may find the sacrifice to be worthwhile. But as you see in the above image, the gray has been broken into two distinct areas of color.

Cartoon Four Color Fill

With this option, Swift 3D MAX 2.0 is calculating each surface's relative angle to the light sources, and filling in four different colors on each surface according to the calculations. Here, file size begins to become an issue. Depending on the length of your animation and targeted audience, you may find Cartoon Four Color Fill to be a little too heavy. Also, as in the Two Color Fill, the surface of the film reels has a somewhat mottled appearance.

Cartoon Full Color Fill

According to the manual, this export format is about as realistic as you can get without actually applying gradients. What Swift 3D does here is to choose a custom shade of the material and then apply it to every single polygon. It's still applying flat fills, but in a very detailed manner.

Gradient Fills

Here, you have two options, Area Gradient Shading and Mesh Gradient Shading. These files apply vector gradients to your objects. These are useful for high detail levels, but be aware that file sizes will definitely increase. Area Gradient Shading works well with models that are more geometric in nature (a combination of flat and smooth surfaces).

Mesh Gradient Shading applies a linear gradient fill to each polygon in your scene. The reason for doing this is scalability. A vector output would look great at any size, but a bitmapped image will begin to break apart (become pixelated) as it is increased in size.

Note: With both forms of gradient fills, you can enhance the effect by placing your lights closer to your objects.


Created: June 5, 2003
Revised: June 5, 2003

URL: http://webreference.com/3d/column2