Chapter 53

Creating VRML Worlds

by Jim O'Donnell


CONTENTS

After you know how to construct simple VRML objects, the next step is assembling them into VRML environments-both full VRML worlds and inline VRML scenes to be embedded into an HTML Web page. Learning how to design, lay out, and assemble VRML worlds manually, as opposed to using a VRML authoring program, will give you insights into the VRML methods and language elements needed to construct quality VRML environments.

The purpose of your VRML environment is the most important factor in getting started on your design. Does what you have in mind require the development of a full VRML world? Or are you interested in adding a special effect by using an inline VRML scene embedded into a Web page? With the advent of Netscape Navigator's Live3D plug-in as a standard part of the Navigator release, and Microsoft's Internet Explorer having a VRML plug-in of its own (as well as supporting the Live3D plug-in), an inline VRML scene can be viewed by a very wide audience.

VRML Worlds

In the context of this discussion, a VRML world refers to a VRML file that is designed to be stand-alone and will be loaded into a VRML-compatible Web browser on its own, without being embedded in an HTML-based Web page. Though there is no lower or upper limit on the size and complexity of a VRML world, these worlds tend to be fairly large. The three-dimensional VRML paradigm is often used to allow the user to "move through" the VRML world, visiting the parts of it of interest to him.

One example of good use of VRML worlds is demonstrated through sites that model an actual three-dimensional object, building, or geographic location, allowing remote users from all over the world to actually "see" what that object looks like, perhaps even to travel through it. The University of Essex in Britain maintains such a site at http://esewww.essex.ac.uk/campus-model.wrl. This VRML world consists of three-dimensional model of their campus. Users can move around the campus and see it from any conceivable angle. In addition, each building on the campus contains a hypertext link to an HTML Web page with information about that building. (For a discussion of adding hypertext links to VRML objects, see the "Adding Hypertext Links" section later in this chapter.)

Another example of an appropriate use of a VRML world is any application that makes good use of VRML's three-dimensional capabilities. A commercial Web site might use VRML to set up a retail storefront that Web customers can move and browse through, much like a real store. The three-dimensional objects possible with VRML make it ideal for showing representations of mechanical parts or chemical models.

Inline VRML Scenes

Inline VRML scenes are best used to achieve a given special effect within an HTML Web page. By creating a very small, very specialized VRML scene and displaying it inline, you can achieve a variety of special effects. This is particularly true if you add some of the animation and movement extensions possible with VRML 2.0 and Netscape's Live3D, which are discussed in Chapter 54, "VRML 2.0: Moving Worlds." An inline VRML scene can be used to achieve a similar effect to an animated GIF; depending on the desired effect, this may be done with a VRML file smaller than the GIF.

In this chapter, you concentrate on the fundamentals of taking the VRML objects that you learned how to make in Chapter 52, "Creating VRML Objects," and build them up into compound objects and VRML environments. You also go through the steps to build a simple VRML world.

Design Considerations

After you come up with an idea for your VRML environment, you need to consider a number of other factors that influence the final design. As well as deciding what objects you would like to put in the VRML environment and where they are with respect to each other, there are other factors that may limit what you can achieve. How big of a VRML environment should you create? How detailed should it be? How should it be shaped? How should everything be laid out? How should you create it?

Size and Detail

The first thing you should consider before drafting your environment is size-not in terms of the space it takes up in the virtual world but the final size of your .Wrl file. In a perfect world, everyone would have a high-powered graphics workstation and a T3 line connecting them to the Internet, and you wouldn't have to worry about how big your VRML file is, how long it takes to transmit over the Internet, or how long it takes to render after it arrives at the client machine.

In reality, however, things are quite different. Most people are running 486 and Pentium PCs over 14.4Kbps and 28.8Kbps modems. If you come up with a VRML world that is 10M, you severely limit your audience because of the hour and a half download time and the time it takes for the client computer to render it. No matter why you are interested in providing VRML environments on the Web, no one will look at it if it takes that long.

Therefore, you need to consider how big you are going to make your VRML environment and how detailed it should be. It is a question of compromise. You can have a very large environment, but then you cannot add a great amount of small details. Or if you only have a few objects in your environment, they can probably be displayed with a great deal of detail. It becomes a trade-off between size and detail.

That is why it is important to start the process with a purpose for your VRML environment. If you are trying to sell something and you want your customers to understand what they are getting, you should probably opt for multiple VRML environments, each of which displays a few objects-or even just one-in great detail. However, if you want to give your users a sense of what it's like to stand next to the Pyramids in Egypt, texturing each pyramid brick by brick isn't necessary. If you want to let your users tour a model of your entire electronics workshop, you may not need to include every oscilliscope and soldering iron. But if you want them to see the tools used, you can limit your environment to a single workbench.

Design and Layout

After you have decided how big your environment will be and what to include in it, the next step becomes deciding how it will look. A VRML environment is like any other space, virtual or not. If it looks cluttered and unkempt, people won't want to look at it. You need to decide how you want things to be laid out and how you will want people to navigate through your environment. Is it a scene that they will be looking at from a distance? Or do you want them to jump in and poke around?

Again, the important factor in answering these questions is your environment's purpose. For example, if you are creating a VRML world that requires users to follow a particular sequence, then you need to find ways to direct their travels through your world. On the other hand, if you want people to be able to freely explore through your VRML world, you may want to have a more open environment. Even if you are re-creating a space that exists in the "real world," you need to consider what is necessary and not necessary.

VRML World Design Example

Throughout the rest of this chapter, the discussion focuses on the design of a very simple VRML world. We go through the process of initial layout, building VRML objects together into compound objects, and placing them in our world. Then, we find out about some of the ways to add realism to our VRML world, through the use of textures, lighting, and the addition of multiple camera viewpoints. Finally, we find out how to link our VRML world up to other VRML worlds, HTML pages, or anything with an URL.

While the process of building this VRML world might be easier with a VRML authoring or three-dimensional modeling software package, this chapter instead shows how it is done by hand. By performing the steps of VRML world-building manually, you get a much better grasp of the fundamentals of the VRML language-and if you subsequently want to use a VRML authoring tool, this foundation makes it much easier.

Mapping Your VRML Environment

Rather than charging off and starting to throw together VRML objects that you might need in your world, the first step in the design process should be to sketch out what you want your world to look like. An important tool at this point of the design process is shown in Figure 53.1-a simple sheet of graph paper.

Figure 53.1 : Initial VRML world design and layout, on paper or with a two-dimensional drawing package, is a crucial first step.

By using graph paper, including both a top view and a side view of what you would like to put in your world, you get a very good first idea of the following important points:

VRML Coordinate Systems

While it is important to have a visual way of thinking to design your VRML environment, the way that it is stored is as a set of coordinates and mathematical transformations. You need to convert your visual design into these coordinates and transformations-this is one of the reasons that sketching out your world on graph paper is a good idea. To fully understand how to accomplish this, you need to know a bit about the coordinate systems that VRML uses, as well as the vectors and matrices it employs.

Cartesian Coordinates

Cartesian coordinates, those used in VRML, are named after the geometry developed by RenŽ Descartes. They are basically the standard way of describing the two- or three-dimensional geometry of something. Figure 53.2 shows the default coordinate system used by VRML.

Figure 53.2 : VRML's default Cartesian coordinate system.

By default, when you begin looking at a VRML scene, the positive direction of the x­axis goes from left to right, the positive direction of the y­axis goes from down to up, and the positive direction of the z­axis goes from the back of the environment towards the front. This is called a right-handed coordinate system because if you curl the fingers of your right hand from the x­ towards the y­axis, your thumb will point along the z­axis.

The right-handedness of the coordinate system also comes into play when you discuss rotations. The direction of a positive rotation about an axis is determined by the right-hand rule. For instance, to determine the direction of a positive rotation about the z­axis, point your right thumb along the z­axis in its positive direction. The way your fingers curl define a positive rotation.

Vectors

A point in the Cartesian coordinate system is called a vertex. A vertex is simply a location in space represented by three numbers, x, y, and z. A vector is related to a vertex, in that it is also represented by x, y, and z coordinates. Whereas a vertex represents a point in space, a vector represents a direction. So, the vertex (1,0,1) represents the point x=1, y=0, and z=1. The vector (1,0,1) represents the direction you would be traveling in going from the origin, the point (0,0,0), to the vertex (1,0,1).

VRML Units

When specifying coordinates and rotation angles in VRML, you need to remember that the default measure of distance is a meter, and the default measure of rotation angle is a radian.

NOTE
A radian is a unit used to measure angles and rotations. There are 2p, radians in 360¡, so you can determine the number of radians from a given number of degrees by multiplying by 180/p, about 57.3

Building a VRML World: Part I

So the first step in the design of a VRML world is to sketch out what we want it to look like. By putting this down on graph paper, we are already a long way towards defining the coordinates, size, and position of the things in the world.

Figures 53.3 and 53.4 show a top and side view of the VRML world we will try to put together throughout the rest of this chapter. Figure 53.4 shows a "front" view of the world, with the z­axis pointing straight out of the paper. The two drawings define what the world should look like pretty well; you might find it helpful to include another side view, however, looking down the x­axis, for example.

Figure 53.3 : Top view of our planned VRML world.

Figure 53.4 : Side view of our planned VRML world.

Now that we have our VRML world sketched out, let's go back and see if these sketches answer the questions we previously asked about the design:

Moving Things Around

In Chapter 52, you learned how to create simple VRML objects. So creating the objects needed for our example shouldn't be very difficult. However, something that wasn't discussed in Chapter 52 was how to move things around within the VRML environment. Without the capability to do this, all created objects will be lumped together at the origin of the VRML coordinate system.

Listing 53.1 shows an example of multiple objects appearing at the origin. The first two pieces of the VRML environment, a plane and a cube, are created. But, without being able to move either of them around, they are embedded within one another (see Figure 53.5).

Figure 53.5 : Created VRML objects appear at the origin, thus causing overlap between them if they aren't moved out of the way.


NOTE
As we build our VRML world, we will present the VRML listings used to create it. In the next few listings, the new or changed code from one listing to the next will be shown in italics so that you can quickly see what has been added. After that, only the changed parts of the code will be shown at all


Listing 53.1  Xample01.wrl-Building a VRML World: Part I
#VRML V1.0 ascii

DEF Example Separator {
   Info {
      string "Platinum Edition, Using HTML, Java, and CGI, chapter 53"
   }
   DEF BackgroundColor Info {
      string "1 1 1"
   }
   Separator {
      Material {
         diffuseColor [0 0.75 0]
      }
      Coordinate3 {
         point [-5 0 -5,
                 5 0 -5,
                 5 0  5,
                -5 0  5]
      }
      IndexedFaceSet {
         coordIndex [0,1,2,3,-1]
      }
   }
   Separator {
      Material {
         diffuseColor [0 0 0]
      }
      Cube {
         width  2.3333
         depth  1.3333
         height 2
      }
   }
}

Translation

The Translation node is one of the ways of moving VRML objects. It has one field, also called translation, which gives the x, y, and z distances to move the VRML object.

Building a VRML World: Part II

Listing 53.2 shows the beginnings of our VRML world, this time with the bottom part of the house moved to its correct position (as seen in the overhead view of Figure 53.6). This was accomplished by moving it with the Translation node-the x, y, and z distances used for the move were found from our sketch. The syntax of the Translation node is

Figure 53.6 : The Translation node allows simple and compound VRML objects to be moved around the VRML environment.

Translation {
      translation x y z
}

When used, it moves the object from the origin of the VRML coordinate system so that it is centered at the point (x,y,z).


Listing 53.2  Xample02.wrl-Building a VRML World: Part II
#VRML V1.0 ascii

DEF Example Separator {
   Info {
      string "Platinum Edition, Using HTML, Java, and CGI, chapter 53"
   }
   DEF BackgroundColor Info {
      string "1 1 1"
   }
   Separator {
      Material {
         diffuseColor [0 0.75 0]
      }
      Coordinate3 {
         point [-5 0 -5,
                 5 0 -5,
                 5 0  5,
                -5 0  5]
      }
      IndexedFaceSet {
         coordIndex [0,1,2,3,-1]
      }
   }
   Separator {
      Material {
         diffuseColor [0 0 0]
      }
      Translation {
         translation -2.5 1 -3
      }
      Cube {
         width  2.3333
         depth  1.3333
         height 2
      }
   }
}

Creating Object Hierarchies

Unless your VRML world is very simple-even simpler than our example-you may find yourself often building up more complex VRML objects from simpler ones. While it is possible to treat each of the objects separately-and move and scale each individually-it's a lot easier to create the compound object from the individual ones and then manipulate that object with one operation.

Separator

The Separator node was mentioned in Chapter 52; it is used as a container of other nodes, called child nodes. By containing multiple nodes within a Separator node, those nodes are grouped together into a compound VRML object.

Building a VRML World: Part III

Listing 53.3 shows the next addition to our VRML world, the addition of the roof to our house. Note that the roof is created with an IndexedFaceSet and positioned on top of the bottom part of the house within a Separator node. Then, the compound object representing the complete house is moved into the correct position within the VRML environment (see Figure 53.7).

Figure 53.7 : Creating compound objects in VRML makes it much easier to create and manipulate complex scenes.


Listing 53.3  Xample03.wrl-Building a VRML World: Part III
#VRML V1.0 ascii

DEF Example Separator {
   Info {
      string "Platinum Edition, Using HTML, Java, and CGI, chapter 53"
   }
   DEF BackgroundColor Info {
      string "1 1 1"
   }
# 
# The Ground
# 
   Separator {
      Material {
         diffuseColor [0 0.75 0]
      }
      Coordinate3 {
         point [-5 0 -5,
                 5 0 -5,
                 5 0  5,
                -5 0  5]
      }
      IndexedFaceSet {
         coordIndex [0,1,2,3,-1]
      }
   }
# 
# The House
# 
   Separator {
      Material {
         diffuseColor [0 0 0]
      }
      Translation {
         translation -2.5 1 -3
      }
      DEF House Separator {
         Cube {
            width  2.3333
            depth  1.3333
            height 2
         }
         Material {
            diffuseColor [0 0 1]
         }
         Translation {
            translation 0 1 0
         }
         Coordinate3 {                          # Vertex Indices:
            point [-1.5 0 -1,-1.1667 1 -0.6667, #   0----2
                    1.5 0 -1, 1.1667 1 -0.6667, #   |1--3|
                    1.5 0  1, 1.1667 1  0.6667, #   |7--5|
                   -1.5 0  1,-1.1667 1  0.6667] #   6----4
         }
         IndexedFaceSet {
            coordIndex [0,2,4,6,-1,
                        1,3,5,7,-1,
                        0,2,3,1,-1,
                        2,4,5,3,-1,
                        4,6,7,5,-1,
                        6,0,1,7,-1]
         }
      }
   }
}

Convex and Concave Objects

VRML and VRML rendering engines used in VRML browsers are usually pretty good about figuring out what you want your shapes to look like. The simple shapes, of course, can hardly look like anything other than what they are. However, when putting together shapes with IndexedFaceSet, the VRML browser sometimes needs a few hints on what you want your shape to look like. This is particularly true when the shape you are creating is not convex.

Though there is a more precise mathematical definition, a convex shape is basically one in which there aren't any indentations. In general, you can travel a straight line from any given point inside the shape to any other point inside the shape, and every point you travel through will also be inside the shape. The two-dimensional full moon shape is convex.

A concave shape is one that does have indentations, or concavities, within it. For instance, the two-dimensional crescent moon is concave; if you were to travel from one of the tips of the crescent to the other, you would travel across the area that was not part of the shape.

VRML assumes by default that the vertices you define and the face sets that you create are convex and is able to create them without too much trouble. When you need to define a concave shape, however, you may need to give it a hand.

ShapeHints

The ShapeHints is used to give VRML hints about face sets, vertex sets, and solids that might otherwise confuse it. It has vertexOrdering, faceType, and shapeType fields that are used to specify information about the shape. Also, it has a creaseAngle field that tells the VRML browser when to use smooth shading and when to use faceted shading.

Building a VRML World: Part IV

Listing 53.4 shows our first attempt at generating a face to represent the walkway in our VRML world. Note that the y components of each vertex used in the face is set to 0.01; this is so our walkway will appear just above the ground.

NOTE
For the remaining parts of the VRML world building example, only excerpts of the VRML listing is printed in the text, as the rest of the VRML file remains unchanged from the previous part. The full listing for each part is on the CD-ROMs that accompany this book


Listing 53.4  Xample04.wrl-Building a VRML World: Part IV
# 
#  The Walkway
# 
   Separator {
      Material {
         diffuseColor [1 1 1]
      }
      Coordinate3 {                   # Vertex Indices:
         point [-2      0.01 -2.3333, #    7-0
                -2      0.01 -2,      #    6 1
                 0.6667 0.01  0.6667, #     \ \
                 0.6667 0.01  5,      #      \ 2
                 0      0.01  5,      #      5 |
                 0      0.01  1,      #      | |
                -3      0.01 -2,      #      4-3
                -3      0.01 -2.3333]
      }
      IndexedFaceSet {
         coordIndex [0,1,2,3,4,5,6,7,-1]
      }
   }

You can see from Figure 53.8 that, because of the concavity of the face used to generate the walkway, the VRML browser was not able to render the walkway the way we would like it. It is necessary to specify ShapeHints for that face.

Figure 53.8 : VRML browsers often have trouble correctly rendering concave two- and three-dimensional shapes unless they are given some hints on what the shape should look like.

Listing 53.5 shows the correctly specified walkway, using the ShapeHints node to ensure that it is correctly rendered by the VRML browser (see Figure 53.9).

Figure 53.9 : The ShapeHints node gives the VRML browser the information it needs to correctly render concave shapes and solids.


Listing 53.5  Xample05.wrl-Building a VRML World: Part IV
# 
#  The Walkway
# 
   Separator {
      Material {
         diffuseColor [1 1 1]
      }
      ShapeHints {
         vertexOrdering CLOCKWISE
         faceType       UNKNOWN_FACE_TYPE
      }
      Coordinate3 {                   # Vertex Indices:
         point [-2      0.01 -2.3333, #    7-0
                -2      0.01 -2,      #    6 1
                 0.6667 0.01  0.6667, #     \ \
                 0.6667 0.01  5,      #      \ 2
                 0      0.01  5,      #      5 |
                 0      0.01  1,      #      | |
                -3      0.01 -2,      #      4-3
                -3      0.01 -2.3333]
      }
      IndexedFaceSet {
         coordIndex [0,1,2,3,4,5,6,7,-1]
      }
   }

Scaling VRML Objects

Other than translating VRML objects about the VRML environment, another transformation that can be done is scaling. Scaling allows you to scale VRML objects in the x, y, and z directions. The following are several instances in particular where scaling comes in handy:

Scale

The Scale node has the single scaleFactor field, which specifies a scale factor to be used for the x, y, and z directions. Scale factors greater than one make the object larger; less than one make it smaller.

Building a VRML World: Part V

We will design the tree in our VRML world using two simple VRML objects: a sphere for the top part of the tree and a cylinder for the tree trunk. As shown in Listing 53.6, the Scale node is used to flatten out the sphere to make it look a bit more tree-like. As with the house, the compound object of the tree-scaled sphere and cylinder-is assembled within a Separator node, and then the whole thing is moved into position (see Figure 53.10).

Figure 53.10 : There are many more possibilities offered by the simple VRML objects when the Scale node is used to reshape them.


Listing 53.6  Xample06.wrl-Building a VRML World: Part V
 # 
# The Tree
# 
   Separator {
      Translation {
         translation 2.5 1.5 -1.5
      }
      DEF Tree Separator {
         Material {
            diffuseColor [0.5 0.25 0]
         }
         Cylinder {
            radius 0.1667
            height 3
         }
         Material {
            diffuseColor [0 1 0]
         }
         Scale {
            scaleFactor 1.5 1 1.5
         }
         Translation {
            translation 0 1.5 0
         }
         Sphere { }
      }
   }

Reusing VRML Objects with Instancing

If you were creating a VRML environment that included many copies of a given object-cars in a parking lot, pins in a bowling alley, or bubbles underwater, for instance-you wouldn't want to have to define each one individually. Ideally, you could define one such object, and then "copy and paste" the others. In fact, it would be even better if you could do this but also make small changes, such as a different color or size, in each of the copies.

VRML supports instancing, which allows you to do exactly that. By defining an object and giving it a name, you can use that object again-redefining any of its characteristics, as well-by referring to it by its name.

DEF and USE

The way to make use of instancing to generate multiple copies of defined VRML objects is through the DEF and USE keywords. DEF is used along with a VRML node to define a name for that node, as in the following:

DEF MyName NodeType {
   fieldName1 value
   fieldName2 value
}

This gives the node the name MyName. To use that node again, you just need to use the USE keyword. For instance, to define a red sphere and reuse it as a blue sphere, you could do the following:

Material { diffuseColor [1 0 0] }
DEF MySphere Sphere { }
Material { diffuseColor [0 0 1] }
USE MySphere

Now, for a simple sphere, this doesn't really save you much, but if you need to create multiple copies of a more complicated object, it can be very helpful.

Building a VRML World: Part VI

Listing 53.7 shows the last piece in our VRML world, the wishing well. This is done by creating a white cylinder and placing a black cylinder inside it to make it look like a well. In this example, the first cylinder is named Wall by the DEF keyword, and the second cylinder reuses it through USE Wall (see Figure 53.11).

Figure 53.11 : Object reuse through the DEF and USE keywords can significantly reduce the size of your VRML world if you need to use many copies of similar objects.


Listing 53.7  Xample07.wrl-Building a VRML World: Part VI
# 
# The Wishing Well
# 
   Separator {
      Material {
         diffuseColor [1 1 1]
      }
      Translation {
         translation -3 0.3333 3
      }
      DEF WishingWell Separator {
         DEF Wall Cylinder {
            radius 1
            height 0.6667
         }
         Material {
            diffuseColor [0 0 0]
         }
         Scale {
            scaleFactor 0.8 1 0.8
         }
         USE Wall
      }
   }

Adding Realism with Textures

In Chapter 52, you learned a little about how to use the Texture2 node to add realism to an object through the addition of image file textures. By default, VRML maps the image file specified by Texture2 to each entire face of the solid in question-the six faces of a cube, or the top, bottom, and curved surface of a cylinder, for instance. When mapping a texture to a surface to make it more realistic, it is best to tile small images repeatedly over the different faces.

Texture2Transform

The Texture2Transform has fields translation, rotation, scaleFactor, and center. These fields allow you to move, rotate, scale, and center the image on the solid to determine how it is applied. To make a tiled texture that is to be placed on a solid more realistic looking, the most important field is probably the scaleFactor field, which determines how many times the image will be tiled. Note that scaleFactor refers to how the coordinates of the object to which the texture is being mapped will be scaled, so scale factors greater than one result in the image appearing smaller on the object and tiled more times.

Building a VRML World: Part VII

Listing 53.8 shows an example of the texturing applied to our VRML world (the full listing on the CD-ROMs shows the textures applied to all of the objects). In this case, a rocky appearance is given to the wishing well, and other, more realistic appearances are given to the other objects in the VRML world (see Figure 53.12).

Figure 53.12 : While textures certainly lend a more realistic appearance to a VRML world, they do slow down the file transmission and rendering, so use them only when needed.


Listing 53.8  Xample08.wrl-Building a VRML World: Part VII
# 
# The Wishing Well
# 
   Separator {
      Translation {
         translation -3 0.3333 3
      }
      DEF WishingWell Separator {
         Texture2Transform {
            scaleFactor 8 1
         }
         Texture2 {
            filename "rock.jpg"
         }
         DEF Wall Cylinder {
            radius 1
            height 0.6667
         }
         Texture2 {
            filename ""
         }
         Material {
            diffuseColor [0 0 0]
         }
         Scale {
            scaleFactor 0.8 1 0.8
         }
         USE Wall
      }
   } 

NOTE
While Netscape's Live3D VRML plug-in supposedly has support for textures, it seems that this support is a little temperamental. The examples using textures in this chapter are shown using Chaco's VR Scout. If you have trouble viewing the examples with Live3D, you might want to try VR Scout instead

VRML Lighting

Lighting in VRML worlds comes from many different sources. It is possible to create lighting sources of several different types and include them in your world. Additionally, VRML browsers often have "headlights" attached to your current viewpoint, which emit light in the direction you are looking.

When designing your VRML world, you may have specific areas that you want to have light sources or camera views. If designing a VRML storefront, for instance, you might want to have lighting near each of your store's items. You'd definitely want the entry view of the VRML world near the entrance, but you might also want to create views that correspond to the different sections of your store. For our example, we just want to add some lighting and camera views to show the different effects possible.

Browser Headlights

We have not specified any lighting in the example VRML world we have been developing, so where is the light coming from? It is coming from the "headlight" supplied by the VRML browser. As shown in Figure 53.13, this fact becomes abundantly clear when we turn the headlight off.

Figure 53.13 : If the VRML browser headlight is the only light present in a VRML environment, turning it off turns everything black (except possibly the background).

DirectionalLight

The DirectionalLight node is used to create a light source that emanates from a given direction. Its fields are on, intensity, color, and direction. For example, a yellow light at full intensity coming straight down on a VRML scene would be specified as

DirectionalLight {
   on        TRUE
   intensity 1
   color     1  1 0
   direction 0 -1 0
}

Directional lighting nodes, as well as other lighting nodes, can be placed anywhere in a VRML file. Be aware, however, that if lighting nodes are placed within a compound object that is translated or rotated, this may end up affecting the position or direction of the light.

PointLight

A point light source is similar to a directional light source, except that it has a location instead of a direction-it emanates from that location in all directions.

SpotLight

The SpotLight node combines aspects of both the directional light and the point light. Like a spotlight, it has a location within the VRML world and has a direction indicating its primary focus. As you move away from its main direction, the light decreases in intensity, until it cuts off completely at the value specified in the cutOffAngle field.

Building a VRML World: Part VIII

Listing 53.9 shows the first light source that we will add to our VRML world, which is a directional yellow light shining straight down. As shown in Figure 53.14 (and shown much more clearly if you view this example in your VRML browser), the yellow light has made the white walkway and wishing well top look yellow. The grass and treetop still look green because there is already a yellow component in their color. The underside of the treetop, the tree trunk, the bottom of the house, and the walls of the wishing well all look black still because the light doesn't hit them. The roof of the house also looks black, though this is because its blue color doesn't reflect any yellow light. Of course, this doesn't show up as well in the black and white figure, but you can load the example from the CD-ROMs into your VRML browser and see the full color version.

Figure 53.14 : Placement of VRML light sources can greatly affect the appearance and apparent color of objects in the VRML world.


Listing 53.9  Xample09.wrl-Building a VRML World: Part VIII
# 
# Directional Light
# 
   Separator {
      DirectionalLight {
         on        TRUE
         intensity 1
         color     1  1 0
         direction 0 -1 0
      }
   }

To this directional light, we will add a point source of white light, shining from near the front of the VRML world (see Listing 53.10). As shown in Figure 53.15, this source lights up parts of the wishing well, tree, walkway, and roof of the house. Also, since the changes this light source makes in the scene are fairly subtle, make sure you turn your browser's headlight off.

Figure 53.15 : Point lights can have very specific effects on a VRML world, depending on their placement, color, and intensity.


Listing 53.10  Xample10.wrl-Building a VRML World: Part VIII
# 
# Point Light
# 
   Separator {
      PointLight {
         on        TRUE
         intensity 1
         color     1 1 1
         location  0 1 5
      }
   }

VRML Cameras

It is possible to define the entry point that visitors to your VRML world will take. Additionally, you can also define multiple viewpoints. Most VRML browsers allow users to select between these viewpoints.

PerspectiveCamera

The PerspectiveCamera node defines a VRML camera viewpoint into a VRML world. The most important fields in this node are the position and orientation nodes, which determine where the camera is initially located and pointed.

By default, the position of the camera is (0,0,1), and is pointed in the -z direction. The position field specifies an x, y, and z position. The orientation field has four values: The first three define an x, y, z vector direction, and the fourth is the angle to rotate the camera about the vector. Remember the right-hand rule to determine the correct rotation directions.

Switch

The Switch node is used to contain the different PerspectiveCamera nodes to ensure that only one of the camera nodes is active at one time. The whichChild field determines which child node is active by default.

Building a VRML World: Part IX

Listing 53.11 shows how multiple viewpoints can be defined in our VRML world. Figure 53.16 shows how the camera viewpoints are selected using the VR Scout VRML browser.

Figure 53.16 : The predefined VRML viewpoints can be selected by the user of the VRML browser.


Listing 53.11  Xample11.wrl-Building a VRML World: Part IX
# 
# Cameras
# 
   DEF Cameras Switch {
      whichChild 0
      DEF Entry PerspectiveCamera {
         position    0  2  12
      }
      DEF Behind PerspectiveCamera {
         position    5  2 -12
         orientation 0  1   0  2.7
      }
      DEF Above PerspectiveCamera {
         position    0 16   0
         orientation 1  0   0 -1.5708
      }
      DEF WayAbove PerspectiveCamera {
         position    0 48   0
         orientation 1  0   0 -1.5708
      }
   }

Figures 53.17 through 53.19 show the different viewpoints that have been defined and can be selected for viewing our VRML world. The camera positions and orientations are the initial positions only. They may each be changed via the normal navigation through the VRML world.

Figure 53.17 : Because of the location of the light sources in this VRML world, the rear view appears substantially black.

Figure 53.18 : The overhead view shows how close we came to our original top view drawing (see Figure 53.2) of our VRML world.

Figure 53.19 : It's possible to define truly bird's eye views of our VRML world.

Linking to the Web

VRML, like HTML, is a language meant to be used on the Internet and the Web. An essential element for this is the hypertext link. This allows VRML worlds to be linked to other VRML worlds. And if the VRML browser supports it, URLs can also be followed to HTML Web pages and other Internet resources.

WWWAnchor

Hypertext links are implemented in VRML using the WWWAnchor node. The important fields for this node is the name field, which is used to specify the URL hypertext link, and the description field, which gives a text description of the link. Objects that are defined within the WWWAnchor node are the objects to which the hypertext link is attached.

Building a VRML World: Part X

Listing 53.12 shows how the hypertext link is implemented in our VRML world. In this case, it enables viewers of the VRML world to travel to my home page. When the cursor is placed over the appropriate object in the VRML browser, the pointer becomes the hand pointer, and the URL or description appears in the status bar (see Figure 53.20).

Figure 53.20 : Embedding hypertext links in VRML objects allows VRML browsers to load and travel to other VRML worlds, and HTML-aware browsers to go to HTML Web pages.


Listing 53.12  Xample12.wrl-Building a VRML World: Part X
# 
#  The House
# 
   Separator {
      Material {
         diffuseColor [0 0 0]
      }
      Translation {
         translation -2.5 1 -3
      }
      WWWAnchor {
         name "http://www.rpi.edu/~odonnj"
         description "JOD's Home Page"
         DEF House Separator {
            Cube {
               width  2.3333
               depth  1.3333
               height 2
            }
            Material {
               diffuseColor [0 0 1]
            }
            Translation {
               translation 0 1 0
            }
            Coordinate3 {                          # Vertex Indices:
               point [-1.5 0 -1,-1.1667 1 -0.6667, #   0----2
                       1.5 0 -1, 1.1667 1 -0.6667, #   |1--3|
                       1.5 0  1, 1.1667 1  0.6667, #   |7--5|
                      -1.5 0  1,-1.1667 1  0.6667] #   6----4
            }
            IndexedFaceSet {
               coordIndex [0,2,4,6,-1,
                           1,3,5,7,-1,
                           0,2,3,1,-1,
                           2,4,5,3,-1,
                           4,6,7,5,-1,
                           6,0,1,7,-1]
            }
         }       
      }
   }

WWWInline

Another use of VRML's ability to link to the Web is through the WWWInline node. This node allows you to include VRML objects in your VRML worlds from any local VRML file or any VRML world on the Web. The syntax of the WWWInline node is

WWWInline {
   name "path of local file or URL"
}

The VRML object, objects, or VRML world defined by that file or URL will be placed into your VRML world as if the code for it was entered in the same place in your VRML code. This means that any colors, translations, or scaling in effect will also affect the inlined VRML.

Building a VRML World: Part XI

The use of the WWWInline node can be demonstrated using our example as follows. The VRML code used to define our house-the node shown in Listing 53.3 defined by DEF House Separator-can be taken out of our VRML listing and included in a file of its own as House.wrl (this file is on the CD-ROMs). Then the scene can be reconstructed exactly as it appears in Figure 53.20 by using the WWWInline node to import House.wrl back into the VRML world, as shown in Listing 53.13. While this is done with a local file, in this case, it could just as easily be done with any VRML file located on the Web.


Listing 53.13  Xample13.wrl-Building a VRML World: Part XI
WWWInline {
   name "house.wrl"
}