Chapter 1

Building a 3D Enhanced Web Site

-by Kelly Murdock


CONTENTS


If you've thumbed through the book, you've seen the different examples of 3D elements that can enhance your Web site. If not, then go ahead and thumb through it now to look at some of the images. Every image you see in the book can be used in a Web page. Some of the techniques may look a little difficult, but they really aren't. Creating 3D graphics isn't difficult, although it can be tricky. The purpose of these first two chapters is to show you quickly that this book can unlock possibilities and to get you over any intimidation you might have about creating graphics. This is how this chapter will progress:

Once you get this site up and looking good, Chapter 2, "Up and Running: First VRML Creation," extends it with a VRML world. At the end of these two quick-start chapters, you'll have a state-of-the-art 3D site.

I was in Bubsy's showroom the other day examining his new line of convertible dump trucks when talk turned to the Web. Bubsy was anxious to establish a Web presence for his business and asked if I could help. I accepted the challenge, and the results of Bubsy's Sport Car and Heavy Machinery Web site follow.

Planning the Site (with Bubsy's Blessing)

Bubsy has been in the business of selling vehicles for some time and has some definite ideas about what should go on the Web site. After considerable deliberation, we agree on the plan for the Web site and intend to include the following structure:

Each page should have icons at the bottom of the page that link to the other pages to help you move around Bubsy's site. Now that you have a rough plan, move on to building the site by starting at the title page.

Starting with the Title Page

The title page is usually the first page the visitor sees. It's the first chance you have to show off your 3D wares. For this site, you want to include the company name in 3D text, present a 3D background, add navigation buttons, and include a rendered animation of Bubsy welcoming visitors to the site.

Adding 3D Text

Bubsy doesn't really have a logo. In fact, everywhere the name is mentioned, it looks different, so Bubsy thought it would be a good idea to present his company name as 3D text.

The size of the image needs to be rather large to get all the words in and to make it readable, but you don't want to blank out the background, so use a transparent GIF image:

  1. The text was rendered with trueSpace and saved as a Targa image.
  2. This image was then loaded into Paint Shop Pro, converted to a 256-color image, and saved as a transparent GIF image, shown in Figure 1.1.

    Figure 1.1: Title page for Bubsy's Sports Cars and Heavy Machinery Web site.

    Caution
    You should usually embed your 3D images as JPEG files. JPEG is better at subtle color changes, which are common for 3D images. Notice how the colors in the Bubsy title look kind of splotchy and how the edges are ragged. But if you want transparency, GIF is the only option for now.


  3. The image was then centered and placed by using standard HTML tags.

Including a 3D Background

Backgrounds are a two-edged sword. They can effectively hide some ragged edges caused by making 3D images transparent, but when they have too much detail, they can make the text on the page illegible. For the background on the title page, I did the following:

  1. I started with a low-resolution texture image and enhanced it by using Photoshop's Extrude filter.
  2. Then in Photoshop, I increased the brightness of the image by 35 percent. This washed the image out enough that the text is legible, but it still covers the ragged edges somewhat.
  3. I used a standard background image tag to embed the background in my title page. (See Figure 1.2.)

    Figure 1.2: Title page again, this time with a brightened background.

Embedding Navigation Buttons

Now that the title page is shaping up, you need some links to guide visitors into the site. According to the plan, there should be five buttons that appear on every page in the site.

  1. Starting with a plain red oval in Photoshop, I used the text tool to center the text.

    Note
    I've used Photoshop throughout this example, but I could just as easily have used Paint Shop Pro or any other image-editing software.


  2. I then selected the oval and used the Glass Lens filter from the Kai's Power Tools plug-in to add the 3D look.
  3. I saved the buttons as GIF files. I didn't have to worry about ragged edges since I started with a simple shape. The GIF images were easily embedded into the HTML file, as Figure 1.3 shows.

    Figure 1.3: Bubsy's Web site after adding 3D navigation buttons.

Embedding an Introduction Animation

One thing about Bubsy is that he has a large ego. He insisted that he be placed on the home page to personally welcome visitors to his site. However, he won't let anyone take a video of him, so I created a 3D character to do the introduction animation. It's a good thing Bubsy has a cartoon-like face.

  1. Using Martin Hash's 3D Animation, I animated the cartoonish Bubsy and output the animation as a series of Targa images.
  2. I then recorded Bubsy's welcome and loaded the Targa images and the sound file into Director, where I synchronized the two.
  3. After saving the Director file, I compressed it for the Web with the Afterburner utility.
  4. Finally, I embedded the animation as a Shockwave movie using the standard <EMBED> tag.
  5. The note just before the animation lets visitors know where to get the Shockwave plug-in for viewing the animation.

Figure 1.4: The final element on the title page is a personalized welcome from Bubsy himself in a Shockwave movie.

Adding 3D Images

The core of the Web site is where you present your products. Bubsy wanted these split between three different pages: the What's New page, where the latest and greatest can be found, the Vehicle Specification pages, where the bulk of the items will go; and the Special Sales page, where discounted vehicles are highlighted.

Each of these sections has the Bubsy logo and the navigation buttons, but the new element will be the 3D images of the vehicles. Bubsy also earns some revenue by offering his customers custom-paint jobs, so you naturally want to show this to the site visitors.

  1. Start by loading your pre-built models into a 3D package. I used both trueSpace and Ray Dream Studio.
  2. The materials on the vehicle model can be easily changed using the material selector functions. Each image needs to be rendered separately.
  3. Thumbnails can be created by rendering the image again at a smaller resolution or by resizing the final image.
  4. You know how to embed images; keep in mind that they usually look best when surrounded by a border of some kind.

Using thumbnails, you can present many examples without taking up too much bandwidth, as shown in Figure 1.5. The thumbnails all link to larger images.

Figure 1.5: 3D images added to Bubsy's products page; the thumbnail images link to larger images.

Spicing Up with 3D Animations

When you go into a showroom to look at cars, you usually wander around the car to view it from all sides. With animations on your site, you can simulate this experience. Rotating a 3D object to create an animation is fairly painless, but embedding it is another story.

There are many ways to embed animations in your Web site; several will be covered here. If you don't like any of these methods, then just wait-new methods are showing up all the time. For the vehicle demonstrations on Bubsy's site, I decided to use Shockwave movies. They work about the same way as Bubsy's introduction animation.

Another way to add small animations is using GIF animations, which were used on Bubsy's Special Sales page:

  1. Create your 3D animation in the usual manner, but make sure the size is fairly small. Output the animation as a series of images.
  2. Load the individual images into a GIF animation tool, such as the GIF Construction Kit, and save the file as a GIF file.
  3. The GIF animation can be embedded just like any other GIF image.

When using GIF animations, it's important to remember not to place too many on one page, not to use large images, and not to use too many frames. Small files like the ones in Figure 1.6 are just about right.

Figure 1.6: Bubsy's Special Sales page makes use of GIF animations to draw attention to deals you can't pass up.

Workshop Wrap-up

The completed Bubsy site can be viewed on this book's CD-ROM. It's a rather small site but has enough to show you a sampling of what this book will enable you to do. Bubsy's not done with you yet, though. In the next chapter, you'll add a VRML showroom to Bubsy's site.

Next Steps

Boy, Bubsy is demanding. Not only did he get me to work on his site, but he managed to get my co-author to add a VRML showroom as well.

Q&A

Q:
What kind of tools did you use to create these 3D images? Are they affordable?
A:
I must admit, I did use some expensive tools in the process of creating this example, but not as expensive as I could have. In the 3D world, tools such as Ray Dream Studio and trueSpace are real bargains at around $500.

The CD-ROM that goes with this book has a number of good demos that will let you play with these tools to help you decide whether they're right for you before you lay your money down. appendix A, "3D Software Resource Guide," is another reference that can help you see what kinds of tools are available.

If you're still not satisfied, try checking out the shareware scene. There are several shareware and freeware programs that will help you get started. The book's CD-ROM is full of these kinds of programs.

Q:
I've been working in 3D for a long time, and it seems that it would be a lot of work to put my existing images and animations on the Web. Is there an easier way?
A:
If you don't like the way something is done on the Web, then check back in about three months. The Web is continually changing and improving. Currently, it's somewhat difficult to get 3D content on the Web; that's why this book is being published.
Easier methods for publishing 3D are in the works by several different companies. One to watch is Shockwave for Extreme 3D, which will make it possible to embed your existing 3D work easily into your Web pages. Tools like that will make this book and a lot of headaches disappear, but I'm not worried-there will still be plenty to write about!