Chapter 11 Using Microsoft's ActiveVRML

-by Kelly Murdock

Working with 2D Elements
Importing and Controlling 2D Bitmaps
Repositioning 2D Images
Dealing with Sprites and Sounds
Adding Interactivity: Detecting System Events
Working with 3D Elements in ActiveVRML
Creating and Importing 3D Objects
Attaching Spatial 3D Sound to Objects
Object Behaviors
Making a Color-Cycling Object
Controlling Behaviors with System Events
Workshop Wrap-up

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

Working with 2D Elements

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.

Importing and Controlling 2D Bitmaps

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.

Repositioning 2D Images

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.

Dealing with Sprites and Sounds

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.

Adding Interactivity: Detecting System Events

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.

Working with 3D Elements in ActiveVRML

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.

Creating and Importing 3D Objects

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.

Attaching Spatial 3D Sound to 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.

Object Behaviors

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.

Making a Color-Cycling Object

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.

Controlling Behaviors with System Events

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.

Workshop Wrap-up

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.

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.

Chapter 11

Using Microsoft's ActiveVRML

CONTENTS

Next Steps

Q&A