Virtual Reality Modeling Language (VRML)

Virtual Reality Modeling Language (VRML)
By
Ahmed Fawzy Gad
Faculty of Computers and Information (FCI)
Menoufia University
Egypt
ahmed.fawzy@ci.menofia.edu.eg
MENOUFIA UNIVERSITY
FACULTY OF COMPUTERS
AND INFORMATION
INFORMATION
TECHNOLOGY DIPLOMA
‫المنوفية‬ ‫جامعة‬
‫والمعلومات‬ ‫الحاسبات‬ ‫كلية‬
‫المعلومات‬ ‫تكنولوجيا‬ ‫دبلومة‬‫المنوفية‬ ‫جامعة‬

Virtual Reality Modeling Language (VRML)
VRML Modeling language
Create model >> model represent real world objects.
Object has a set of properties.
VRML has nodes and each node has fields.
Node start with a capital letter but field not.
Any computer language provides a set of commands to be used. These commands are stored in
a file relative to the corresponding programming language.
For example, the different computer languages like Java, C++, Python, PHP and VRML all have
their own files to store its code. But what differentiates file of one language from another?
There are two properties to any file that say it is for a specific programming language:
1. File extension: Specifies the language used in this file. .java for Java, .cpp for C++, .php
for PHP and .wrl for VRML.
2. File header: Specifies additional properties for the file. It is used to specify the VRML
version and file encoding >> #VRML V2.0 utf8
UTF = Unicode Transformation Format
Virtual worlds are used to model the real world. Real world consists of a number of objects.
Each object has a set of properties.
In VRML objects are referred to as nodes. Objects properties are called fields in VRML.
Real world objects are represented in VRML using a collection of points, lines, boxes, spheres,
cylinders, cones, etc.
All of these are called shapes.
In general, any real world object is represented in VRML as shapes.
So the first step in VRML is to create a Shape node. Any node will have two braes {} to group
their fields.
Shape {
}
Next is to specify the geometry of the shape. That is the specific type of that shape (e.g., box,
sphere, etc). This is done using the geometry field in the Shape node.
Any geometry has a number of properties that specifies its shape. For example, sphere has a
radius, box has width, height and depth and cylinder has a radius and height.
For the sphere geometry:
Shape {
geometry Sphere {
radius 1
}
}
Then run the file and explain the environment navigation options:

 Walk
 Study
Navigation can be with keyboard arrows or mouse.
VRML Geometries:
 Box
 Cylinder
 Cone
 Sphere
 Text
For the cylinder geometry:
Shape {
geometry Text {
string [“Test Test”] # single line
string [“Ahmed”
“Mohamed”] # multiple lines
length 4 #specifies the length of each character
#To style text, use the textStyle property
textStyle TextStyle {
size 5 #specifies font size
horizontal TRUE #text displayed horizontally or vertically
family ["SERIF", "SANS", "TYPEWRITER"]
style [“PLAIN”, “BOLD”, “ITALIC”,”BOLDITALIC” ]
}
}
}
Shape {
geometry Cylinder {
radius 1
height 2
}
}
Shape {
geometry Cone {
bottomRadius 1

height 2
}
}
For the box geometry:
Shape {
geometry Box {
size 1 2 3
}
}
Remember that VRML is used to model the real world objects.
Real world objects can be such as wood.
To create wood :
Shape {
geometry Box {
size 1 .1 2
}
}
One can`t know that this is wood because the model appearance doesn`t exhibit wood
properties. One can say it is wood or glass.
But the wood material has a number of distinctive properties. To model these properties in the
virtual world, VRML uses the appearance property in the Shape node.
VRML specify model appearance in terms of:
 Material properties
 Texture properties
The Material node has number fields:
1. Diffuse color: normal color
2. Ambient color
3. Emissive color
4. Specular color
5. Shininess
6. Transparency
Color can be specified using different color models or color spaces. These include RGB, HSV, XYZ,
CMYK, etc.
Default color space in VRML is RGB.
RGB colors are normally in the range from 0 to 255 but in VRML it is scaled from 0 to 1.
Wood RGB color is 1.0 0.45 0.23
Shape {
geometry Box {

size 1 .1 2
}
appearance Appearance{
material Material{
diffuseColor 1.0 0.45 0.23
}
}
}
Checking the exact material properties such as its color, reflectance, shininess is tiresome.
Rather than using the material properties, texture can be used to simplify the process.
The texture property has a number of nodes:
1. ImageTexture
2. MovieTexture
3. PixelTexture
For the ImageTexture node:
Shape {
geometry Box{
Size 1 .1 2
}
appearance Appearance{
texture ImageTexture{
url [“image_path.jpg/gif/png”]
}
}
}
Movie Texture:
texture MovieTexture {
url["spider.mpg"]
loop TRUE
speed 2
}
VRML size values are relative to the scene origin
Note that values can be relative or absolute.
Absolute value can be such as color of red. This value doesn`t depend on any other values.
Relative values are such as length of 2 meters. This value is relative to the zero point. This
means that object is far away from 0 by 2.

Example: Color is red with value of 1 0 0. The red value is absolute. But its numbers are relative
to zero.
Example: it is 2016 Gregorian. This is a relative value to the birth of the Jesus.
3D scene is called 3D because it has three axes (x, y, and z).
Explain the three main axes in the scene (x, y, and z) using an example of the box.
Another example:
What does it mean that a sphere has a height of 5? First the size is a relative value of 0 which is
the center of the scene.
Geometries and axes
There are geometries that fly in all existing axes such as box that uses x, y, and z.
There are other geometries that use only one or two axes such as cylinder that allow the y axis
to be changed.

Introduction to Grouping Nodes
Suppose that there are a large number of nodes say 100 to have the same red color. Using
normal approach it will be required to assign them individually the red color.
Using grouping nodes life will be easier. Grouping nodes allows different shapes to be assigned
the same property.
So rather than assigning them the red color individually it will be more convenient to group all of
them under a single color.
VRML Grouping Nodes
 Transform
 Anchor
 Switch
 Billboard
 Group
 Collision
All grouping nodes provide a way to group other nodes that can be treated as a single entity.
Some grouping nodes just group other nodes and others group these nodes and provide
operation for them.
Transform grouping node:
New things human learn can fall in two categories:
1. There was a problem and learning this thing will solve that problem
2. There was not a problem but the operation of that thing will be enhanced after learning
that thing
There was a problem and the transform grouping node will solve that problem. Let us discuss
one of the problems that the transform node can solve.
Show an example that shows the benefit of these operations. It is possible to add more than
one shape in the scene. Remember that anything in VRML starts from the scene origin (0,0,0).
The problem is that both shapes will appear at the same location (0,0,0) and the last shape
drawn in the scene will be the visible one.
Shape{
geometry Box {

size 2 2 2
}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
}
Shape {
geometry Box {
size 2 2 2
}
material Material {
diffuseColor 0 1 0
}
}
}
To solve that problem, one shape needs to get moved from its location to avoid confliction.
Some transformation operations are available in VRML that includes:
1. Translation
2. Rotation
3. Scaling
These operations apply over the entire shape not on part of it.
Remember the general idea of grouping nodes is one grouping node contains other nodes. The
grouping node can be called parent node. The nodes it contains are called child nodes.
The Transform node has two main fields:
1. Field to specify the child nodes of the parent Transform node
2. Field to specify the operation to be applied over all of the child nodes
Transform {
children
translation
scale
rotation
}

How to specify the transform node children by an example:
Transform {
children [
Shape{
geometry Box {
size 2 2 2
}
material Material {
diffuseColor 1 0 0
}
}
}
Shape {
geometry Box {
size 2 2 2
}
material Material {
diffuseColor 0 1 0
}
}
}
]}
How to specify the operation to be applied over the transform node
children by an example:
Translation operation:
This operation moves the shape from its position to another position. Because the object
position is specified in three axes (x, y, and z), there is a way to move the object along these
axes.
Explain that these values can be positive or negative by drawing the number line for x-axis and
y-axis in +&-.
 Positive value moves the object to the positive direction of the axis
 Negative value moves the object to the negative direction of the axis
It is easy to know the positive and negative values of the x and y axes. But for the z-axis, what
are its positive and negative directions?

Positive translation over the z-axis moves the object nearer. Negative z-axis translation values
moves the object away.
If there is time, explain how a simple translation operation affects a simple shape of a few
numbers of points.
Tasks:
Create a table with four legs with a texture.
Scaling operation:
Size of the shape can be specified in regular ways in its corresponding geometry.
After the size is specified, the scaling operation can change the shape size. It can make the
shape appear larger than it is or smaller than it is or keep the shape on its original size.
Scaling is similar to translation that it can be applied over the three axes.
Default scaling is 1 1 1 for the x, y, and z axes.
Scaling values:
1. Positive: To make the shape larger
2. Negative: To make the shape smaller
3. Zero: Zero at any axis hides the shape
Rotation operation
Test the rotation in the viewer.
Rotation around x and y axes are performed via the study >> turn option:
1. Right and left buttons rotate object around y-axis
2. Up and bottom buttons rotate object around x-axis
Rotation around z-axis is accessed from the study >> roll option:
1. Right and left buttons rotate object around z-axis
Example:
Add three boxes of size 2 2 2 along the x-axis separated by 3 meters each.
Anchor grouping node
The Anchor node is like other grouping nodes (parent nodes) contains other nodes as their
children. This node also provides an operation for its children.
It makes its children clickable so after clicking on a node it will go to another link.
Anchor {
url "http://www.google.com"
description "Google.com"
children [

Shape {
geometry Box{
size 2 2 2
}
material Material {
diffuseColor 1 1 0
}
}
}
]}
Billboard grouping node
The children in the Billboard grouping node will always turn to face you as a sunflower that turn
to face sun as sun moves.
Billboard {
children [
Shape {
geometry Box{
size 2 2 2
}
material Material {
diffuseColor 1 1 0
}
}
}
Transform {
translation 5 0 0
children [
Shape{
geometry Box {
size 2 2 2
}

material Material {
diffuseColor 1 0 0
}
}
}
]}
Transform {
translation -5 0 0
children [
Shape{
geometry Box {
size 2 2 2
}
material Material {
diffuseColor 0 0 1
}
}
}
]}
]}
Switch grouping node
This node allows only one of its children nodes to be visible at a time.
As a regular node, it will have a way to group other nodes. Also it will have a way to select the
node to be visible.
Switch {
whichChoice
choice []
}
Node numbering starts from 0.
Choice of negative or of a number higher than the number of existing nodes, none of the
children will be visible.

Viewpoint node
The viewer has a specific location in the virtual world. This location can be changed using the
Viewpoint node.
Viewpoint {
position 0 0 5
}
There are other nodes that depend on the viewer location.
One node is the sound node.
Sound node
It is used to add sound in the VRML scene.
Sound files supported are MIDI and WAVE.
The sound file can be added using two ways:
1. MovieTexture
2. AudioClip
Sound {
source MovieTexture {
url ["audio.mpg"]
loop TRUE
}
}
Sound {
source AudioClip {
url ["audio.wav"]
loop TRUE
}
}
It can be easily noted that the sound get lower or higher as the viewer change its location.
This is the same effect of the real world. The speakers in the real world have a specific location
and as the person get near and far from the audio source the audio is higher and lower
respectively.
So it is required to specify the audio source location. Default source location is 0 0 0. So there is
a distance between the audio source and viewer of 10 meters that makes the audio level low.
As the viewer and audio location get nearer, the audio level gets higher.

Sound {
location 0 0 10
source AudioClip {
url ["audio.wav"]
loop TRUE
}
}
The audio also has a range in which it can be heard.
The audio in VRML has a spherical shape that can be controlled using four fields:
Sound {
maxBack 10
minBack 1
maxFront 10
minFront 1
url "spider.mpg"
loop TRUE
}
}
Example: Add a movie texture on a box and play its sound too.
Shape {
geometry Box {
size 5 5 2
}
texture MovieTexture {
url "spider.mpg"
loop TRUE
}
}
}
Sound {
url "spider.mpg"
loop TRUE
}
}

Code Reuse
There are different ways in computer programming to create code and use it later (code reuse).
That is a piece of code is written once and used many.
In VRML, it is supported through different ways:
 Inline node
 DEF and USE
 PROTO
 EXTERNPROTO
These nodes can be compared using two points:
1. Support code reuse from different file or from same file
2. Reuse for entire file or part of the file
3. Support or not changing original
This is a brief explanation.
The code to be imported can be in the same file used or in different file.
If in different file, there are ways to import the entire VRML file without changing it or part of
that file with/without changing it into another.
If in the same file, there are ways to reuse a specific part of it multiple times with or without
changing it.
Inline Node
It is used to import entire VRML file into different file without changing it.
Inline {
url ["table.wrl"]
}
This node has the same effect of just copying and pasting the entire code from the file in the
URL into the destination file.
DEF and USE
This way works inside the same file to reuse a specific part of it without changing the code.
VRML has a number of built-in nodes. This way creates new nodes inside VRML.
DEF and USE are not VRML nodes but they are VRML keywords.
Keywords of a computer language are words reserved for use by the languages and the user
can`t use them as names.

To define a node, just add DEF before it followed by the new node name.
DEF Wood Shape {
geometry Box{
size 2 .2 2
}
material Material {
diffuseColor 1 0 0
}
}
}
The new node Wood can be used as other nodes in VRML.
To use it:
USE Wood
The previous two methods allow to reuse the code but without changing it.
PROTO
It can be explained by an example: Assume that a company tries to produce cars. These cars
have a specific property such as color. But before the company chooses the final color for the
car, it provides its customers different colors and then chooses the most appropriate one.
There is also a way in VRML to create shapes but allow changing its fields easily.
PROTO is to reuse part of the code in the same file with or without changing it.
Prototype has two main parts:
1. Define the code to be reused
2. Define the fields to be changed in the code
After creating a prototype with a specific name, it becomes a new node in VRML. This node will
have the fields defined in the prototype.
PROTO Test
[]
{ }
PROTO Test
[]

{
Shape {
geometry Box{
size 2 .2 2
}
material Material {
diffuseColor 1 0 0
}
}
}
}
To reuse the prototype:
Test {}
Note that in DEF and USE method, there was no {} because {} of a node are used to contain the
fields of the node to be changes. But in this way there wasn`t any fields in the node to be
changed so {} are not required.
Remaining PROTO part is advanced and will be discussed later.
But PROTO allows to have a number of fields in the node to be changed so {} are required.
The previous example just creates a node without being able to change its fields.
To create PROTO with fields that can be changed, first it is required to define the fields to get
changed.
For each field to be changed, it is required to have type, name, and default value.
Name of the field can be a name of an existing keyword in VRML.
To assign the field to a node field, use IS keyword that is equal to regular assignments in
programming languages.
VRML Data Types
It is required to know the general idea of these fields in VRML.
There are different data types in VRML:
 Boolean
 Float
 Integer
 String
 Rotation
 Time
 2D float vector

 3D float vector
 Color
Some fields start with SF and others start with MF.
SF is short for single field and just allow single values
 SFInt32
 SFBoolean
 SFFloat
 SFRotation
 SFString
 SFVec2f
 SFVec3f
Explain the types of each field in the previously discussed nodes.
Box has size field that is SFVec3f, Cylinder has radius field that is SFFloat and height field that is
SFFloat, Appearance has diffuseColor field that is SFColor.
Text has string field that is MFString.
Then explain each of these types.
Give an example about SFVec3f for size.
and MF is short for multiple fields. For example, SFInt
PROTO Test
[
field SFColor testColor 1 0 0
]
{
Shape {
geometry Box{
size 2 .2 2
}
material Material {
diffuseColor IS testColor
}
}
}
}

EXTERNPROTO
It is identical to PROTO except that PROTO can be used inside the file it was defined but
EXTERNROTO can be used into another file that the one it was defined.
Thus the prototype is defined in external file and used into another file.
It also has the same structure of normal PROTO in addition to a way of specifiying the file
containing the prototype.
EXTERNPROTO Test {}
But unfortunately it is no longer supported by many VRML viewers.
There are some points left to be explained later try to cover it.
Cylinder node
In addition to the radius and height fields, the Cylinder node has some fields that controls which
part of the cylinder will appear. All of them are Boolean that are by default set to TRUE.
1. side: Show or hide side
2. top: Show/hide top of the cylinder
3. bottom: Show/hide bottom of the cylinder
Shape {
geometry Cylinder {
radius 2
height 2
bottom TRUE
side TRUE
top FALSE
}
material Material {
diffuseColor 1 0 0
}
}
}
Cone node
Similar to Cylinder node, it has two optional fields to control its side and bottom.
1. side: Show/hide cone side
2. bottom: Show/hide cone bottom

Shape {
geometry Cone {
bottomRadius 2
height 2
bottom FALSE
side TRUE
}
material Material {
diffuseColor 1 0 0
}
}
}
Material node
As known the material node specifies properties of the objects found in the real world. For
example the color of the object is based on its material characteristics. Metal has a material that
has some properties different from plastic, aluminum, etc.
Some material properties just depend on the material only and some other properties depends
on the material and its surrounding environment such as light sources found in the scene.
To make them fully understand how the different material properties affect the object color it
will require to explain how light sources work and what are the different components of colors
and how to calculate the color that appears on the object based on the light sources, other
reflecting objects, shading and other factors in the scene. No time no detailed explanation no
full understanding no experts.
To explain the colors as much as possible, at first try to make them correctly know that the main
color in the object is the diffuse color. Then other colors will affect the diffuse color in different
ways. So add diffuse color to a shape such as a Sphere and then add other color components
step by step and explain the effect of that new color.
The fields found in the Material node:
1. diffuseColor: The main color of the object
2. transparency: Controls the transparency of the object.
3. emissiveColor: By default objects are seen as a reflection of the light falling on these
objects. Some objects are self-illuminating and show a color in case of absence of light.
The emissive color of the object is the color that the object has when no light source
found.
4. ambientIntensity: A single valued field showing how the effect of the indirect light
sources on the object. There will be a light source that is not directly in front of the
object but light from that source can reach that object by different means such as

reflection. After reaching the object it will affect it proportionally to the ambient
intensity.
5. specularColor: Light falling on the object can create shiny spots.
6. shininess: Controls the shiny area of the object. Small values represent less sharpness
and large shiny areas and higher values represent high sharpness and small shiny areas.
Drawing using points
Previous work creates real-world objects using a set of simple geometries (box, cone, sphere,
cylinder). It can be required to create shapes using a higher level of details that requires
specifying the objects as a set of points.
Three nodes in VRML create this task:
1. PointSet
2. IndexedLineSet
3. IndexedFaceSet
All of these nodes specify a set of points that creates the object. Two basic operations
performed in these nodes are required to be listed:
1. Shape points using coord field and Coordinate node
2. Points colors using color field and Color node
All of them use the same way to specify the points of the object using the coord field. The coord
field creates Coordinate node that holds the actual points in the shape.
They also use the same way to specify the color of the points using the color field. The color
field creates Color node that holds the color of each point in the shape.
The number of points and the number of colors are required to be equal.
Color can be specified also in the Material node using emissiveColor field.
geometry PointSet {
coord Coordinate {
}
color Color {
}
}
geometry IndexedLineSet {
coord Coordinate {
}
color Color {
}
}

geometry IndexedFaceSet {
coord Coordinate {
}
color Color {
}
}
PointSet
Creates objects as a set of separated points. This node has only two fields:
coord: This field is used to specify the points in the shape.
color: Color of each point in the shape.
As said previously, to specify the points of the shape, use the Coordinate node. This node has a
single field called point that holds the points as 3 values for each point separated by commas or
spaces.
Example:
Shape {
geometry PointSet{
coord Coordinate {
point [0 0 0 0 0 10 0 0 -10] # point [0 0 0, 0 0 10, 0 0 -10]
}
}
}
But this will show nothing because the default color used is black. To change the color of each
point, use the color field. It will have a Color node with a single field called color that holds
colors as three values each separated by spaces or commas.
Example:
Shape {
geometry PointSet{
coord Coordinate {
point [0 0 0 0 0 10 0 0 -10]
}
color Color {
color [1 0 0 0 1 0 0 0 1] # color [1 0 0, 0 1 0, 0 0 1]
}
}
}

The emissiveColor Material node field can be used to specify the color of all points to the same
color:
Shape {
geometry PointSet{
coord Coordinate {
point [0 0 0 0 0 10 0 0 -10]
}
}
material Material {
emissiveColor 1 0 0
}
}
}
If color was specified using the color field in the Color node and also using the emissiveColor
field in the Material node the color in the Color node will be used.
IndexedLineSet
It will have the same way to specify the coordinate points and their colors.
Show an example that just replaces the PointSet by IndexedLineSet to explain that no difference
between them in specifying the coordinate points and their colors.
Shape {
coord Coordinate {
point [0 0 0 0 0 10 0 0 -10]
}
}
material Material {
emissiveColor 1 0 0
}
}
}
But this will not show anything. This is because PointSet just creates points and its job ends by
listing the points of the shape but IndexedLineSet requires creating lines. So its job will not end
by listing the points but it also requires connecting these points to create lines.

There is a new field called coordIndex that specify the points to be connected. This field takes
the indices of the points and connects each to subsequent points. Points` indices start from 0 to
number of points-1.
Example 1: Create a triangle using the IndexedLineSet:
Shape {
coord Coordinate {
point [2 0 0, 0 2 2, 0 -2 2]
}
coordIndex [0 1 2 0]
}
material Material {
emissiveColor 1 0 0
}
}
}
What is the color of the line?
Color of the points was just specified so how the line color will be calculated?
Using the emissiveColor field all points will have the same color and also lines connecting these
points.
But using the Color node things will look different.
Shape {
coord Coordinate {
point [2 0 0, 0 2 2, 0 -2 2]
}
coordIndex [0 1 2 0]
color Color {
color [1 0 0, 0 1 0, 0 0 1]
}
}
}
Color of the line is the gradient of color from the starting point color to the end point color. So
the color will change to start from the color of the first point until reaching the color of the
second point.
More points example
Shape {

coord Coordinate {
point [2 0 0, 0 2 2, 0 -2 2, 3 1 -2, -3 2 4]
}
coordIndex [0 1 2 3 4]
}
material Material {
emissiveColor 1 0 0
}
}
}
This connects the first point with index 0 (2, 0, 0) to the second point with index 1 (0, 2, 2) and
connects the second point to the last point with index 2 (0, -2, 2) and so on.
Order of connection can be changed to any other order.
coordIndex [4 3 0 4 1 2 3 1]
Use of index -1
Shape {
coord Coordinate {
point [2 0 0, 2 2 0, -2 2 0]
}
coordIndex [0 1 -1 2 0]
}
material Material {
emissiveColor 1 0 0
}
}
}
By default specifying the coordIndex as follows [0 1 2 0] will connect point 0 by point 1 and point
1 by point 2 and finally point 2 by point 0. But what if the connection between point 1 and 2 is
not required? To end connections use the index -1. It will indicate that previous line ends and
new connection begins. Thus indices of [0 1 -1 2 0] will only connect points 0 and 1 then point 1
by point 0.
Task

Shape {
coord Coordinate {
point [2 0 0, 2 2 0, -2 2 0, -2 0 0, 0 1 2]
}
coordIndex [0 4 -1 0 1 -1 1 4 -1 1 2 -1 2 4 -1 2 3 -1 3 4 -1 3 0 -1]
}
material Material {
emissiveColor 1 0 0
}
}
}
IndexedFaceSet
Advanced and can be explained later
BillBoard grouping node

Virtual Reality Modeling Language (VRML)

Recommended

Recommended

More Related Content

More from Ahmed Gad

More from Ahmed Gad (20)

Recently uploaded

Recently uploaded (20)

Virtual Reality Modeling Language (VRML)