Click here to support our advertisers
SOFTWARE
FOR SALE
BOOKS
FOR SALE
SEARCH CENTRAL
JOB BANK
CLASSIFIED ADS
DIRECTORIES
REFERENCE
TRAINING CENTER
JOURNAL
NEWS CENTRAL
DOWNLOADS
DISCUSSIONS
CALENDAR
ABOUT US
Journal:
Get the weekly email highlights from the most popular online Journal for developers!
developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
All Categories :
VRML
Chapter 5
Creating and Embedding Simple 3D Animations
-by Kelly Murdock
CONTENTS
Animation by Moving the Camera
Animation by Moving the Models
Working with Paths
Animating Materials
Creating GIF Animations with the GIF Construction Set
Client-Pull Animations Using the <Meta> Tag
Workshop Wrap-up
This is the chapter where you make the bold move from photographer
to movie director. Animation is more than just moving objects;
it's a visual language and one that we all identify with because
it mimics real life.
In the last chapter, you learned to set up scenes and create 3D
images. Now suppose in that same scene, you move the camera a
little bit and capture another image. If you keep doing this and
link all the images together, you end up with an animation. Even
easier than that, 3D packages have ways to automate the movements
within a scene. In this chapter, you'll cover various ways of
creating animations with 3D packages and how to embed them in
your Web page. Here's what you'll accomplish in this chapter:
Create animations by simply moving the camera, also known
as a camera fly-by.
Animate models by using keyframes. Keyframes are the
beginning, intermediate, and ending model positions. Once the
computer knows these, it will happily generate all the in-between
positions.
Learn to work with paths.
Create special effects with animated materials.
Learn to embed your 3D animations as GIF animations with the
GIF Construction Set.
Learn to use the client-pull and server-push methods for adding
3D animations to the Web.
You'll be surprised how easy it is to create animations; the difficult
part is already behind you. So round out your skills in using
these 3D packages and learn how you can display them to the world
over the Web. Maybe this is the start to your earning an Oscar.
For this chapter, you'll use trueSpace again. You should be feeling
comfortable with this product by now; trueSpace does a good job
with the animation basics, and it's easy to learn to use. There
are several advanced animation techniques that other packages
have, but you'll explore them in Chapter 9,
"Creating Advanced 3D Animations for the Web."
Animation
by Moving the Camera
Animations can be created very simply from a scene that's already
set up by moving the camera around the scene. This is usually
called a camera fly-by. In the previous chapter, you learned
how to navigate objects. To perform a camera fly-by, you simply
move and rotate the camera, but it's really even easier than that.
Because the computer knows the location of all objects in the
scene and their relationships to each other, all that's necessary
to animate a scene is to position the camera at the locations
where the animation should start and end. These positions are
known as keyframes.
If you want to move the camera through an intermediate position,
then you can do that, too. Just tell the computer where the camera
looks at which frame. The computer can then generate all the intermediate
frames automatically. Take a look at this example:
Set up your scene by loading your model and background. For
this example, a model of the Chrysler building and a sky background
are used. Place a camera in the scene, open a new View window,
and set it to the camera view. Position this camera to the first
frame of the animation.
Click the Animation tool in the Animate Group. This opens
the Animation panel that lets you control the animation frames.
Notice that the current frame is set to 0.
Make sure the camera is selected, then enter 30
in the Current Frame Number field and hit the Enter key.
Reposition the camera to show the final frame of the animation
in the camera window. Frames 1-29 are computed automatically at
points between the first and last frames.
To see the animation, click the Play button in the Animation
panel. The animation will be shown in the active window in either
Wireframe or Solid Render mode, depending on which setting is
active in the View Group.
If you're happy with what you see, then click the Render Scene
to File button in the View Group to open the Directory dialog
box. Give the file a name and select the type of file you want
to save. Select the animation resolution and make sure the All
Frames option is set and the Frame Rate is set to 30, then click
OK.
Tip
The type of file you save your animation as really depends on the way you intend to use it on your Web page. In trueSpace, you can save animations as a series of images (BMP, TGA, or JPG) or as a video file (AVI, FLI).
If you intend to embed your animations as animated GIF or client-pull animations, then save your file as a series of images. trueSpace automatically attaches a number at the end of each image. Therefore, the first frame is file0000.jpg, the second file0001.jpg, and so on.
In Figure 5.1, you can see Frame 17 of a camera fly-by of the
Chrysler Building. Figure 5.2 shows how the animation progresses.
In the background window, you can see the camera and lights.
Figure 5.1: Creating a camera fly-by past the Chrysler Building by specifying the first and last keyframes.
Figure 5.2: Frames from the Chrysler Building fly-by animation.
Tip
If your animation is one that loops continuously, make sure the beginning and ending views of the animation match. This makes the animation run smoothly as it loops.
That's all there is to it. However, being able to move only the
camera for fly-bys is rather limited and can grow old quickly.
Luckily, trueSpace offers many other means of animating not only
models, but even materials, so move on to find out more.
Animation
by Moving the Models
Another way to produce animations is to keep the camera stationary
and move the models. Although this method is slightly more complex,
the animations are made the same way, by using keyframes. Take
a look at how this is done in the following example.
Tip
Of course, you can still move the camera around as objects move in the scene. A powerful technique is linking the object to a moving object with the Look At tool in the Util Group, then moving the camera independently.
After loading your models, you need to determine what needs to
be animated. For the helicopter in this example, it wouldn't look
right if the main and tail rotors didn't spin, so start there:
Move through the hierarchy until you've located the main rotor
and switch to the Top view. First, you need to make sure the rotor
will rotate around the center of the blades. Click the Axis button
in the Util Group. The rotor will be dimmed, and the axes associated
with the rotor will be white. Move the axis to the center of the
rotor, then click the Axis button again to return to the rotor
object.
With the axes centered, click the Animation tool button and
enter 6 for the Current Frame
Number. Click the Object Rotate button and spin the rotor about
160 degrees, using the right mouse button.
Caution
You may be tempted to rotate the rotor beyond 180 degrees, but if you do, the rotor will spin backward to that position. The computer always takes the shortest path between two keyframes.
Next, enter 12 as the
Current Frame Number in the Animation panel and rotate the rotor
another 160 degrees. If the rotor starts to stray, then the rotor's
axis is still misaligned. In that case, go back to Step 1 and
line up the axes. Repeat this step, incrementing by six frames
each time until you reach Frame 30.
Now that you've completed the keyframes for the rotor blades,
you should have noticed that the rotor center is separate from
the blades. Repeat the previous actions for the rotor center,
and use the blades to line up the rotor center.
Once you've got the rotor set, switch to the Perspective view
and click the Play button to see how the spinning rotor looks.
Now switch to the Left view and zoom in on the tail rotor.
Repeat the previous steps for the tail rotor and blades, but set
your keyframes every three frames because you want the tail rotor
to spin faster.
Select the entire helicopter and enter 30
for the Current Frame Number. From the Top view, move the helicopter
a good distance toward the top of the screen. Click the Rotate
Object button and rotate the helicopter slightly.
For a realistic touch, set a keyframe at 10 and rotate the
helicopter about 20 degrees so that the nose is down; this adds
a slight tilt to the helicopter in the Left view.
Finally, load the sky background image in the Render Options
panel. Next, make a cube to represent some land below the helicopter
and move it left in the Top view to simulate the moving ground.
Frame 1 of the animation should look like Figure 5.3.
Figure 5.3: A helicopter that flies into the distance. This example shows how moving parts can be animated.
There are quite a few techniques in this example, such as moving
axes, setting multiple keyframes, and animating object parts.
It can be some work, but look at the flexibility you've gained.
Using these simple techniques, you can animate any 3D model. Take
a look at the finished animation in Figure 5.4.
Figure 5.4: A frame-by-frame look at the helicopter animation.
Working
with Paths
Any moving object has an associated path. These paths are standard
splines and can be saved and loaded from the Path Library. Occasionally,
you can edit these paths without having to reset keyframes.
Splines are beneficial because of the power and control you have
in manipulating them. Each spline has several control points that
define its curvature. By selecting these control points, you can
alter the way the curve looks. Each point also has handles, which
change the way the curves approach and leave the control point.
Handles can be set to make the control point a sharp point or
a smooth curve.
Perhaps the best use of paths in trueSpace is attaching them to
cameras. This allows you to save your favorite camera movements
to be applied wherever you want.
Now to the example. In this example, you'll use a path to create
an abstract tube, then match the tube with a camera on a similar
path that will fly through the tube:
Start by placing a camera, then attach a path to it by clicking
the Path button in the Animate Group. trueSpace will go into Spline
Drawing mode. Click around in the view to set control points.
The spline will automatically be drawn between the points you
select. Click the right mouse button to make the curve a complete
loop.
When you've finished your path, click the Play button in the
Animation panel. The camera will move along the path. This looks
nice, but it would be helpful if you could see where you're going.
Click the Look Ahead button in the Animate Group, then click the
Play button again. The Look Ahead button realigns the camera so
that the lens is always facing forward.
Open the Path Library, which is a button in the Lib Group,
and click the Add Path to Library button. This adds the path you
just drew to the Path Library under the name Anim.
Next, you need something to move through. Click the Regular
Polygon button in the Model Group to open the Poly Modes panel.
Enter 16 in the Set Number
of Edges field at the bottom of the panel, which gives you enough
edges to represent a small-diameter circle. Next, click in the
Perspective view and drag the mouse until you have a small 2D
circle about the size of the camera.
Rotate the circle 90 degrees so that it's perpendicular to
the reference grid.
Click the Sweep/Macro button in the Model Group and make sure
the new Anim path you created is selected in the Path Library
panel. The path will be attached to the circle you created. Change
to the Left view and rotate the path so that it lines up with
the grid.
Once the path is lined up, click the Sweep/Macro button again
to create a tube that looks like the path, with the circle for
a cross section.
Shift back to the Top view and select the camera object, then
click the Path button in the Animate Group to show the linked
path. Rotate and move the camera and its path until it lines up
on the tube you created, as Figure 5.5 shows.
Now you're ready to create the animation. Apply a material
to the tube, choose a background color, and switch to Camera view.
My example has a slightly transparent red tube with a texture
map and a blue background, so the tube looks purple.
Figure 5.5: Lining up the camera with its linked path to the tube created from the same path.
The number of frames in this animation depend on the number of
points in your spline. Figure 5.6 gives you a small sampling of
this animation, but to see the whole thing you'll need to go to
the CD-ROM. The one I created had 140 frames, so you might want
to create this as an AVI file. In the next chapter, you'll learn
how to deal with AVI files by using plug-ins.
Figure 5.6: How about a waterslide in space ? Using the same path to create a tybe and link it to the camera, it's easy.
Animating
Materials
Not only can you animate cameras, lights, and models, but with
trueSpace you can animate materials on the surface of your objects.
This is done by applying a material to an object, then applying
a different material at a later keyframe. As the animation progresses,
the surface material changes from one material to the other.
You can also apply materials to designated rectangles that are
projected on top of the model. The materials for these rectangles
can be different from the model's base material. These material
rectangles can be animated as well. Think of how a model of a
television set could use an animated material rectangle:
Load the model of a television set (the television set was
taken from the TrueClips CD-ROM that ships with trueSpace) and
move through the hierarchy until the television's front screen
is selected.
Click the Material Rectangle button in the Render Group. The
Material Rectangle panel with several controls appears.
Click the New button and a small rectangle will be selected
in the center of the television screen. This rectangle can be
moved and scaled by using the Move and Scale buttons at the top
of the Material Rectangle panel.
Move the material rectangle so that its upper-left corner
matches the upper-left corner of the television screen. Next,
scale the rectangle so that the upper-right corners match and
the rectangle's lower edge falls about two-thirds of the way down
the height of the television screen.
Bring up the Animation panel and enter 30
as the Current Frame Number. In the Material Rectangle panel,
move the rectangle up so that the bottom edge of the rectangle
and the television set match.
Finally, select a material for the material rectangle, and
you're done.
The final animation is difficult to show as a figure because the
animated material is just a series of blue lines that scroll up
the screen (I guess this television set is broken). Figure 5.7
shows the scene as it's being created with the material rectangle
in the middle of the television screen.
Figure 5.7: Using material rectangles to animate materials on objects. Here you can see static on the television set.
Creating
GIF Animations with the GIF Construction Set
There are several ways to embed animations in your Web page. With
3D packages, you can create your animation as either a video format,
like AVI or QuickTime, or as a series of images, like JPG, BMP,
or TGA. In this section, you'll see how to use each of these formats,
starting with using animations saved as a series of images.
GIF animations are easy to use because they don't require using
plug-ins or special HTML tags. The browser interprets GIF animations
the same way it does regular GIF images, so to embed GIF animations
you can use the standard <IMG SRC>
tag. When the image loads, the images are loaded in successively
to create the animation effect. The trick is to create the image
in such a way that the frames of the animation line up.
Luckily, there's a simple package that makes it easy to line up
the animation frames. The GIF Construction Set is an easy-to-use
shareware program, created by the people at Alchemy Mindworks,
that automates this process. Try using this program to create
a GIF animation of your tube animation from the earlier section:
The successive images for the animation were created as a
series of TGA images, which will work well with the GIF Construction
Set. Start the program, and you'll see a dialog box interface
with buttons along the top and menu items.
Create a new file by choosing the File | New command. The
program will place a header at the top of the list. The dimensions
listed in the header determine the size of the image. You can
change the dimensions by double-clicking on the header and entering
the new dimensions.
Click the Insert button and select Image from the pop-up menu.
This brings up a Directory dialog box.
Find and select all the images associated with the animation.
You can hold down the Shift key to insert multiple images at once.
A dialog box opens, letting you specify how you want to control
the palette conversion. For each image, select the Use a Local
Palette for This Image option. You also want to select the Use
This Setting For All Remaining Images option to load all the images
at once.
When all the images are loaded, click the View button to see
the animation, then save the file.
Figure 5.8 shows the GIF animation for the tube you created earlier.
Figure 5.8: The GIF Construction Set is used to create GIF animations from a series of images created by trueSpace.]
Embedding the GIF animation is no different than embedding a regular
GIF image. The browser will load the different frames automatically.
Figure 5.9 shows a sample Web page that uses a GIF animation.
Figure 5.9: A simple GIF animation is used to animate the logo for the Cookie Construction Company.
Client-Pull
Animations Using the <Meta>
Tag
The idea behind client-pull animations is to load an HTML page,
then load another page right over the top of the first, and continue
in this manner until the animation is finished. Some people are
opposed to client-pull animations because of the strain they can
put on the client.
As you can guess, it's probably not a good idea to use a lot of
frames for an animation of this type. It works well for small
files like logos and such. The steps below show you how to create
a client-pull animation.
Create a simple animation and save the images as a series
of JPG images.
Build an HTML page with the image displayed somewhere on the
page using the <IMG SRC="logo1.jpg">
tag. Save the file as logo1.htm.
Within the <HEAD> tag,
include a <META> tag
that looks like this:<META HTTP-EQUIV="refresh"
CONTENT="1; URL=logo2.htm">
With the HTML file still open, change the <IMG>
tag so that it displays the second frame of your animation, and
change the <META> tag
to open logo3.htm and save
the file as logo2.htm.
Repeat this process for all frames of the animation.
When the browser encounters the <META>
tag, it gets a message to fetch the second HTML file in the series.
This continues until the last frame of the animation, where no
<META> tag is needed.
Server-Push Animations
Server-push animations are accomplished in the same way
as client-pull animations, except the server is in control of
sending the series of HTML pages down. The other difference is
that a program residing on the server is needed to control the
action. These programs are usually written as CGI scripts that
reside on the server.
With the ever-changing nature of the Web, these two techniques
are slowly being discarded as cheap, dirty, old methods. They
are "cheap" because they don't require much work; "dirty"
because they task the machines, are inefficient for creating animation,
and seldom produce smooth results; and "old" because
they've been around for a while. Newer methods are quickly replacing
these old dogs, and Chapter 6, "Using
Animation Plug-Ins in Your Web Page," covers a number of
them. I suppose these methods could be modified, but you can't
teach an old dog new tricks (sorry, I couldn't resist).
Workshop
Wrap-up
With this chapter, you've earned the final letter in RMA packages-animation.
You've learned about several key concepts of animation that should
apply to all 3D packages, and you now have the means to create
Web pages with dynamic animations.
Next Steps
I hope you're still anxious to move on because there's still more
to learn.
To learn what to do with the AVI and QuickTime movies you've
had your 3D packages spit out, check out the next chapter, Chapter 6,
"Using Animation Plug-Ins in Your Web Page."
You haven't exhausted the animation realm, either. Advanced
animations are covered in Chapter 9, "Creating
Advanced 3D Animations for the Web."
If you're ready for VRML, you don't really need to read the
stuff in between. The VRML sections start from the basics in Chapter 13,
"Exploring VRML Browsers and Development Tools."
Q&A
Q:Do I have to use a 3D software package to create animations?
A:No. Traditional animation uses 2D images that are changed slightly from frame to frame. These techniques work fine, but tend to be more time-consuming than the animations produced by 3D software packages.
The chief benefit of 3D packages is that the computer can calculate in-between images without requiring the artist to redraw every image by hand because it knows the relationship of all objects to each other.
If you decide to use a 2D animation package, look for one that has onion skin features. This lets the adjoining images show through onto the current image, which will help you line up the images
Q:Are there any 3D packages that can create animations as GIF animations, without requiring you to use another package like the GIF Construction Set?
A:We all know that the Web has sneaked up on us. Many software vendors are working to incorporate export capabilities for their products; in time, you'll likely see such features.
Two products have recently appeared that are focused on producing 3D graphics for the Web. If you're a PC user, check out Asymetrix's 3D Web product; you can use it to create animations as GIF animations. For Mac users, there's Specular's 3D Web Workshop product.
Q:What's the difference between 3D animations and video? It seems like it would be easier to record something with a camera than to generate and animate a scene. Which is best for the Web?
A:These are really two very different technologies. Video is real-time and photo-realistic; as such, it requires very large file sizes for low-quality videos. However, there are many places on the Web where video would be the better choice, such as an interview. It would take far more time to animate a person talking than it would to simply push the record button. On the other hand, it's a little difficult to take a video of aliens on the planet Mars.
3D animation does take some time to set up the initial scene, but many images can be created with computer graphics that would otherwise be impossible (or very dangerous) with video techniques.
What's best for the Web depends on what you really want to do. If you plan on having a person talk about a new product, use video, but if you want a space animation with special effects, use 3D animation-and don't rent the space shuttle!
Use of this site is subject to certain
Copyright (c) 1996-1998
EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.
Please read the .
Contact with questions or comments.
Copyright 1998 Macmillan Computer Publishing. All rights reserved.
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl