3-D Animation on the Web: Creating 3-D Animations

Creating 3-D Animations

3-D animation is a world unto itself.

3-D animation is a world unto itself, and there is no reason to pretend that even a talented and experienced computer graphics professional is going to pick it up from an article, or even without a very considerable creative and technical effort. For those interested in going down this exciting route, however, we can provide some very useful guidance.

In 3-D computer animation, the application does the "in-betweening" between key events.

3-D graphics is divided into modeling and rendering. Modeling means the creation of the 3-D objects in abstract space--defining both their geometry and their surface characteristics. Rendering is the process of creating a bitmap image which is effectively a "photograph" of the object (or scene of many objects) taking from a given perspective under defined lighting conditions. 3-D animation is created by rendering a sequence of bitmaps and moving or otherwise changing the objects between each rendering. In traditional hand-drawn animation, a storyboard of key frames is drawn by the chief artist, and the assistants do the "in-betweening" by drawing the connecting images. In 3-D computer animation, the application does the "in-betweening" between key events. In the simplest case, for example, an object is placed at one point in 3-D space at 0 seconds and is placed at another point at 1 second. If rendered at 15 frames per second, a sequence of 15 bitmaps is produced, each with the object 1/15th further along the distance from the start point to the end point.

The creative mind shivers as it comes to grip with the possibilities.

But 3-D animation is not limited to movement of objects. The camera can move. The lights can move, change color, or change intensity. The geometry of the objects can change. Their surface character, called "shading," can change, meaning color, pattern, texture, reflection, highlight, transparency, luminance and all those visual clues that cause us to identify the apparent material from the object is made (e.g. glass, metal, wood). The creative mind will begin to shiver as it comes to grip with imaginative possibilities opened by such options.

3-D Software

The 3-D applications universe is divided fairly sharply into two tiers. The upper tier consists of applications oriented toward the well-established film and television effects industry. The big names are Alias/Wavefront, Softimage, Lightwave and Electric Image. These high-end products are not only very expensive, they each take an enormous commitment to master and are totally unnecessary for making little GIF animations for Web purposes. 3-D Studio Max for Windows NT is on the borderline, an expensive product but something the more ambitious web animator might be willing to invest in with an eye to the future. For the rest of us though, the choice must be made between the range of products that cost well under $1,000 and are designed to run well on a Mac or a Pentium, rather than an SGI workstation or DEC Alpha. Though there are a number of products out there, the choice for the beginner, in my view, comes down to Fractal Design's Ray Dream Studio and Macromedia's 3-D Extreme. Both of these are produced by large, established companies that are going to be around for a while and offer a range of compatible products. Ray Dream Studio, the application I use, is available for Windows (95 and NT), Macintosh and PowerMacintosh, and costs $300. Fractal offers a number of plug-in products that I haven't tried, and a companion 3-D paint program called Detailer which I have just begun to use. Detailer incorporates Fractal's extremely impressive bitmap editor features from Painter and brings the 3-D artist a real taste of the kind of tools that make things like "Toy Story" possible. 3-D Extreme (for both Mac and Windows) can also be found for about $300. Although I do not know the product firsthand, it has an excellent reputation. People with a print graphics background (like myself) tend to gravitate toward the Fractal Design products (which they know from Painter), and people entering 3-D from a multimedia background think of Macromedia first. All the information is at www.fractal.com and www.macromedia.com.

3D Hardware

I work on an old 90 Mhz Pentium on Windows 95, and it's good enough. But faster is better when you're rendering animation because each little frame takes time, and time is money. The process of animating is one of constant testing and experimenting, and the faster you get your results, the more you can experiment in a given period of time. I have 24 MB of RAM and this is the bare minimum, and would be completely inadequate for anything larger than the tiny animations that we are now considering.

The Right FPS

The animations we are concerned with are small enough in pixel dimensions that they can ultimately be run at 12 frames per seconds with satisfactory smoothness. The larger the image space, the faster an animation must run to avoid noticing jumps. At 12 fps, our loops will run anywhere from 12 to 24 frames. In such a short time span there is no room for playing around. There must be a strong concept--a geometric deformation, a color change, a dissolve, a striking reflection--something that can happen quickly yet impress.

Free modeling the part most likely to cause frustration.

Geometric modeling is done in two basic ways. The application will provide a certain number of geometric primitives (a sphere, a cube, a cone, etc.) which can then be resized and deformed. It's amazing what can be done with simple primitives if you experiment, especially by combining them. The application will also provide some kind of free modeling tool, and this is the most sophisticated part of the software and therefore the part most likely to cause frustration. Ray Dream Studio uses the extrusion concept of modeling where you start with a two dimensional closed curve or polygon, and then "pull it out" into 3-D space. For example, a circle extruded becomes a cylinder. This methodology is not as limiting as it first sounds because you can contour and redirect the extrusion as you pull it out.

The ability to separate the two-dimensional surface of an object from the object itself is so uncanny that the viewer feels a pleasurable sense of magic and continues to watch.

Modeling, however, is of less practical importance than shading. Our animations are far too small in pixel dimensions to support complex geometry. But even the simplest geometry is fascinating if it has been beautifully shaded. This example demonstrates imaginative shading of a simple primitive, an icosohedron grabbed right from the application without any modeling. The whole object is first wrapped with a custom designed bitmap, as you might wrap a Christmas present. Then a second, smaller and independent bitmap is placed on the next layer. For half of the cycle, the two bitmaps are locked together on the spinning object. For the other half, the little bitmap breaks free and moves independently on the surface. The effect is that of a leaf floating on a stream, resisting the current, then being pulled away. The ability to separate the two-dimensional surface of an object from the object itself is so uncanny that the viewer feels a pleasurable sense of magic and continues to watch. The reflection that flashes each cycle not only reinforces the magical feel, but also confirms the sense of a solid object in 3-D space. Note also the combination of white and yellow lights to create more color variety on the surface of the object and a sense of warmth.

An Example

To get a feel of 3-D animation, let's look at the development of a simple concept, as best as one can remember what is frankly a fluid process. I had been playing with loose spirals. Rotating spirals are enormously effective animated designs, as witness the age-old striped barber pole. The spiral shape below was modeled by extruding (pulling out) a 2-D circle into a longish cylinder, then twisting the path along which the extrusion was made. Then I duplicated the spiral to make a pair, making one the mirror of the other. I came up with an interesting shader that reminded me of tiger stripes, or a campy "jungle" look.

I grouped the two spirals together to make a single object with a single center. They could then be rotated around a common center. The rotation was interesting, but there was not enough magic to it, so I created a new key event in the middle of the loop in which the spirals were significantly shrunk.

Now there was more magic because as the spirals danced around their common center, they gradually contracted and expanded with each loop, suggesting compressing springs and elasticity. At this point, my little daughter showed up and suggested that they looked like spider legs. I took it from there. The "legs" should be gripping something, as a spider seizes a fly. I started with the easiest thing, which was a sphere, then flattened it into a kind of lozenge and shaded it as I had the legs.

Now came the work--testing, experimenting with different timings and placements until there was a sense of mechanical connection. After many passes I created the impression that "arms" were physically gripping and turning the lozenge like a crank or a ratchet wrench.

This is called kinematics in animation.

This sense that objects in an animation are actually acting on each other is both very effective and very tricky to achieve convincingly. Each object is actually "doing its own thing," but the human eye will try to find mechanical cause and effect where possible. This kind of work is called kinematics in animation, and in traditional Disney character animation, is generally achieved through a kind of elastic quality. A character may, for example, compress like a sponge in response to a punch before bouncing off to create the sense of cause and effect.