-by Kelly Murdock
If you've added some 3D elements to your Web page and pushed your 2D tools to their limits, but you still think your Web pages are lacking, then you might need some real 3D images. It's tricky to say "real 3D" images because all images seen on the computer screen are still two-dimensional, so it's clearer to say that this chapter deals with images created by using 3D RMA (Rendering, Modeling, and Animation) packages. You will use these packages in this chapter to create what are known as stills, or still images. Still images are simply images that don't move. If you're anxious to get into animation, hold your horses-you'll get into animation in the next chapter.
In this chapter, you learn to set up 3D scenes by placing 3D objects called models, dressing up those models with materials, and positioning lights and cameras, just as a real photographer does. With the 3D scene setup, you can quickly reshoot images from different viewpoints without redrawing the entire scene. More specifically, this chapter covers the following tasks:
From the looks of this list, you have a ways to go, so begin with an overview of 3D RMA packages.
Many 3D packages are available, and they span a wide range in cost and performance. It's beyond the scope of this book to cover all of them, but a good starting list can be found in appendix A, "3D Software Resource Guide."
These 3D packages allow you to model objects-that is, to build three-dimensional representations of objects; to render images, which means to calculate the effects of models' lights, shadows, and positions; and to animate images, meaning to move the objects over time.
For the examples in this chapter, you will focus on two packages: Caligari's trueSpace, currently in the 2.0 version, and Ray Dream Studio. Both these packages fit into the midrange price level at around $500, yet have surprisingly powerful features. Before you put your money down, play with the demo versions on the CD-ROM to decide whether these packages are right for you.
One of the first lessons in the 3D world is coming to grips with the multitude of views. If you go to a museum and look at a picture of a fire hydrant hanging on the wall, you see it from only one viewpoint. You can walk to the other side of the room, walk up close, or even stand on your head, but the image is still the same.
If you walk outside the museum and look at a fire hydrant on the street, the image you see changes as you move about it. From behind it you see a shadow, on top of it you see a circular dome, and to the side you see where the firehose connects. This is the key advantage of working in the 3D world. Once a scene is created, an infinite number of images can be created just by changing the viewpoint.
In the 3D world, you deal with a third axis, the notorious Z-axis. Using this Z-axis allows your objects to go forward and back and can also make it tricky to line up various objects. An object can look like it's right next to another in one view but actually be in the far distance, as it is in Figure 4.1. In the upper-left image, the words front and back seem to be side-by-side, but in the next three windows, you can see as you rotate around that there's some distance between the two.
To handle the relative positions of objects, many 3D packages deal with four viewpoints at the same time: top view, right view, front view, and perspective view. This allows the user to quickly look at the objects in relation to one another.
The 3D package trueSpace starts with only one window set to the Perspective view, but new views can be selected by clicking and dragging the View button in the View Group. There are several preset views, including Top, Left, Front, Perspective, and View from Object.
The View Group also includes the Eye tools, which let you move,
rotate, and zoom the viewpoint. If you click one of these buttons,
they toggle on. You are then in that mode until you select another
tool. Click on the Eye Move button and drag the cursor in the
main window. Notice how the grid moves up and down and forward
and back with the mouse. The up and down directions are controlled
by dragging with the right mouse button.
| Note |
In trueSpace, a default grid is placed in the scene to help you orient your models. It doesn't show up in the rendered image. |
Another tool in the View Group allows you to open new windows,
which have their own View Group buttons for navigating around
the view.
| Tip |
When you start changing your view in trueSpace, you can easily get lost, but two other View Group tools can help you when you start. The Reset View button restores your view to your original starting point, and the Look At Object button automatically positions your view so that the selected object is in the center of the screen. |
It's great that you can control the views of your scene, but what are you supposed to see? Why, models of course, so now you'll see how to find some.
Now, if you have a 3D rendering piece of software and you're ready to go, the first thing you need is a model. Models are to 3D packages what paint is to a painting.
The simplest models are called primitives, which include objects like cubes, spheres, and cones. These primitives are usually built into the software and can be dropped into a scene with a single command.
In trueSpace, primitives are placed in a scene by using the Primitives Panel. Click the tool button, then click on the primitive you want to place. The object shows up in the center of the window.
Complex models can be created from these primitives by combining them in different ways or by distorting their shapes. Different packages have different methods of modeling objects, but before you delve into modeling, take a look at where you can borrow ready-made 3D objects.
The first place to look is on this book's CD-ROM. Several companies
make 3D models, so a sample of their products is included on the
CD-ROM.
| Note |
Just as there are different image formats, such as BMP and JPG, there are also several different 3D file formats. The native AutoCAD format (DXF) is probably the most widely supported one for Pcs. Almost every 3D package has its own proprietary file format. Other useful formats include Wavefront (OBJ), 3D Studio Binary (3DS), Lightwave (LWO), trueSpace (COB), and Ray Dream Designer (RD4). |
Once you've explored the models on the CD-ROM, then move on to the Web, which offers a plethora of models. The first place to visit is Avalon, a huge repository of 3D models, textures, and utilities available in the public domain. Avalon used to be located at the China Lake Naval Base until it was taken over by Viewpoint. It can now be found at the following site:
http://www.viewpoint.com/avalon/
Viewpoint regularly archives the entire collection and makes it available on CD-ROM for a nominal cost.
Besides maintaining the Avalon site, Viewpoint is a premier model-generating company; many of the sample models on the CD-ROM were graciously donated by them.
Another great site is the 3D Café, found at this location:
http://156.46.199.2/3dcafe/
There's some overlap with the Avalon site, which is to be expected, but there are also some new models.
Once downloaded, these objects can be loaded into your 3D package. In trueSpace, use the File | Load command to bring up a dialog box for selecting the downloaded model's location. Depending on the object's format, you might need to specify some import options.
| Tip |
Don't think you have to use only free models. Companies like Viewpoint offer a wide variety of models they sell as collections, or you can even commission them to custom-build a model for you. If you're working for a client and have the funds, models made by the real pros are worth the money, saving you the time needed to build the model yourself. |
Before you move on, one more good model site is supported by Richard Tilman. Mesh Mart can be found at this site:
http://cedar.cic.net/~rtilmann/mm/index.htm
It offers a good assortment of models and textures and is another mirror to the Avalon site.
Once imported, objects can be moved, rotated, and scaled in a scene. In trueSpace, these three navigation tools are located in the Nav Group to the right of the Object tool.
Just as you can move the viewpoint around, you can use similar tools to control the individual objects within the scene. In trueSpace, use the mouse's left button to control two axes and the right button to control the third axis. It's a good thing you don't work in four or more dimensions because you'd run out of buttons!
For example, select your model by clicking the Object tool, then clicking on the object within your scene. The object turns white to indicate that it's the currently selected object. Next, select the Object Move tool. Dragging with the left mouse button while you're in the Perspective view moves the model left and right or forward and back. Clicking and dragging with the right mouse button moves the object up and down, depending on the coordinate system you've selected.
You can also constrain the object to move only along certain axes
by clicking and holding the right mouse button on the tool. This
brings up the Coordspanel where you can toggle the axes on and
off.
| Caution |
As you saw in Figure 4.1, it can be tricky to line up objects in three dimensions. When you place objects, be sure to check the alignment from more than one view. |
The Coords panel also includes buttons for selecting the coordinate system; in trueSpace, you can select between Object, World, and Screen coordinate systems. The coordinate system alters which movements are controlled by the left mouse button and which are controlled by the right. It can be difficult to mix and match coordinate systems, so it's best to discover which one is easiest for you to use and stick with it.
The Navigation tools move, rotate, and scale objects around the object's origin point, which is the center of the object for new primitives. For example, if you rotate a sphere, then it spins around the object's center point, but if you move the origin point, then the object rotates around the origin's new position. This origin point can be moved, rotated, and scaled just like any other object. To see the origin point, click the Axis button in the Util Group.
Also in the Util Group are tools that help you restore your object if you get lost. The Normalize buttons align your object according to the World coordinate system, and the Move Axis to Center of Object button does just what it says-it can be invaluable if you get confused about where your origin point is.
If you've searched high and low through the available models but just can't find the right one for your creation, then the next best bet is to find something that's close and modify it as needed.
Most 3D packages have a number of features to help you with your
task. The first is the scaling command, mainly used to control
the size of your models. This alone doesn't do much for you, because
size in the virtual world is all relative. A model of an airplane
is perceived as such when positioned next to an airport, but placed
next to a teddy bear, you see it as just a child's toy.
| Tip |
To scale an object along all axes simultaneously, hold down both buttons while dragging the mouse. This increases or decreases the object's overall size equally in all directions. |
Scaling becomes interesting when done on only one part of an object or along only one axis-this is called non-uniform scaling. Using this technique, not only can square boxes become rectangles, but a model of a man can become a clown by enlarging the size of his feet disproportionately, or a car can turn into a limosine by stretching its midsection.
So how can scaling help you modify a model? If you right-click the Scale tool and toggle off two of the axes, then by dragging the mouse, the object is scaled only in the one remaining axis. Try an example by following these steps:
Using this method, I lengthened the park bench model to accommodate a couple of families, rather than one or two people. Pretty nice of me, wasn't it? The original bench is seen back to the left, and the new bench is in the foreground of Figure 4.4.
Figure 4.4: Using non-uniform scaling, the park bench was lengthened to hold more people.
Another common technique for modifying your models is surface
deformation. Other 3D packages call this method sculpting
or planar distortion, but it's all the same basic idea.
Surface deformation alters an object's surface by moving, rotating,
or scaling a point, line, or polygon face on the object.
| Note |
Most 3D packages are polygon-based, which means that their models are composed of a series of polygons. I say "most" because some 3D packages use splines or patches, as Animation Master does, but I'll save that for Chapter 8. |
Surface deformation can be an extremely useful feature for creating new models from existing models or primitives. Take a look at how this is done in trueSpace:
| Caution |
The Quad Divide and Smooth Quad Divide tools increase the number of polygons by four times each time they are used. This also increases the overall file size of your model, so use it cautiously. |
Recall for a moment how you make sugar cookies. You roll out the dough, then press in a cookie cutter that cuts the shape out of the dough. Similar types of operations are possible in the 3D world-they're called boolean operations.
Three common boolean operations-Union, Subtraction, and Intersection-apply to any overlapping areas of two objects. The Union operator joins overlapping areas, the Subtraction operator removes overlapping areas, and the Intersection operators remove everything except the overlapping areas.
Suppose you want to model an apple with a bite taken out of it. If you position a sphere primitive so that it overlaps the surface of the apple model and use the Subtraction boolean operation, then the area that overlaps is removed. You're left with a big bite taken out of the apple, and you don't even have to worry about digestion!
These operations are key to building complex models. The trueSpace modelers typically use primitive shapes and these boolean operations to get the model close to where it needs to be, then finish the details by sculpting the surface. Combined with the other techniques, you can model just about anything. Look at an example that uses boolean operations:
Figure 4.6: Examples of the Union, Intersection, and Subtraction boolean operations.
The techniques in this section form some of the basic modeling features found in trueSpace. There are several more advanced features for modeling, and you'll delve into some of them in Chapter 8. However, trueSpace's method of modeling isn't the only game in town, and there's more than one way to skin a cat, so without anymore clichés, let's get down to brass tacks and take a brief look at Ray Dream's approach to modeling.
Now that you've seen the basis of modeling in trueSpace, take a look at how Ray Dream Studio tackles the problem. Ray Dream Studio builds models from 2D lines in a modeling module called the Free Form Modeling Window. This technique gives you precise control over the model's surface but can be confusing. To simplify using it, the package has a Modeling Wizard that automates the building of some basic models.
The Modeling Wizard steps you through the process of building simple models by offering you choices in various windows. You will use the Modeling Wizard to generate a spring, which is a difficult modeling task by hand.
Figure 4.7: A spring created with Ray Dream's Modeling Wizard.
Any model created with the wizard can be edited by double-clicking on the model. This loads the model into the Free Form Modeling Window where you have complete control over the model's geometry and control paths.
You've now learned how to find, edit, and build models. Along the way, you might have noticed that some models are made up of several different parts. These different parts are not only key to building complex yet organized models, they also allow you to animate parts independently once you get to the animation section.
Models with several different parts combined are organized into a hierarchy, which is just a way of organizing various parts that make up the whole. Think of that classic gospel song, "the foot bone's connected to the leg bone…." You naturally want all the fingers grouped together in the hand group.
Look at the Object tab in the Time Line Window of Ray Dream for the model of a Viper (the car, not the snake) in Figure 4.8. What you see is the hierarchy for this model. This tells you at a glance how this model is put together. Notice also that the hierarchy includes elements of the scene, such as scene lights and cameras, and that the similar object parts are grouped together-the lights group is broken down into headlights and fog lights. This helps when you start applying materials and colors to certain parts of the model. With a hierarchy, it's easy to specify that, for example, all body parts get painted red and all windows and lights are made out of glass.
Figure 4.8: The hierarchy of the Viper model is shown in the Model window.
| Note |
In trueSpace, the Navigation tool (which shows up as an arrow pointing down) lets you move around the hierarchy. The selected object shows up in white, and all other objects are brown. With the left- and right-arrow keys, you select objects in that same level; the down-arrow key moves you further down into the current object. To set up hierarchies in trueSpace, use the Glue tool. Glue as Sibling makes objects equal rank in the hierarchy, and Glue As Child makes the object you point to a child node under the currently selected object. The Unglue command, of course, breaks the object from the hierarchy. |
Once your model is built and you're happy with it, you can render the object. Switch back to trueSpace and look for the Render Object button in the View Group. If you render the objects you've built so far in this chapter, it will probably look pretty plain-that's where materials come in. Applying materials to models helps enliven your models, much like a new coat of paint on the old red wagon.
In trueSpace, you'll find materials stored in libraries, which can be accessed by clicking the Materials Library button in the Lib Group. After selecting a material in the library, it can be applied to the entire model, to an object in the model by navigating the hierarchy, or to a single polygon. Try practicing by dressing up a model.
For this example, I've selected a stormtrooper's helmet taken from the collection of Star Wars models done by Harry Chang (http://www.loop.com/~hhc/starwars.html). Harry has some beautiful models, and he hosts a collection of Star Wars-specific models that's worth checking out.
The finished stormtrooper helmet with applied materials is shown in Figure 4.9 next to the original model.
Other tools in the Render Group let you paint individual polygon faces or vertices or paint over existing materials. The Inspect tool can be used to access and load the selected material into the Material Attributes panels, where they can be edited to create new and interesting materials.
You should notice that I called these "materials" and not just "colors" because materials have many more properties than just color. The following list describes some of the common properties materials can use:
In addition to material attributes, there are several special operations that the render engine picks up when determining how to draw the object. They are controlled by the Shaders/Maps panel.
In trueSpace, you also have property panels for controlling the values of all these properties. They are used to create new materials that can be saved and applied to models. Try enhancing your current model with some wild colors you'll create yourself:
To round out your collection of pianos that would make Liberace jealous, in Figure 4.10 you have the original piano with original materials, a texture map piano, a wood grain procedural map piano, a blue glass piano, a bump map piano, and finally a red marble piano.
The material-editing capabilities native to trueSpace are great, but one of the greatest benefits of materials is the ability to use additional texture maps created externally and imported.
Using Paint Shop Pro, Photoshop, or Fractal Design Painter to create texture maps lets you add a specific look to your model. Take a look at how this is done using the tiled ivy background you created with Fractal Design Painter in Chapter 3, "Adding Simple 3D Elements to Your Web Page." You'll apply this pattern to get a floral look for the loveseat:
| Tip |
Using tiled patterns for texture maps makes the final image look much cleaner because there are no seams in the pattern covering the surface. |
| Caution |
Using the wrong type of projection causes the texture map to smear or run across the surface. For example, applying the ivy texture to a cube will look fine on the front and back faces, but will smear the edges of the texture across the side faces. |
Suppose your model is complete, materials have been added, and you render your model. What do you get? Nothing but a black screen. Well, not exactly. To prevent this tragic occurrence, trueSpace automatically adds a default light to a scene when you start. However, if there were no light, you wouldn't see anything.
The point is that lights are a necessity, but they can be so much more than that. For starters, there are several different types of lights; trueSpace has three types:
Lights essentially have two properties: brightness and color. They can also be positioned anywhere in the 3D scene, even within objects. For instance, placing a light inside a semitransparent model makes the model seem to glow. Follow these numbered steps to try using lights in trueSpace:
The final scene is shown in Figure 4.12. Notice how some light spreads throughout the scene, such as the green highlights on the inside of the car. This is the tricky nature of working with lights.
Navigation around any 3D world is tricky. If you find a shot that looks just right, a good way to remember the spot is to place a camera. Cameras give you another window through which you can look at your scene.
Cameras have the unique ability of being invisible in the final rendered scene, so they can be positioned anywhere without affecting the output image. Both lights and cameras can be moved during an animation sequence, but details on that are covered in Chapter 5, "Creating and Embedding Simple 3D Animations."
Notice in Figure 4.12 that a camera was used to get a close-up picture of the stoplight. To place a camera in the scene, follow these steps:
Cameras are also very useful in capturing a final image. Before you actually capture an image, though, look first at the different shading methods.
There are several different ways to output your final image and the trade-off is quality versus speed of rendering. Wireframe mode can be seen instantaneously but is not very realistic; on the other hand, Ray Tracing takes considerable time to complete but is photo-realistic.
The render option you use really depends on the speed of your machine. For Pentium machines, you can comfortably run in Solid Render mode, although there are advantages to Wireframe mode. The Render Mode buttons can be found in the View Group, and you can get to the Render Options panel by right-clicking the Render Object button. Here's a list of shading modes and options:
| Tip |
An alternative to using Ray Tracing is using Environment Maps, which compute the scene's reflection and apply it as a map onto the object. The tricky part is that every object that reflects needs to have an environment map. |
An example of four render modes is shown in Figure 4.13.
| Caution |
Although Ray Tracing can produce some incredible images, it's time-consuming and requires a lot of memory for high-resolution objects. Use it with caution. |
You've reviewed the 3D capabilities of these packages enough, so now try producing something you can use in your Web page-a 3D rendered image, or still, as they are called.
Creating the final image is relatively easy. In the View Group is an option to Render Scene to File; use this button to capture your 3D image.
To see your 3D images in all their glory, you normally have to make them larger than your other images, but this can be deadly to some visitors who stumble across these serious images and aren't willing to wait to see your masterpiece. They will more than likely run away and never come back.
A good solution to this problem is creating a small thumbnail of the image that links to another page where the 3D image can be viewed in a larger format. These thumbnails take very little space and give visitors an idea of whether they want to look at the image.
Creating these thumbnails is simple. Return to the scene where the original image was created and simply reduce the size of the output image. A good rule of thumb (no pun intended) is to make your thumbnails about 1/8 the size of the original.
Just because your 3D package doesn't output to either of these formats-JPEG or GIF-doesn't mean you can't use them. Paint Shop Pro can convert almost any graphic format with ease. It even can do batch conversions (see the File | Batch Convert command).
GIF format works well at reducing the file size because it's limited to 256 colors. Without all the colors to remember, it doesn't take up as much space. However, be warned-3D images are usually rendered by casting light across objects, so they typically have subtle gradations that rely on gradual changes in color. Use GIF if you must, but it shouldn't be the preferred format for 3D images.
JPEG, on the other hand, is good for working with images that have subtle color changes. It works in 24-bit with 16.7 million colors. Because it has so many colors to remember, it uses a lossy compression technique to reduce file size, meaning some of the image quality is lost as a result of the compression. On the plus side, the algorithm is designed to first eliminate the image information that affects the image quality the least. In most cases, you can't detect a degradation in image quality until it reaches the 60 percent compression level.
Another alternative that's becoming popular since the GIF format legal troubles is the PNG format. It offers 24-bit capability and includes the ability to save alpha channel transparency, which allows greater flexibility than GIF transparency.
This has been a busy chapter, but I hope you feel comfortable working with 3D packages by now. You've really just cracked open the door of possibilities. You can learn much more by experimentation, so jump in and see what's possible. When you're ready to continue, come back to explore animation.
| After reading this chapter, I feel comfortable in the trueSpace environment, but how different is this environment from other 3D packages? | |
| When learning 3D, certain conceptual principles, such as modeling, materials, and lighting, are common regardless of the package you're using. The main differences you find will be in the special
features offered by various packages. These features are usually high-end options, but the basics should be similiar.
The basic commands may be called something different in another package, but they work the same way. | |
| If I download a model from the Web, do I have to pay the creator when I use it? | |
| Every site that offers free models for downloading has specific instructions on using its models. Be sure to read the posted messages because models can be copyrighted and can lead to legal difficulties if used improperly. Beyond legal ramifications, it's ethically smart to always give the creator credit where credit is due. | |
| I've shopped around and there are a lot of 3D packages available. Which one is the best package to use for Web page design? | |
| First of all, you probably won't be able to afford the best overall 3D packages, but if you're looking for a package to use in Web page design, the choice becomes easier. Many of the available packages
are overkill for simple 3D Web page design. It really depends on what you can afford. A good comparative list can be found in appendix A, "3D Software Resource Guide."
Several companies have heard this request and responded. Lately, a number of 3D Web page design packages have appeared, including Asymetrix's 3D Web and Specular's 3D Web Workshop (they get an A+ for the name). You might want to check out these new products and see whether they fit the bill.
|