3-D Animation on the Web: The Web Developer's Perspective | WebReference

3-D Animation on the Web: The Web Developer's Perspective

The Web Developer's Perspective

Very satisfactory 3-D animated GIFs can range from 30 to 100 KB.

The web designer who appreciates the value of 3-D animated loops now asks some practical questions about file sizes and platform support. Very satisfactory loops can be created in animated GIF format in the range of 30 to 100 KB. Because they are GIFs, the frames begin to appear immediately so the space on the page does appear blank while the image file is loading. Many developers will say that they don't want any of their pages to be larger than 30-50KB, inclusive of all text and graphics. But good 3-D animations, simply because of their commanding visual presence on the screen, necessarily foreclose a lot of other competing graphics on the same page. The animations need clean, empty space in which to operate and be effective. In short, the tasteful and effective use of these files on home pages will limit the file size of the entire page package.

3-D graphics applications produce video files (Microsoft's AVI or Apple's Quick Time) in the first instance. Video files are the ideal format for animated loops because they run with perfect smoothness and because the file compression technologies ("codecs") are already very good and getting better fast. But a single video standard has not yet won out, and until it does, the choice of one format over another will rule out a significant share of the audience, or will force users to use plug-ins that they may not choose to download. In the near future, streaming video will be standard and both file format and file size limitations will be moot. Right now, we are talking about 30-100KB animated GIFs, viewable already on the vast majority of installed browsers (including even the AOL 3.0 Webcrawler).

Video to GIF89a Conversion

Video files can be converted to animated GIFs using GIF Construction Set and Microsoft GIF Animator. I run my 3-D graphics application, Fractal Design's Ray Dream Studio on a Pentium-Windows 95 system, and the output is AVI video. I use Microsoft GIF Animator to convert to GIF format. This utility (if such a word should be used to describe such a capable little application) supports only AVI and GIF files, and therefore Macintosh users must use GIF Construction Set to convert their Quick Time video files. I have no experience with GIF Construction Set, but GIF Animator can hardly be easier to use, especially for someone coming from something as intimidating as 3-D modeling and rendering applications. The AVI file is loaded into GIF Animator and all of the individual frames are presented in numbered sequence. All of the frames are then selected at once and a duration is assigned in 1/100 seconds. 8/100 is the equivalent of about 12 frames per second and works fine with animations in a small pixel space. I typically render my original videos at 15 fps, and then slow them down a bit in GIF format to the 12 fps rate. Remember, you can always slow things down, but you can't always speed them up effectively.

Once I have set my frame rate, I select the looping option. I get fine results using the default "browser palette" and "error diffusion" options. I never fool with the image size in conversion utility. Instinct warns the experienced digital artist to always create the original graphic in the desired dimensions, and thus my AVI videos are always rendered in the exact intended size. My GIF files, produced in this simple manner run well on an amazing range of browsers, including the Microsoft beta browser for the Macintosh.

GIF89a Pros

The use of animated GIF files instead of the original video has both positive and negative consequences. On the positive side, individual GIF frames are easy to edit and retouch in any bitmap editor. The 3-D rendering process can often produce small artifacts that need to be cleaned out, and sometimes a few frames could use a line thickened or a color darkened. And, of course, extensive 2-D images (animated or not) can be composited with the 3-D images for some very spectacular effects, a la Space Jam. Another positive aspect of the GIF format is the ability to time the duration of the individual frame, something that is impossible in video. In the original video, static periods are created by repeating the same frame (at necessary file size cost), but a GIF animation can simply hold a single frame for whatever duration is desired, reducing the frame count. Flexible control of individual frame duration also allows the animator to experiment with timing and rhythm without re-rendering the animation.

GIF89a Cons

The downside aspects of using GIFs are largely blurred by other practical restraints. To create loops significantly smaller than 100KB, the image size must be in the range of 80 to 125 pixels square. Thus the fact that GIF images are limited to a maximum 256-color palette does not often produce serious color degradation of the original videos. In larger images (those in excess of 200 x 200 pixels) conversion to 8-bit color can be very disappointing--but such large images aren't practical now anyway, and by the time they are, we'll all be using video files instead of animated GIFs. Along the same lines, GIF animations don't run as smoothly as videos. In the small pixel frames were are considering, this is not a serious problem, but in larger frames, the individual frames become irritatingly noticeable. Smoothness is very important to the aesthetic appeal of animation, and especially to animated loops.

Shockwave and VRML

Given cross-platform capacity of animated GIFs, there is little reason to convert animations to Macromedia's Shockwave format. VRML is often mentioned as a vehicle for 3-D animation, and undoubtedly some fascinating things have been done with it. But VRML is much more appropriate to creating interactive 3-D experiences rather than animations that run on their own. In any case, very few people at present have the specialized 3-D processors (such as GLINT) needed to make VRML browsers really effective.

Comments are welcome


Created: Jan. 14, 1997
Revised: May 11, 1997

URL: http://webreference.com/dev/3d/dev.html