All Categories :
VRML
Chapter 11
Using Microsoft's ActiveVRML
-by Kelly Murdock
CONTENTS
Back when VRML 1.0 was starting to show its age, VRML creators
decided they needed to start looking toward the future. Rather
than going it alone, they decided to ask for proposals on what
was to become the 2.0 specification. Well, the response was impressive.
Many proposals were presented and discussed; after considerable
debate, the Moving Worlds proposal put forward by Mitra, Sony,
and SGI was chosen to form the basis of the 2.0 specification.
So what became of the other proposals? Portions were adopted into
the 2.0 specification, and others just disappeared. Another proposal
made by the people at Microsoft is unique, so it's still being
developed. This proposal is known as ActiveVRML.
ActiveVRML scripts can be written using any basic text editor,
just as you do with HTML. These scripts are then embedded in an
HTML page as an ActiveX control. Because they are ActiveX controls,
they aren't limited to just the Web. Any programming language
that supports OCX libraries can use ActiveVRML components. ActiveVRML
differs from traditional VRML in several distinct ways and is
similar in many ways, including:
- ActiveVRML can import
and control 2D bitmaps.
- ActiveVRML supports 2D
sprites.
- ActiveVRML can detect
and act on system events, such as mouse clicks.
- ActiveVRML can be used
to import and manipulate 3D objects and worlds.
- ActiveVRML can attach
sounds to objects to create 3D spatial sounds.
- ActiveVRML can add interactivity
and behaviors to your worlds.
ActiveVRML is not the same as VRML 2.0. The basic technologies
are different. Although you can create similar worlds in both,
they differ in several areas, such as ActiveVRML's ability to
handle 2D images. Start comparing them by taking a look at the
2D aspects of using ActiveVRML.
Caution |
This chapter was written with the pre-beta version of ActiveVRML, so it has some rough edges. This technology is still in development, but will be fully implemented for Microsoft's Internet Explorer 3.0 in the coming months.
You will notice that the figures for this chapter show the now-old Internet Explorer 2. At the time this chapter was written, ActiveVRML was still being developed. For the latest information on ActiveVRML, check the ActiveVRML Web site:
http://www.microsoft.com/developer/tech/internet/avr/avr.htm
|
ActiveVRML has a lot of power for dealing with multimedia elements.
Although VRML defines 3D space, ActiveVRML can be used to create
3D worlds or to present 2D images. In this way, ActiveVRML can
also be used to create multimedia presentations, something VRML
2.0 can't easily do.
Perhaps the most important multimedia elements are 2D images.
ActiveVRML can import most of the standard image formats, as well
as text. It can also manipulate these images by using standard
programming algorithms. This is how it's done:
- ActiveVRML files have the AVR extension. The first line of
an AVR file has the following comment line:
// ActiveVRML 1.0 ascii
Note |
Placing two slash marks in front of a line marks the line as a comment, which means it will be ignored when the program runs. This first AVR line is an exception, however. The //ActiveVRML 1.0 ascii line must be included at the beginning of the program to identify the type of file to the browser.
|
- Next, load the image file into a variable, such as BackgroundImage,
with the following command:
BackgroundImage=first(import("clouds.jpg"));
The import command returns
several values, including the image, the dimensions of the image,
and the resolution. The first command indicates that you want
only the first value returned, which is the image itself.
- Now use the same command to load a foreground image, a transparent
GIF file:
ForegroundImage=first(import("airplane.gif"));
- Finally, use the model
command to place the image on the page and the over
command to determine which image is on top:
model= ForegroundImage over BackgroundImage;
- To embed the AVR file into an HTML file, the following lines
must be included with an HTML file. These lines embed the ActiveVRML
file as an ActiveX control into the Internet Explorer browser:
<OBJECT
CLASSID="uuid:{389C2960-3640-11CF-9294-00AA00B8A733}"
ID="AVView"
WIDTH=480 HEIGHT=480>
<PARAM NAME="DataPath" VALUE="hello.avr">
<PARAM NAME="Expression" VALUE="model">
<PARAM NAME="Border" VALUE=FALSE>
</OBJECT>
The resulting Web page is shown in Figure 11.1.
Figure 11.1: Your first ActiveVRML creation shows a GIF image overlaid on a JPG image of clouds.
Now that you know how to place images on the screen, it's time
to learn how you manipulate them. If the image doesn't show up
just right, do you have to go back to an image-editing program
and change it? The answer is no. In ActiveVRML, you can transform
the image to a new location, like this:
- To rotate the background image, use the Rotate2
command:
RotatedBackgroundImage=transformImage(rotate2(0.5),BackgroundImage);
The 2 at the end of the Rotate2
command tells the browser that it's a 2D command.
Caution |
ActiveVRML scripts are case-sensitive, so follow the syntax exactly. For example, the command TransformImage, instead of transformImage, in the previous line would give you an error.
|
- You can also scale the airplane image like this:
ScaledForegroundImage= transformImage(scale2(0.5),ForegroundImage);
- The complete ActiveVRML script would look like this:
// ActiveVRML 1.0 ascii
BackgroundImage=first(import("clouds.jpg"));
ForegroundImage=first(import("airplane.gif"));
RotatedBackgroundImage=transformImage(rotate2(0.5),BackgroundImage);
ScaledForegroundImage= transformImage(scale2(0.5),ForegroundImage);
model= ScaledForegroundImage over RotatedBackgroundImage;
- Save the file as an AVR file and embed it in your HTML file
the same way you've done before.
Figure 11.2 shows the results of scaling and rotating the images.
There are many other image-manipulation commands in ActiveVRML,
such as translate, crop, and tile.
Figure 11.2: The jet fighter once again, this time scaled to twice its size.
Now you have images placed on top of one another. The airplane
in Figure 11.2 just begs to move around the screen. Sprites
are just that: 2D images that move around the screen. While you're
at it, add sound to the file:
- In ActiveVRML, there's a time element, with the fortunate
property of increasing steadily, that can be used to animate your
sprites. After loading your images, introduce the time element
into a variable called movement:
movement=time*0.01;
- Now use the movement
variable to move across the screen:
Flying=translate(movement,0);
Translate requires two numbers, one for the X direction and
one for the Y. By leaving the Y set to 0,
you're telling the program you want movement only in the X, or
horizontal, direction.
- Now tell the script which image the translation should be
performed on:
FlyingForegroundImage=transformImage(Flying,ScaledForegroundImage);
- Finally, use the model
command to show the images on the screen:
model=FlyingForegroundImage over RotatedBackgroundImage;
After embedding the script and viewing the HTML file, you
can see the plane moving to the right and off the screen. But
what about the sound?
- Sound is easy. First, load the sound file, just as you did
for the images, then use the union
command for the additional sound. The union
command should come directly after the model
command:
AirplaneSound=first(import("motor.wav"));
. . .
model=FlyingForegroundImage over RotatedBackgroundImage
union loop(AirplaneSound);
Tip |
Notice how the union command is joined to the model command. Each ActiveVRML file can only have one model command. The union command can extend the single model command, but a semicolon should appear only after the final union statement.
|
Figure 11.3 shows the airplane flying backward off the right side
of the screen. Now that you have images moving around the scene,
take a look at the one thing that will separate this technology
from the standard Web fare-interactivity.
Figure 11.3: Here's the ActiveVRML airplane flying off the right side of the screen.
ActiveVRML can detect and react to system events, such as keystrokes
or mouse clicks. Detecting such events is essential when you're
creating multimedia applications. So how do these system events
work?
- Start by loading a couple of images, one of Jack and another
of Jumping Jack:
Jack1=first(import("jack1.jpg"));
Jack2=first(import("jack2.jpg"));
- Next, overlay some text telling the user how to make Jack
jump by using the renderedText
and simpleText commands:
JackText=first(renderedText(simpleText("Click to make Jack jump.")));
The simpleText command
loads a text string, and the renderedText
command converts the text string into an image.
- Then combine the images of Jack with the text:
JackState1= JackText over Jack1;
JackState2= JackText over Jack2;
- Close the program with a check for the leftButtonDown
system event; if the event takes place, you move to JackState2.
If the event is triggered a second time, then you return to JackState1.
model=JackState1 until leftButtonDown => (JackState2 until
ÂleftButtonDown => JackState1);
Figure 11.4 shows one of the Jack states. Another common system
event is the keyboardButtonPress
command, which is triggered when a key on the keyboard is pressed.
Figure 11.4: Jumping Jack getting ready to jump. When a user clicks on the window, another image of Jack jumping loads.
When moving into the 3D world from the 2D world, many of the commands
change only by getting a third value to represent the Z axis.
However, there's so much more to the 3D world than just adding
another direction. It's a whole new way of looking at objects.
The 3D world involves more than just images moving in front of
the screen. The object's location in space is known and can be
controlled. For example, 3D sound can be heard even if the object
isn't visible (if it's behind the camera, for instance).
Tip |
Certain commands, such as rotate2, become rotate3 when you're using 3D objects. The rotate3 command takes input for all three axes.
|
When you started learning about 3D models back in Chapter 4,
"Creating and Embedding Rendered Images," you began
with primitives. When you get to VRML 2.0 in a couple of chapters,
you'll see primitives again. However, in ActiveVRML there aren't
any primitives to start with, but you can import existing VRML
1.0 models and scenes.
When ActiveVRML detects a VRML scene, it automatically presents
some navigation options. As you move the cursor around the screen,
it changes to an arrow. Clicking and dragging the button moves
the scene in the direction of the arrow. When the cursor is in
the center of the screen, it changes to crosshairs. By clicking
on these crosshairs, you can rotate the object around.
Once a VRML object is loaded, you can define its color, textures,
lights, and movements, as you'll see in this example:
- Using the standard import
command, you can import VRML 1.0 worlds and objects:
Soda=first(import("soda.wrl"));
- With the VRML object imported, you can then control all the
attributes of the object, such as material properties:
SodaCan= diffuseColor(colorRgb(255, 0, 0), Soda)
This paints the soda can red with a diffuse color setting.
Other available color settings include ambient, specular, and
emissive attributes. The diffuse setting doesn't glow like the
emissive attribute; that's why the can in Figure 11.5 looks black
instead of red.
Figure 11.5: In ActiveVRML, you can view this soda can from any angle.
Tip |
ActiveVRML has several primary colors built into the language that don't need to be specified as values. They include red, green, blue, cyan, magenta, yellow, white, and black.
|
Another way to add materials to your objects is to use the
texture command to wrap 2D
images around your models:
Soda= first(import("soda.wrl"));
SodaMap= first(import("textureMap.jpg"));
SodaCan= texture(SodaMap, Soda);
- Next, reposition the soda can and give it some movement. With
the transformGeometry command,
you can combine several positioning commands into one line. The
o is a concatenation operator
that links commands.
SpinningCan= transformGeometry(translate(0,-1.5,0) o
scale3(0.5) o rotate(yVector3,time*0.1),SodaCan);
- Now you're ready to use the model
command, but how about a little light on the subject? ActiveVRML
can specify four types of lights: ambient, directional, point,
and spot. Illuminate your 3D scene with the directionalLight
command:
model= SpinningCan
union directionalLight;
The union command combines
the light effect with the rest of the scene.
Figure 11.5 shows the VRML model. The can is slowly rotating around
the Y axis. There are many more commands you could use to enhance
this scene, such as placing cameras and adding the ability to
select objects.
When 3D sound is attached to an object, as the user approaches
the object in 3D space, the sound gets louder; as the user moves
away, the sound gets fainter. Any object in the scene can get
its own sound.
- First load your VRML object and a sound. This time you'll
use a toy jack:
Jack=first(import("jack.wrl"));
JackSound=first(import("whirl.wav"));
- Then apply materials (this time, you'll use blue) and perform
the transformation on the object. You want the jack to spin as
the soda can did in the previous example.
BlueJack=diffuseColor(colorRgb(0, 0, 255), Jack);
SpinningJack= transformGeometry(scale3(0.1) o
rotate(yVector3,time*0.1),BlueJack);
- To introduce the spatialized sound, simply use the union
statement to join the sound to the model with the soundSource
command:
model= SpinningJack
union directionalLight
union soundSource(loop(JackSound));
Several options can be joined to the model
command with a union statement.
Here you see lights and sound added; the loop
command makes the sound continuous.
That's it. Now as you move around the world, the sound changes
depending on your distance from the 3D object. Take a look at
the scene in Figure 11.6.
Figure 11.6: The toy jack spins around the scene; the sound associated with the model changes volume as you get closer of fathr away from the object.
The rotate command covered
previously is an example of a behavior. Behaviors can be instilled
in objects that perform actions and respond to events. Because
ActiveVRML has the mathematical capabilities of a programming
language, you can outfit objects with complex behaviors. Take
a brief look at two behaviors that manipulate color.
One behavior that's easy to use is color cycling. This
behavior simply changes the color of the object over time.
- Start by loading an object; any 2D or 3D object will work:
Star=first(import("star.wrl"));
- Then introduce the color of the star as a result of time:
SparkleStar= emissiveColor(colorRgb(time,time*2,time/3),Star);
- Finally, model the star with the color-cycling behavior:
Model SparkleStar;
This is a simple example for a simple behavior. Figure 11.7 shows
how it looks on the page.
Figure 11.7: The star object has the behavior of changing its color over time.
Once you have behaviors built into your objects, you can control
them with system events. In this way, users can turn certain behaviors
on or off whenever they want. Look at an example of how an object's
color can be controlled by a mouse click:
- Working from the same star object used in the last example,
simply add a system event check that changes the object's color
when the left mouse button is clicked:
ColorStar= diffuseColor(red until leftButtonDown => green,Star);
- This new object is then modeled, along with a light command:
model= ColorStar union directionalLight;
These sample behaviors are very simple, but they demonstrate how
ActiveVRML can be used to make scenes interactive.
Although the VRML Architecture Group has decided that the Moving
Worlds specification is recognized as VRML 2.0, Microsoft is still
supporting its proposal as a way of creating multimedia content
and VRML worlds on the Web.
Next Steps
I hope ActiveVRML has whet your appetite for the real VRML, or
maybe you're confused because there really weren't enough pages
to cover ActiveVRML in depth. In either case, many of the chapters
ahead will get you into the nitty-gritty of VRML 2.0:
- Before getting to VRML, this part concludes with a real-life
workshop in Chapter 12, "Real-Life
Examples: Creating a MYST-like Adventure on the Web."
- Chapter 13 starts off the whole VRML
section with "Exploring VRML Browsers and Development Tools."
- To see a real-world use of VRML, jump over to Chapter 17,
"Real-Life Examples: The VRML Art Gallery: A VRML World by
Hand."
- To learn some more tricks to make your VRML worlds run more
quickly and smoothly, check out Chapter 18,
"Tricks to Optimize Your VRML Worlds for the Web."
Q&A
Q: | I understand that this chapter was completed using the pre-beta release of ActiveVRML. When will a beta version be available?
|
A: | This pre-beta version was used as part of the proposal Microsoft made to the VRML Architecture Group. Since its creation, the Microsoft team has re-evaluated ActiveVRML's position. Microsoft has been working on a beta release that will build on ActiveVRML's strong points while fulfilling Microsoft's goal for the technology.
Although there hasn't been any formal announcement, Microsoft plans to release a beta version about the same time the VRML 2.0 specification is ratified.
|
Q: | If this book is about VRML 2.0, why is Microsoft's ActiveVRML even being covered?
|
A: | Although ActiveVRML wasn't chosen to become the VRML 2.0 specification, the technology has much to offer, and Microsoft has the resources to develop ActiveVRML in a way that few companies can.
I believe that, in time, ActiveVRML will distinguish itself from the 2.0 specification and offer a simple solution for creating and publishing multimedia presentations and VRML worlds on the Web.
|
Q: | Microsoft has a lot of different programming languages. How does this one differ from its other languages?
|
A: | The goal of VRML is to create 3D worlds that will be available on the Web. To do this, the VRML specification was created. Microsoft believes that VRML 2.0 will be too complicated for most Web users to work with, so it's continuing to develop ActiveVRML as an alternative.
ActiveVRML is a programming language, but it's simple to use and effective for creating VRML worlds and multimedia pages.
Another distinct advantage of ActiveVRML is that it will integrate with Microsoft's other languages as an ActiveX control. This advantage gives developers a unique tool for creating VRML worlds that integrate seamlessly with other development tools, such as VBScript.
|