TechNote (Archived)

3D approaches in the Macromedia Flash and Shockwave Players

Introduction

"3D art" is very popular, but that term can be used to describe very different things. This overview describes the three main animation approaches used for "3D" in browsers, and contains a few important tips for each approach.

Three types of techniques

The three most common ways to do show 3D imagery in browsers include:

Prerendered stream: The 3D scene is entirely rendered to pixels during design, then it is put in a sequential animation format, such as QuickTime, GIF animation or page flipping. The only thing sent from the server to the browser is a sequence of pixels, a frame at a time. The animation is linear. Although the animation may jump from section to section, the interactivity is generally low.
2D sprite animation: Individual 3D objects are pre-rendered to vectors or pixels at design time, then imported into Macromedia Flash or Director as sprites. These graphics have 2D animation techniques applied to them: movement, scaling, clock-like rotation. More interactivity is possible, because this pre-rendered 3D art is treated just like any other art in Shockwave or Flash.
Realtime 3D rendering: The description of a 3D scene is downloaded,then fully rendered at runtime on each client machine. The viewer can pick up objects and rotate them in any way, as desired, because the artwork is created on demand. This method requires faster computers, but offers a separation of data and presentation. This method supplies the scene data at runtime and allows the computer to calculate how it should appear. The Shockwave Player can be extended with realtime 3D renderers in this fashion.

These three approaches, prerendered streams, 2D animation of prerendered sprites, and full 3D rendering, take increasing amounts of processing power. They also offer increasing levels of interactivity. Depending on the content, you may also see a decreasing file size as the approaches become more advanced.

Tips for prerendered streams

Rendering the entire scene frame-by-frame in a 3D program is usually a bit expensive to send over the net. The file size usually increases with each extra pixel in width and height of the imagery, and with the duration and number of frames per second of the animation. Reducing screen area, frame rate and duration can help reduce the total data size.

Compression can also help reduce file size. In addition to per-frame compression methods, some video codecs and animation formats can offer frame-to-frame compression. Studying your compression format can direct design strategies to minimize size. For example, GIF animation transmits each frame as the smallest rectangle enclosing all changing pixels, so four spinning objects in the center of the animation usually result in a smaller file than the same spinning objects at the corners of the animation. Some MPEG implementations offer predictive motion vectors for macroblocks, so that camera pans are easier. Studying your compression format can yield design tips, and studying the design may suggest compression formats.

Prerendered pixel streams usually perform better in the Shockwave Player than in the Macromedia Flash Player. Shockwave is a fixed-resolution display, and one pixel of source imagery usually corresponds exactly to one pixel of screen area. The Macromedia Flash Player is inherently resolution-independent and scalable, and fixed resolution bitmaps may need to be resized at runtime. This sometimes causes blurring, as high processor costs can result in a sacrifice of quality or speed. (The QUALITY attribute in the HTML can control the anti-aliasing techniques used by the Macromedia Flash Player.) The Shockwave Player also typically offers faster frame rates, and can use streaming QuickTime and similar formats.

Summary: If the 3D animation is completely rendered at design time, then studying the compression method can help. The Shockwave Player offers better performance with pixel-based imagery.

Tips for 2D sprite animations

This is the most common approach today, because it usually combines moderate file size with moderate interactivity and moderate processing requirements.

File size is related to the number of sprites, and to the file size of each sprite. Consider displaying a spinning globe in the Macromedia Flash Player, made up of a sequence of prerendered globe snapshots: If there are fewer snapshots then the file size will be smaller... a six-image loop will download faster than a smoother twelve-image loop. If the globe is rendered as pixels then file size will increase with screen area; if the globe is rendered as vectors then file size will increase with detail.

(More information on this subject is available in "Macromedia Flash for Videographers and 3D Animators".)

Carefully check the file size for each sprite. If you're rendering each object snapshot to pixels (as in GIF, JPEG, or bitmap images), overall image area and compression ratio is important. If you're rendering to vectors, or using Macromedia Flash to autotrace rendered pixels to vectors, carefully optimizing the curves and reducing fine lines or gradients can reduce the size of each sprite's description.

When using 2D sprite animation upon pre-rendered 3D objects, you can reuse these sprites indefinitely at very little additional cost. The instructions to move the object are usually far, far smaller than the pixel-based or vector-based descriptions of the object. You can move a symbol up or down, left or right. The symbol can be resized vertically, horizontally or both. It can also be rotated on the axis through the screen. Many instances of the same artwork can be onscreen simultaneously.

Look for ways to use repeating image cycles: if the spinning globe sequence is packaged as a Director film loop or Flash movie clip, then this entire sub-animation can be moved across the screen, rotated, scaled and skewed.

It is difficult to give new views of an object with this method, because every 3D view of an object must be rendered at design time and sent down from the server. This is why it's difficult to show an object rotating on the horizontal axis: it would require new renderings of the object to flip it around and see its back. However, it's easy to rotate on the axis between the eye and the monitor (clockwise/counterclockwise), because the object does not need to turn around.

Summary: When using 2D sprite animation techniques upon prerendered 3D objects, carefully consider the number of renderings, and the file size of each. Both the Macromedia Flash and Shockwave Players can use these techniques successfully.

About realtime 3D animations

This approach is still rare, but promises to offer the most flexibility. A small description of the world is downloaded to the visitor's browser. Scenes are then rendered on demand, a frame at a time.

Because nothing is prerendered, objects can be rotated in any direction. The camera can move, to show entirely different views of the same scene. Surface, lighting and even geometry detail can be changed interactively, giving great control over how the scene is displayed.

Data is separated from appearance -- the scene can be based on real-time database feeds. The computer generates pixels based on your instructions. In a way, this is similar to the distinction between XML-formatted data and stylesheets for display.

The various VRML plug-ins were an early example of this approach. In the late 1990s various single-object renderers started to appear. In August of 2000, Intel, Macromedia and others announced the Shockwave 3D initiative, which promises high-performance rendering of full worlds with a widely-distributed player.

With this method, objects can be described by primitives, modeled meshes or algorithmically generated data. Multi-resolution meshes allow for the streaming of large models and appropriate levels of rendering details. The subdivision of surfaces allow for additional detail can be created on-the-fly in the client browser. There are various optimization techniques that will be available for different situations.

(The Shockwave Player is extensible: it can be extended to use new media types, new logic routines and commands. You can even add new plug-in renderers. These Xtras can be auto-installed and the entire player can be auto-updated. This extensibility is one reason why the Shockwave Player is larger and more platform-specific than the Macromedia Flash Player. The Macromedia Flash Player is designed to have a small footprint, be fast starting and allow easy portability to new devices.)

Summary: Realtime 3D rendering has been tested since browsers first became popular, and is now on the verge of real and practical acceptance. Although this requires much computer power to render in realtime, the file size and interactivity benefits make this a very attractive method of 3D design.