All Categories :
VRML
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:
- Start with a plan-always a good idea that will save you time
- Add 3D elements, such as buttons, text, and backgrounds, to
your site
- Next, add your rendered 3D images and image maps
- Finally, add 3D animations for extra pizzazz
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.
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:
- Home page: with Bubsy's logo and company name and a personal
welcome from Bubsy
- What's New page: presenting the latest vehicles, complete
with images
- Vehicle Description pages: with break-downs and specifications
of each machine in the lot
- Special Sale pages: showcasing Bubsy's sale of the week
- Bubsy's Favorite Links: providing links to replacement parts
pages and other Web resources
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.
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.
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:
- The text was rendered with trueSpace and saved as a Targa
image.
- 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.
|
- The image was then centered and placed by using standard HTML
tags.
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:
- I started with a low-resolution texture image and enhanced
it by using Photoshop's Extrude filter.
- 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.
- 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.
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.
- 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.
|
- I then selected the oval and used the Glass Lens filter from
the Kai's Power Tools plug-in to add the 3D look.
- 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.
- Using Martin Hash's 3D Animation, I animated the cartoonish
Bubsy and output the animation as a series of Targa images.
- I then recorded Bubsy's welcome and loaded the Targa images
and the sound file into Director, where I synchronized the two.
- After saving the Director file, I compressed it for the Web
with the Afterburner utility.
- Finally, I embedded the animation as a Shockwave movie using
the standard <EMBED>
tag.
- 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.
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.
- Start by loading your pre-built models into a 3D package.
I used both trueSpace and Ray Dream Studio.
- The materials on the vehicle model can be easily changed using
the material selector functions. Each image needs to be rendered
separately.
- Thumbnails can be created by rendering the image again at
a smaller resolution or by resizing the final image.
- 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.
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:
- Create your 3D animation in the usual manner, but make sure
the size is fairly small. Output the animation as a series of
images.
- Load the individual images into a GIF animation tool, such
as the GIF Construction Kit, and save the file as a GIF file.
- 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.
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.
- The next chapter, "Up and Running: First VRML Creation,"extends
Bubsy's site by adding a VRML showroom where you can move around
the vehicles in real time.
- Just beyond Bubsy's world is where the tricks lie; Chapter 3,
"Adding Simple 3D Elements to Your Web Page," starts
it all off.
- The first workshop that shows real-world examples like Bubsy's
can be found in Chapter 7, "Real-Life
Examples: Product Design on a Corporate Intranet: Advanced Telescope
Design Corporation."
- If you're eager to jump into VRML building, see Chapter 13,
"Exploring VRML Browsers and Development Tools."
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!
|