View
235
Download
0
Category
Preview:
Citation preview
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 1/30
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 thethigh, 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.
n 1: Getting Started http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 2/30
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 3/30
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
n 1: Getting Started http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 4/30
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 witha 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
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 5/30
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.
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 6/30
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
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 7/30
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
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 8/30
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
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 9/30
#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 {
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 10/30
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
n 2: Basic Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 11/30
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 placeobjects 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
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 12/30
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.
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 13/30
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
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 14/30
} #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
#VRML V2.0 utf8
#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 {
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 15/30
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
#VRML V2.0 utf8
#nested Transforms with scale... created by Paolo Cirone
#blue color
Transform{
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 16/30
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
#VRML V2.0 utf8
#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.
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 17/30
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
n 3: More Complex Scenes http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 18/30
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 thisdefinition. 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
n 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 19/30
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
n 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 20/30
} #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
n 4: Reuse in VRML http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 21/30
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
n 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 22/30
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 faceis 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
n 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 23/30
#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
#VRML V2.0 utf8
#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 {
n 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 24/30
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
n 5: Complex Objects http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 25/30
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 inthe 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.
n 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 26/30
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.
n 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 27/30
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
n 6: The Elevation Grid http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 28/30
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
n 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 29/30
}
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
n 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
12/3/2010
8/8/2019 Vrml Cas Tutorial
http://slidepdf.com/reader/full/vrml-cas-tutorial 30/30
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
n 7: Illuminating Your World http://www.cas.mcmaster.ca/~se4d03/examples.vrml/polo/les
Recommended