Lesson 1: Getting Started http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson1.

html

Lesson 1: Getting Started

Before we start coding our first VRML world we need to understand the design stage of VRML world
creation. The design stage is known as a Scene Graph. As a rule, no VRML world should be constructed
without designing a sce ne graph. It helps keep the items in your world in their proper groups.

Imagine trying to design a crude leg kicking a ball in VRML. Now imaging that you placed all items in the
world in their initial positions. Let me further explain the preceding line� You have a cylinder representing the
thigh, another s maller cylinder representing the lower leg, and an elongated sphere representing the foot.
Albeit the three shapes representing the leg are crude, they are all joined in the initial position because the
programmer positioned them in that way. Now let�s as sume the programmer failed to take into account that
when the lower leg moves, the foot must go with it and the lower leg must stay joined to the upper leg. When
the user proceeds to move the lower leg, the foot and upper leg will remain in their initial positions! Not a
very useful representation. Taking the time to design a scene graph allows you to take all of the above factors
into account.

Before designing the scene graph let us take a look at the different nodes that will be part of the graph.

1 of 3 12/3/2010 7:29 AM
Lesson 1: Getting Started http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson1.html

Now we will take a look at a scene graph for the leg example.

VRML2 File Format

All of your VRML worlds are created from simple text files as mentioned above. The file type for a VRML
world has to be *.wrl . The first line in the file, which is mandatory, is the header line. This line tells the
browse r trying to display the file various things about it. Here is the header line for all VRML2 files,

#VRML V2.0 utf8

This line indicates to the browser that the file has a VRML2 file format and that the text contained within it
uses the UTF8 coding standard. UTF8 is an ISO encoding standard that allows the text of the file to be
displayed by any t ext editor. It also facilitates displaying most characters from other countries as well. Some
examples are accented characters from Europe as well as Kanji and Hanzi characters(these are Japanese and
Chinese).

The pound sign (#) signifies a comment in VRML. The # can be placed anywhere in a file. Anything past that
sign is ignored on that line alone. There are no start and finish comment signs as in C, only the # is used in
VRML. A very simpl e VRML file follows.

#VRML V2.0 utf8

2 of 3 12/3/2010 7:29 AM
Lesson 1: Getting Started http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson1.html

Shape {

geometry Sphere { } # a simple sphere

In the example above, the comment # a simple sphere, starts at the # and ends at the end of the same line. As
in any programming commenting your code is always useful to keep track of what you are doing.

To Lesson 2

3 of 3 12/3/2010 7:29 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

Lesson 2: Basic Scenes

Shape Node

We now have an idea of what is needed to create a VRML world from the first lesson. Before we start
rendering basic shapes, let�s look at the Shape node and its associated geometry types.

The shape node has the following definition:

Shape{

exposedField SFNode appearance NULL

exposedField SFNode geometry NULL

This definition tells us that with the Shape node, we can define and render a geometric shape and its
appearance. The default for both node options is NULL. A Shape node with a NULL geometry does not do
much (it will display empty s pace). A NULL appearance with a defined geometry will display that shape with
a default color of white and no real texture. There are four basic geometric types, they are the Sphere, Cone,
Cylinder, and Box. We will look at the definition of all of these.

Let us revisit the sample code from the end of lesson 1. Here it is again with additional comments.

#VRML V2.0 utf8

#simple sphere example

#default color and no texture

Shape{

geometry Sphere { } # a simple sphere

This simple world renders a sphere with no appearance defined. So it is white with no real texture. This is as
simple a 3D VRML you will find.

Click here for VRML example

Geometric Definitions

The Sphere Node

1 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

Here is the definition for the Sphere Node:

Sphere{

field SFFloat radius 1

The radius is the only field in the sphere node. It has a default value of 1. In the example above, the sphere
node appears as a value of the geometry field in the shape node. In the same example, the sphere has a radius
of 1 even t hough it was not defined.

The Cone Node

Here is the definition of the Cone Node:

Cone{

field SFFloat bottomRadius 1

field SFFloat height 2

field SFBool side TRUE

field SFBool bottom TRUE

There are four fields for the cone node. The bottomRadius field, has a default value of 1 when it is not
defined. The height when not defined has a default value of 2. The boolean fields of side and bottom are
interesting. Their def ault is TRUE. If for example, the bottom field is set by the programmer to FALSE, the
bottom side of the cone is invisible. The same is true for the side of the cone. So it would be very easy to
create an ice cream cone. As we saw in the sphere node, the cone node can appear as a value of the geometry
field in the shape node.

The Box Node

Here is the definition for the Box Node

Box{

field SFVec3f size 2 2 2

There is one field to the box node. It defines the size of the box along the three axes that it sits on (default
being x y z and a size of 2 2 2). With this in mind, any rectangular box can be defined. Like the previous two
nodes, t he box node can appear as a value of the geometry field in the shape node.

2 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

The Cylinder Node

Here is the definition of the Cylinder Node:

Cylinder{

field SFBool bottom TRUE

field SFFloat height 2

field SFFloat radius 1

field SFBool side TRUE

field SFBool top TRUE

There are five fields in the cylinder node. A boolean field for each of the top, bottom, and side (default is
TRUE for all so that they are displayed). There are two fields to define the height and radius of the cylinder as
well (de fault is height=2 and radius=1).

We will see an example of all (except the cylinder) geometry nodes after looking at the material and
appearance nodes.

The Material and Appearance Nodes

The Appearance Node

Here is the definition for the Appearance Node:

Appearance{

exposedField SFNode material NULL

exposedField SFNode texture NULL

exposedField SFNode textureTransform NULL

There are three fields in the appearance node. All three of these fields reference other nodes. The only node
that we will be looking at is the material node. The appearance node can be a value in the appearance field of
a shape node.

The Material Node

3 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

Here is the definition for the Material Node:

Material{

exposedField SFFloat ambientIntensity 0.2

exposedField SFColor diffuseColor 0.8 0.8 0.8

exposedField SFColor emissiveColor 0 0 0

exposedField SFFloat shininess 0.2

exposedField SFColor specularColor 0 0 0

exposedField SFFloat transparency 0

There are six fields in the material node. The most commonly used field is the diffuseColor field. This field is
used to set the desired color of the entire area using a mix of the primary colors. The transparency field has a
default va lue of 0 (no transparency) and be set to a maximum value of 1 (totally transparent). Shininess has a
minimum value of 0 (a large area is shiny) and a maximum value of 1 (only a very small area is shiny). The
specularColor field defines what color to make the shine in the shininess field. The default value is 0 0 0 for a
white shine. The other two fields are not touched upon in this tutorial.

Let us now look at some examples of how we can use these tools to improve our original, simple, boring,
white sphere.

The following example is an example of a sphere with a radius of 2 and blue in color. The shininess field was
used to decrease the shiny area on the sphere

Click here for VRML example

#VRML V2.0 utf8

#blue sphere example created by Paolo Cirone

Shape {

appearance Appearance { #appearance field of shape node

material Material { #material field of appearance field

diffuseColor 0 0 1 #diffuseColor is set to a value of

# blue

#diffuseColor is a field value of the

# material node

4 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

shininess 1 #smaller shiny area than default

} #end material

} #end appearance

geometry Sphere {

radius 2

} #end sphere

} #end shape

The next example is a simple brown cone.

Click here for VRML example

#VRML V2.0 utf8

#simple brown cone example created by Paolo Cirone

Shape {

appearance Appearance { #appearance field of shape node

material Material { #material field of appearance field

diffuseColor 0.5 0.5 0 #diffuseColor is set to a value of

# brown

#diffuseColor is a field value of

# the material node

} #end material

} #end appearance

geometry Cone {} #simple cone

} #end shape

The next example is a cone. The bottom is made invisible. However there is an interesting quirk to this cone
when viewed, can you see it?

Click here for VRML example

5 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

#VRML V2.0 utf8

#quirky upsidedown ice cream cone example created by Paolo Cirone

Shape {

appearance Appearance { #appearance field of shape node

material Material { #material field of appearance field

diffuseColor 0.5 0.5 0 #diffuseColor is set to a value of

# brown

#diffuseColor is a field value of

# the material node

} #end material

} #end appearance

geometry Cone {

bottom FALSE #make bottom invisible

} #end cone

} #end shape

Here is a simple green box.

Click here for VRML example

#VRML V2.0 utf8

#simple green box example created by Paolo Cirone

Shape {

appearance Appearance { #appearance field of shape node

material Material { #material field of appearance field

diffuseColor 0 1 0 #diffuseColor is set to a value of green

#diffuseColor is a field value of the

# material node

} #end material

} #end appearance

geometry Box {

6 of 7 12/3/2010 7:31 AM
Lesson 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson2.html

size 1 2 3

} #end box

} #end shape

In case it is not evident from the examples, the diffuseColor allows you to use the three colors red, green, and
blue, as well as a mixture of two or more of them. I will leave it to you to figure out which SFColor each of
them are repr esented by.

Try creating a cylinder with radius 0.5 and a height of 4 in any color you like. Then try making the top
invisible. What do you see?

Back to Lesson 1 To Lesson 3

7 of 7 12/3/2010 7:31 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

Lesson 3: More Complex Scene

By now you should be asking yourself a couple of questions� How can I place the objects I am creating in my
world other than in the center of the screen? And how can I get more than one object on the screen so they
don�t overlap? This i s what this lesson attempts to answer for you.

Until now all objects we have created have been place in the middle of the screen when we first view the
world. VRML works with an x,y,z coordinate system. Positive x places the object to the right of the screen,
negative x, to the left . Positive y places the object up the screen, negative y, down the screen. Positive z
places the object closer to you, negative z, further from you. Another point we should clarify now is the unit
associated with radius, height, etc. represented in the pa st lesson. The sizing for height, radius, etc.
corresponds to a meter in the real world. This should help you scale your objects properly. So take the Blue
Sphere example from Lesson 2, it had a radius of 2 and thus a diameter of 4. That corresponds to a sphere
that has a radius of 2 meters in the real world.

Transformation

This is the method by which we can place objects at various distances from one another in a VRML world. As
mentioned by default an object is placed at 0 0 0 in a VRML world. The Transform Node is used to place
objects at differen t points in the world.

The Transform Node definition follows:

Transform{

eventIn MFNode addChildren

eventIn MFNode removeChildren

exposedField SFVec3f center 0 0 0

exposedField MFNode children []

exposedField SFRotation rotation 0 0 1 0

exposedField SFVec3f scale 1 1 1

exposedField SFRotation scaleOrientation 0 0 1 0

exposedField SFVec3f translation 0 0 0

field SFVec3f bboxCenter 0 0 0

field SFVec3f bboxSize -1 -1 -1

The transform node has two events and eight fields, let us take a quick look at all of them. The addChildren
event adds the passed nodes to children, and the removeChildren does the opposite. We will use the
translation field most o ften in this lesson. The translation field operates on the children of the current node
and translates them in the x y z direction specified (we will see an example later to clarify). The rotation field
executes the defined rotation on the given axis and angle. Scale is another useful field, it allows you to change
standard geometric shapes, eg. sphere to ellipsoid. The center field defines the center of rotation. The children

1 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

node lists children nodes in the current node. The remaining fields will not be used in this tutorial.

The transform node is a grouping node that can be both the parent and child to the shape node. It can also be
nested in these nodes. This is one of the most powerful nodes in VRML.

Here is a look at a simple world using the transform node.

Click here for VRML example

#VRML V2.0 utf8

#simple grey cone translated... created by Paolo Cirone

Transform{

translation -3 2 0 #move left, and up

children Shape {

appearance Appearance {

material Material {

diffuseColor 0.5 0.5 0.5

} #end material

} #end appearance

geometry Cone {} #simple cone

} #end shape

} #end transform

To review, here is what the scene graph looks like for the above example.

2 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

Here is another example with two spheres nicknamed "earth and moon"

Click here for VRML example

#VRML V2.0 utf8

#earth and moon... created by Paolo Cirone

#blue color

Shape {

appearance Appearance {

material Material {

diffuseColor 0 0 1

} #end material

} #end appearance

geometry Sphere {}

} #end shape

Transform{

translation 2 2 2

children Shape{

appearance Appearance {

material Material {

diffuseColor 0.5 0.5 0.5

} #end material

3 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

} #end appearance

geometry Sphere { radius .1}

} #end shape

} #end Transform

Here is a look at the scene graph for the preceding example.

This example shows nested Transforms.

Click here for VRML example

#nested Transforms... created by Paolo Cirone

#blue color

Shape {

appearance Appearance {

material Material {

diffuseColor 0 0 1

} #end material

} #end appearance

geometry Sphere {}

} #end shape

Transform{

translation 2 2 2

children [

Transform {

4 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

translation 1 2 -10

children Shape{

appearance Appearance {

material Material {

diffuseColor 1 0 0

} #end material

} #end appearance

geometry Sphere { }

} #end shape

} #end transform

Shape{

appearance Appearance {

material Material {

diffuseColor 0 1 0

} #end material

} #end appearance

geometry Cone { }

} #end shape

] #end children

} #end Transform

I will leave it to you to create the scene graph for this world.

Scale

Scale is a really simple concept to understand. The scale field in the transform node allows you to change the
shape of the current node. The scale field has three numbers corresponding to the stretch or compressing of
the node a long the x y and z axes. Here is a quick example to show scale�s functionality and then we will
move onto the rotation field.

Click here for VRML example

#nested Transforms with scale... created by Paolo Cirone

#blue color

Transform{

5 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

translation 1 1 -10

children [

Transform {

scale 1 3 2

translation 1 2 -1

children Shape{

*****some code cut here, see source code*****

] #end children

} #end Transform

Rotation

The rotation field in the transform node allows the programmer to flip a node around any defined axis. Let�s
look at an example and then explain what is happening.

Click here for VRML example

#rightsideup ice cream cone... created by Paolo Cirone

Transform{

rotation 1 0 0 3.14

children Shape {

appearance Appearance {

material Material {

diffuseColor 0.5 0.5 0

} #end material

} #end appearance

geometry Cone {

bottom FALSE #make bottom invisible

} #end cone

} #end shape

} #end transform

This cone still has the same quirk as the original upside-down cone presented in lesson 2. The rotation field
works in this way. The first three numbers in the list represents which axis to rotate the node on. The second
number represen ts the angle to rotate in radians. For a quick review, converting radians to degrees is linear.

6 of 7 12/3/2010 7:30 AM
Lesson 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson3.html

Here is the formula: degrees X .017444 = radians. You must make sure that your angle is between �360 and
360 for this to work properly. So in the above example , 180degrees X .017444 gave 3.14 radians. The
right-hand rule is used to determine in what direction the rotation is done in. (Refer to your high school
calculus notes for the right-hand rule.)

To review, the Transform node played a large roll in this lesson. We were able to place many nodes in one
world in different locations. We were also able to scale and rotate these nodes.

Back to Lesson 2 To Lesson 4

7 of 7 12/3/2010 7:30 AM
Lesson 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson4.html

Lesson 4: Reuse in VRML

If you are able to reuse parts of your code, then you are able to save space in your source files. Saving space
in your source files means a smaller file that users would have to download. There are two modifiers that are
used in the re use of VRML code. These two modifiers are DEF and USE. DEF and USE can be placed
wherever a node name is allowed in VRML source code.

The DEF modifier is placed before a node description. When DEF is used, a name has to be defined for this
definition. A legal name is at least 1 character but must start with a character.

The USE modifier along with the defined name is used in place of the node name and its description.

The following example shows how DEF and USE are used in VRML.

Click here for VRML example

#VRML V2.0 utf8

#DEF and USE example... Paolo Cirone

Transform{

translation 2 2 2

Shape{

appearance DEF app1 Appearance {

material Material {

diffuseColor 1 0 1

} #end material

} #end appearance

geometry Cone { }

} #end shape

} #end Transform

Shape{

appearance USE app1

geometry Sphere{}

} #end shape

You can also use DEF and USE to reuse nodes like Shape. Using these modifiers saves execution time of
VRML files on VRML browsers. Thus using the DEF and USE modifiers not only allows you to create smaller

1 of 3 12/3/2010 7:32 AM
Lesson 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson4.html

source files but it also allow s the browser to render VRML worlds faster.

Below is another example of DEF and USE.

Click here for VRML example

#VRML V2.0 utf8

#DEF USE example... created by Paolo Cirone

DEF shorttower Group{

children [

Transform{

translation 0 1 0

children [

Transform {

translation 0 1.5 0

children Shape{

appearance Appearance {

material Material {

diffuseColor 1 0 0

} #end material

} #end appearance

geometry Cone { }

} #end shape

} #end transform

Shape{

appearance Appearance {

material Material {

diffuseColor 0 1 0

} #end material

} #end appearance

geometry Cylinder { height 1 }

} #end shape

] #end children

2 of 3 12/3/2010 7:32 AM
Lesson 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson4.html

} #end Transform

] #end children

} #end group

Transform{

translation 0 1 0

rotation 1 0 0 3.14

children USE shorttower

} #end transform

The example above contains two short cylinders and two cones. We use the Group Node to group one
cylinder and cone. We then used DEF to give the grouping a name. We then reused the two nodes in the third
Transform node.

We have not yet seen the Group Node. A group node is the same as the transform node without the
transformation fields. Like the transform node, the group node can appear as a parent or child of a grouping
node.

Back to Lesson 3 To Lesson 5

3 of 3 12/3/2010 7:32 AM
Lesson 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson5.html

Lesson 5: Complex Objects

Here you will be introduced to the IndexedFaceSet node. This node will allow us to create shapes more
complex than the four geometric shapes discussed thus far. VRML browsers have trouble rendering shapes
that are non-convex. More time is needed in the rendering process if a face of a shape is non-convex. An
ideal 3D shape is a collection of convex joined flat faces. Each convex flat face lies in one plane.

The diagram below shows the difference between convex and non-convex faces. If a face is non-convex, it is
best to make the face a collection of convex faces.

Here is the definition for the IndexedFaceSet Node.

IndexedFaceSet{

eventIn MFInt32 set_colorIndex

eventIn MFInt32 set_coordIndex

eventIn MFInt32 set_normalIndex

eventIn MFInt32 set_texCoordIndex

exposedField SFNode color NULL

1 of 4 12/3/2010 7:32 AM
Lesson 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson5.html

exposedField SFNode coord NULL

exposedField SFNode normal NULL

exposedField SFNode texCoord NULL

field SFBool ccw TRUE

field MFInt32 colorIndex []

field SFBool colorPerVertex TRUE

field SFBool convex TRUE

field MFInt32 colorIndex []

field SFFloat creaseAngle 0

field MFInt32 normalIndex []

field SFBool normalPerVertex TRUE

field SFBool solid TRUE

field MFInt32 texCoordIndex []

The indexedfaceset node has four events and fourteen fields. By now, most of these fields and events should
be self-explanatory. I will describe the newer fields though.

The ccw field or counter-clockwise field determines which side of the face is displayed or visible. If the ccw
is FALSE, the face is visible from the bottom. (looking up from the y axis) If the ccw is TRUE, then the face
is visible from the top.

The convex field is set to TRUE forces all faces to be convex. If any of the faces are non-convex and the
field is set to TRUE the rendering will be undefined. If the field is set to FALSE, some of the faces may be
non-convex.

The solid field allows both sides of a face to be visible if set to FALSE. The default is TRUE, thus, only one
face is visible which is determined by the ccw field.

the creaseAngle field determines at what angle in radians you will see a crease between two faces. The
normal field must be the default NULL for this to work.

The IndexedFaceSet node can appear in the geometry field of a shape node.

Here are some examples that show IndexedFaceSet at work.

Click here for VRML example

2 of 4 12/3/2010 7:32 AM
Lesson 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson5.html

#VRML V2.0 utf8

#indexedfaceset example... created by Paolo Cirone

Shape {

geometry IndexedFaceSet {

solid FALSE #make visible from top and bottom

coord Coordinate {

point [0 1 0, 1 0 0, 2 1 3]

} #end coordinate

coordIndex [0, 1, 2, -1]

} #end indexedfaceset

} #end shape

The bold line that starts with point defines which three points to join. The first point (0 1 0) has an index of 0,
the second (1 0 0) has an index of 1, and the third (2 1 3) has an index of 2. The bold line coordIndex
outlines which points to join. In this case it is all three. The �1 at the end of the sequence simple indicates the
end of the Index. The FALSE value of the solid field tells the browser to make both sides of the triangle
visible.

Here is a more complex example, it is an open box.

Click here for VRML example

#openbox example... created by Paolo Cirone

Transform{

rotation 0 1 0 .78 #rotate 45 degrees about y axis

children Shape {

appearance Appearance {

material Material {

diffuseColor 0 1 0.5 #light green color

}#end material

}#end appearance

geometry IndexedFaceSet {

solid FALSE #make visible from top and bottom

coord Coordinate {

3 of 4 12/3/2010 7:32 AM
Lesson 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson5.html

point [1 1 1, 1 -1 1, -1 -1 1, -1 1 1,

-1 1 -1, -1 -1 -1, 1 -1 -1, 1 1 -1,

1.5 1.5 1, 1.5 1.5 -1,

-1.5 1.5 1, -1.5 1.5 -1]

} #end coordinate

coordIndex [0,1,2,3,-1, #5 sides

0,1,6,7,-1,

1,6,5,2,-1,

3,2,5,4,-1,

5,6,7,4,-1,

0,7,9,8,-1, #2 flaps

4,3,10,11,-1]

} #end indexedfaceset

} #end shape

} #end transform

Here is the diagram of the box in the x y z plane.

To summarize, the IndexedFaceSet node allows you to create any shape you like.

Back to Lesson 4 To Lesson 6

4 of 4 12/3/2010 7:32 AM
Lesson 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson6.html

Lesson 6: The Elevation Grid

So now that we have the tools to build almost any type of shape, we need to place them on something. Until
now all of our worlds have been floating on a black background. There is a node designed specifically for
designing a base for yo ur worlds. This node is known as the ElevationGrid Node.

I will explain how the ElevationGrid Node works after the definition is presented to you.

ElevationGrid {

eventIn MFFloat set_height

exposedField SFNode color NULL

exposedField SFNode normal NULL

exposedField SFNode texCoord NULL

field MFFloat height []

field SFBool ccw TRUE

field SFBool colorPerVertex TRUE

field SFFloat creaseAngle 0

field SFBool normalPerVertex TRUE

field SFBool solid TRUE

field SFInt32 xDimension 0

field SFFloat xSpacing 0.0

field SFInt32 zDimension 0

field SFFloat zSpacing 0.0

Here is a description of the fields we will be using here. The fields ccw and solid have the same functionality
of the IndexedFaceSet node.

The field xDimension is the number of vertices in the x plane, and the zDimension is the number of vertices in
the z plane. The xSpacing and z Spacing fields tell the browser how far apart to place each vertex in their
respective plane.

The height field defines the elevation at each vertex starting from the lower-left corner of the grid created by
the x and z vertices. The height field has xDimension X zDimension number of values. So if you have 5 for
xDimension and 10 for zDimension you must definne 50 height values.

The ElevationGrid node can appear as a value in the geometry node.

Let�s look at a simple example to get a better feel for the node.

1 of 3 12/3/2010 7:42 AM
Lesson 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson6.html

Click here for VRML example

#VRML V2.0 utf8

#simple elevation example... created by Paolo Cirone

Shape {

appearance Appearance {

material Material {

diffuseColor 0 1 0

} #end appearance

geometry ElevationGrid {

solid FALSE

height [0, 0.1, 0.1, 0,

1.2, 2.1, 1.9, 1.4,

0.2, 0.2, 0.5, 0]

xDimension 4 #4 vertices in the x plane

zDimension 3 #3 vertices in the z plane

xSpacing 1 #spacing of 1 meter for x plane

zSpacing 2 #spacing of 2 meters for z plane

} #end elevationgrid

} #end shape

From the example, you should be able to discern in what order the heights are applied to the elevation grid.

Here is a diagram to help you understand.

2 of 3 12/3/2010 7:42 AM
Lesson 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson6.html

It should be noted that the IndexedFaceSet can get you the exact same results as the ElevationGrid. The
difference is with the ElevationGrid, you only define the height at each point instead of x,y, and z if you wer
using the IndexedFac eSet. This saves time programming and space on your source file.

Back to Lesson 5 To Lesson 7

3 of 3 12/3/2010 7:42 AM
Lesson 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson7.html

Lesson 7: Illuminating Your World

In all of the worlds we have seen thus far, only one light source has been present. Every VRML browser has
what is known as a headlight built into it. The direction of this light is in the same direction you are looking at
the scene. Ev en when you change your viewpoint, the light still hits all objects dead-on. This last lesson
introduces two new nodes. Each of which can facilitate light operations on your scene. The first node is called
DirectionalLight. It is used for simple light ope rations. For more advanced light sources we will look into the
PointLight node. We will tackle one at a time.

First, here is the definition of the DirectionalLight node.

DirectionalLight {

exposedField SFFloat ambientIntensity 0

exposedField SFColor color 1 1 1

exposedField SFVec3f direction 0 0 -1

exposedField SFFloat intensity 1

exposedField SFBool on TRUE

This node has only five fields. The field ambientIntensity determines the intensity applied to all objects in the
scene. The color is the color of highlight applied to all objects the light will shine on in the scene. The field
dire ction is the direction the light is pointing. The field intensity determines the intensity of the color being
generated from the light source. The field on places light on all objects in the scene if set to TRUE and on
none of the objects if set to FALSE.

The DirectionalLight node can appear as both the parent and child of a grouping node.

Here is an example to show DirectionalLight at work.

Click here for VRML example

#VRML V2.0 utf8

#Sphere with Directional Light... created by Paolo Cirone

Group{

children [

DirectionalLight{

direction 0 -1 0 #light from below

intensity 0.5

1 of 3 12/3/2010 7:43 AM
Lesson 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson7.html

DirectionalLight{

direction 1 0 0 #softer light from left

intensity 0.25

Shape {

appearance Appearance {

material Material {

diffuseColor 0.5 0.5 1

geometry Sphere { }

} #end shape

] #end children

} #end group

When viewing the above example, turn off the headlight on the browser to get a better idea of where the
directional light is really coming from.

Next we take a look at the PointLight node. This node allows the programmer to generate a light from a
particular point in the scene. Say you created a VRML lamp. Then you can easily produce a light source from
that lamp. You can contro l what area this light can cover. Of course, the light hits objects in range at the
appropriate angle relative to the lamp. The example will further show the nodes capability. For now, here is
the PointLight node definition.

PointLight {

exposedField SFFloat ambientIntensity 0

exposedField SFVec3f attenuation 1 0 0

exposedField SFColor color 1 1 1

exposedField SFVec3f location 0 0 0

exposedField SFFloat intensity 1

exposedField SFBool on TRUE

exposedField SFFloat radius 100

There are two new fields and one field changed in the PointLight node as opposed to the DirectionalLight
node. The location field replaces the direction field and represents the light source relative to the surrounding

2 of 3 12/3/2010 7:43 AM
Lesson 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/lesson7.html

coordinate sp ace. The radius field represents the radius of the hypothetical sphere that the light covers in the
coordinate space. The attenuation allows you to control light intensity from the source to its limit. The first
floating point represents a constant, the s econd a linear function, and the third an exponential intensity.

The PointLight node can appear at the top level of VRML source code or as a child of a grouping node.

Here is an example to further illustrate the used of this node.

Click here for VRML example

#VRML V2.0 utf8

#nested Transforms with PointLight... created by Paolo Cirone

Group{

children [

PointLight {

location 0 0 0

} #end pointlight with default 100m radius

Shape {

appearance Appearance {

***skip some code***

] #end children

} #end group

Some of the code was skipped to save space. You can peek the code from the browser if you like. You should
notice that once you look at the source code, you see that three spheres are defined. When you browse the
scene however, four sph eres are present. Why??? Once again, turn off the headlight on the browser. You will
see that only 3 of the spheres have been lit. The remaining unlit sphere is the light source. I left it visible so
that you can see what the source is in this scene.

Back to Lesson 6

3 of 3 12/3/2010 7:43 AM