3. Structure of files.
Each VRML 2.0 file contains header #VRML V2.0 utf8.
Text nodes may contain multiple
text strings specified using the UTF-8 encoding as specified by the ISO
10646-1:1993 standard (http://www.iso.ch/cate/d18741.html).
After header is name of file(must be in the same line as header).
After header file can contain:
- Prototypes
- Children Nodes
- Route statements
In the following example we use Shape child node.
Each command is explained later.
| Example 1.wrl
#VRML V2.0 utf8 example1.wrl
Shape
{
appearance Appearance
{
material Material
{
diffuseColor 0 0 1
}#
end of Material
}#end of Appearance
geometry Box
{
size 2 2 2
}#end of Box
}#end of Shape
|
Names of objects begins with big letters and if object has name connected
from 2 or more words they are connected as example "NavigationInfo".
Fields begin with a lowercase letter, but if a field
name is made of two or more words, each new word is capitalized (i.e.,
fieldOfView).
Previous example will display blue cube(material attribute assign color RGB
0 0 1, that is blue) and size 2x2x2, where diffuseColor is color attribute.
This attributes are called Fields.
Each knot can have many fields.
Each knot has at the beginning and at the end couple of characters
meaning start and end. They are "{" a "}".
As you can see after each end bracket ( } ) is comment. This comments
helps to make source more readable, mainly in case of long source codes.
You will also note that the braces appear on different
lines in the example. This causes the file storage size to increase. When
you create a large world and place it on the World Wide Web, you may want
to cut the whitespaces out of the file in order to allow for faster download
times.
Character # means comments as in C language /* */.
Comments can be just in the same line.
Standard units for VRML are:
length in meters, angles in radians, time in seconds. Colors are specified
in RGB models and values are from interval from 0.0 till 1.0.
3 values for diffuseColor, in Material node represents red, green and blue.
For red box set values to 1 0 0, for dark green 0. 0.2 0.
Geometric object, as example box has possibility to set various parameters.
In case of box it is size of all edges.
In case of missing values viewer use default values for that object.
| Example2.wrl
#VRML V2.0 utf8 example2.wrl
Shape
{
appearance Appearance
{
material Material
{
diffuseColor 0 0 1
}# end of Material
}#end of Appearance
geometry Box
{
size 2 2 0
}#end of Box
}#end of Shape
|
In previous example we display object Box with zero z-coordinate and red colour.
SO we get red square. Lets change the color or size of object by yourself.
Valid values of diffuseColor are between 0 and 1.
Size value must be 0 or more.
4. Standard geometric shapes
Basic geometric objects in VRML are:
Each object must have only one geometric object.
In addition, each of the above
geometries may exist only in a Shape node. Note: In each table the geometry
node contains the default values for each shape's fields.
First geometric object is Box. Box has only one item, size.
Default value for size is 2 2 2. It means cube with edge equal 2.
If is not defined Transform, Box is placed in (0,0,0)with edges
from -1 to 1 for each dimension.
Next geometric object is Cone .
Parameters for cone are:
bottom,bottomRadius, height, and side. Bottom and side has values type Boolean
(TRUE or FALSE). If value is TRUE that part of Cone exists.
If is FALSE, than not exists and is not displayed. BottomRadius
is size of radius on the bottom of Cone. This value must contains value
0 or more. Value height identify size of Cone from bottom to top. If Transform
is not defined, than object is vertical from -1 to +1.
#VRML V2.0 utf8 Example for Cone
Shape
{
appearance Appearance
{
material
Material
{
diffuseColor 1 0 1
}# end
of Material
}#end of Appearance
geometry Cone
{
bottom
TRUE
bottomRadius
1
height
2
side
TRUE
}#end of Cone
}#end of Shape |
Object Cylinder
has 5 items: bottom, height, radius, side, and top. Bottom, side and top
are type Boolean. If is TRUE than exists if FALSE than no exists.
Value height defines total length from top to bottom and radius is length from
center of Cylinder to edge. Value must be 0 or more. Default value
is from -1 to +1 for each dimenzion and center is on Y-coordinate.
#VRML V2.0 utf8 Cylinder.wrl
Shape
{
appearance Appearance
{
material
Material
{
diffuseColor 0 1 1
}# end
of Material
}#end of Appearance
geometry Cylinder
{
bottom
TRUE
height
2
radius
1
side
TRUE
top
TRUE
}#end of Cylinder
}#end of Shape |
Last object is Sphere.
Object has only one parameter, radius. Radius is length from center to edge.
Value must be 0 or more. Default value is (0,0,0) and object is in center of
coordinate system.
geometry Sphere
{
radius 1
}#end of Sphere |
5. Transform object understanding.
Object Transform
is type grouping node, which allows to define coordinate system,which
is different as default VRML coordinate system, for all children
objects. This will allow you to place groups of children in different locations
within the world. In the next table, you will see how the code for a Transform
node works.
Transform
{
center
0 0 0
translation
0 0 0
rotation
0 0 1 0
scale
1 1 1
scaleOrientation 0 0 1
0
translation
0 0 0
bboxCenter
0 0 0
bboxSize
-1 -1 -1
children
[]
} |
First attribute is center.
Defines Transform for coordinate system. Default
value is (0,0,0). it means, that if we place object in space with this parameter,
we gives his relative position in space in compare with original.
If for example we define value (2,2,2) for original coordinate system, then
each object will be relatively placed in (2,2,2).
Second attribute is
translation.
Translation defines point in space, in coordinate system, where should be
positioned object. For example defines,that we wants to have object
moved in all axis about 1 so lets define translation (1,1,1).
Next is rotation,
which
defines value of rotation in coordinate system about vektor.
Default value defines,
that coordinate system willrotate about z-axis, (0,0,1), 0 radians.
The scale and
scaleOrientation
fields specify an amount and a rotation of the scale of the transform.
The scale value specifies a nonuniform scale. A scale value specifies the
size of the units in a coordinate system. This means that if the values
in scale are 2 2 2, then the object(s) in the transform would be effectively
doubled in size in each direction (X, Y, and Z). If the values are .5 .5
.5, then the object(s) are decreased by half. You can scale by differing
amounts in each direction if you desire. You must use a value greater than
0.0 in the scale field. The scaleOrientation field allows you to
specify a rotation value about a vector for the scale field. This field
only applies to the scaling of the coordinate system. The next example
simply adds the scale and scaleOrientation field to the blue line in the
previous example. The example uses a scale value of 3 3 3 and the default
scaleOrientation value. This makes the cylinder of height = 6 equal to
a cylinder (with a default scale of 1) with height = 18. The radius = .1
becomes similar to radius = .3 and so on. So you see, the scale field is
a unit multiplier that allows you to change the unit size in the coordinate
system.
The children
field allows you to define more than one object per Transform node. You
can have several Shape nodes
within a Transform node by using a children
field. The only requirement is that each "child" use the same values as
specified in the Transform node. In the next example, the first two transform
nodes (in the previous examples) have been combined to form one Transform
node. Both "child" nodes will use same value as specified in the center
field. There will be no change in the actual appearance of the output,
but this allows us to streamline the code saving both file space and rendering
time.
The bboxSize
and bboxCenter fields are used to optimize rendering of Transform
nodes. Bbox is short for bounding box. A bounding box is used to enclose
a Transform node's objects so the browser only renders the area that is
specified. If the bounding box size is too small to accomodate the world's
object, then the results are undefined. The default values of -1 -1 -1
indicate that no values have been specified and the browser must compute
the values. A field value of 0 0 0, indicates only a point in space. Values
for this field must be greater than or equal to 0.0. The center of a bounding
box is specified by bboxCenter and specifies an offset from the local coordinate
system.
6.
Appearance Node
Object Appearance
defines visual characteristics of geometric data inside of group.
Object has 3 attributes : material, texture, and textureTransform.
Appearance
{
material NULL
texture NULL
textureTransform NULL
} |
First attribute is material.
Material must contains objekt Material. Defines attributes for surface of geometric
objects. That depends on light ray reflection, when color is created.
Material
{
ambientIntensity
0.2
diffuseColor
0.8 0.8 0.8
emmissiveColor
0 0 0
shininess
0.2
specularColor
0 0 0
transparency
0
} |
-
ambientIntensity defines how much light
is reflecting from surface of object
-
diffuseColor defines reflection of all
light sources depends on angle on surface. This attribute defines the color of surface.
-
emmissiveColor for heat objects
-
shininess is size of shininess of light.
Example light creates light area.
-
specularColor together with shininess
defines
size of polish on the surface of object
-
transparency defines transparency of object
Next attribute in object
Appearance istexture. Should contains one of three objects
:
ImageTexture, MovieTexture
or PixelTexture. Most important is ImageTexture.
ImageTexture
allows to place image on selected object. Images can be in formats
: JPG, GIF a PNG.
ImageTexture
{
url []
repeatS TRUE
repeatT TRUE
} |
url allows to place
selected image on specified object.Example: url "obrazok.jpg". Quotation must
enclose the file name.
repeatS and repeatT
tells viewer how to display on the image. S represents
lower point of texture and T represents left point on texture. Value TRUE indicates
repeating of image in horizontal (S) or vertical {T} direction. Last
object Appearance is TextureTransform. Defines how to use coordinate
system for image.
7. Lets create simple example
In first line
will be specification of VRML :
And add some comments.
#VRML V2.0 utf8 #objekt1.wrl
Transform
{#Floor
children Shape
{
geometry Box
{
size 10 1 20
}#end
of geometry Box
appearance Appearance
{
material Material
{
diffuseColor 1 1 1 #biela farba
}#end of material
}#end
of appearance
}#end of children Shape
}#end of Transform
Transform
{#Back Wall
translation 0 3 -9.9
children Shape
{
geometry Box
{
size 10 5 .2
}#end of geometry Box
appearance Appearance
{
material Material
{
diffuseColor 1 0 0
}#end of material
}#end of appearance
}#end of children Shape
}#end of Transform
|
First object is Box with size 10 1 20. Center of object is in 0 0 0.
For x-coordinate it is from -5 to 5 and for z -10 to 10 and top in interval
-2.5 to 2.5 for y-coordinate. Color of object is white.
Transform
{#Left Wall
translation -4.9 3 0
children Shape
{
geometry Box
{
size .2 5 19.6
}#end of geometry Box
appearance Appearance
{
material Material
{
diffuseColor 1 0 0
}#end of material
}#end
of appearance
}#end of children Shape
}#end of Transform |
8. The Indexed
Face/Line Sets.
8.1 The Indexed Face Set Node
Using object
IndexedFaceSet
allows you to create geometries by constructing polygons from
points specified in the coord field. The coord field must contain a Coordinate
node which will contain the list of vertices for the object. The coordIndex
field will contain the indices for the lines and allows you to specify
which points to connect with a line. A group of lines that forms a polygon
is called a face. The next table shows all of the fields available to the
IndexedFaceSet node. Not all of the available fields will be addressed
in this tutorial.
IndexedFaceSet
{
color
NULL
coord
NULL
*normal
NULL
*texCoord
NULL
*ccw
TRUE
colorIndex
[]
colorPerVertex
TRUE
*convex
TRUE
coordIndex
[]
*creaseAngle
0
*normalIndex
[]
*normalPerVertex
TRUE
solid
TRUE
*texCoordIndex
[]
}
* - not discussed in this tutorial.
|
The NULL values assigned
to some of the fields, may be replaced with nodes of the same type (i.e.,
color Color, coord
Coordinate). If the color field is NULL,
then you may use the appearance field in the parent node to specify the
color of the
object. Otherwise, the object will be
the default white color. The coord field must contain the Coordinate node
which uses the
point field to specify the points for
the object's vertices.
To specify the
order in which to connect the points, the coordIndex field is used.
To specify a face to be rendered,
simply enter the points in the proper
order and enter a -1 to end the face (-1 optional on last face in the field).
The
colorPerVertex field value of FALSE,
will place the colors on the faces of the object. The first example will
draw a pyramid
and assign different colors to each face.
The next link displays the code required for this object and the output
for the file. Pay
close attention to the inline comments
for the object.
If you want to place
the colors on the vertices, then you would assign a TRUE to the colorPerVertex.
You can leave the
colorIndex field empty and let the browser
assign the colors by index, which means, the order of colors in the color
field will
be mapped to the vertices of the same
index (point 0 - color 0,point 1 - color 1, etc). You may also assign colors
to the
vertices in a different order by using
the colorIndex field. Instead of specifying the vertices by number,
you specify the faces
that combine to form the vertex. The next
link will show the code for a pyramid with colors per vertex. Note: if
using
WorldView browser, make sure the full
color option is on. Right click the world, choose graphics, then select
full color.
If you create an object
that is not totally enclosed, by changing the solid field value to FALSE,
the browser will render
both sides of a face (using the same color
on both sides). If the value is the default TRUE, then the browser will
not render the
color on both sides of each face. The
TRUE value indicates that the object will be totally enclosed therefore
there would be no
reason to waste resources drawing something
that will not be seen. The next link shows both of these examples.
8.2 The Indexed Line Set Node
The IndexedLineSet
is similar to the IndexedFaceSet node, but instead of drawing faces between
a set of points,
simply connects points with lines. All
of the fields in the IndexedLineSet are contained in the IndexedFaceSet
and have been
discussed above. The next table shows
the field available to the IndexedLineSet.
IndexedLineSet
{
color
NULL
coord
NULL
colorIndex
[]
colorPerVertex
TRUE
coordIndex
[]
} |
9. The Billboard Node.
The Billboard node is
a type of grouping node that dynamically modifies it's coordinate system
in order to point the Z
axis at the viewer. The Billboard node
may be used as a standalone node or as a parent or child node. The following
table
displays the fields available to this
unique node.
Billboard
{
axisOfRotation 0 1 0
children
[]
bboxCenter
0 0 0
bboxSize
-1 -1 -1
} |
The first field we will
discuss will be the axisOfRotation field. The axisOfRotation
uses a default value of 0 1 0 which
specifies the Y axis. This means that
the geometry will rotate around the Y axis to keep the Z axis facing the
viewer at all times.
However, if the viewer flies directly
over the object, the results are undefined and the viewer will not be able
to see the object.
By using a value of 1 0 0, the viewer
will be able to view the object from above, but results are undefined when
viewing
perpendicular to the X axis. For the special
case for keeping text and other object perpendicular to the screen, use
0 0 0 in this
field. The next example demonstrates the
Billboard node .
The bboxCenter and
bboxSize fields specify a bounding box that encloses the Billboard's children.
This is a hint that may be
used for optimization purposes. If the
specified bounding box is smaller than the actual bounding box of the children
at any time,
then the results are undefined. A default
bboxSize value, (-1 -1 -1), implies that the bounding box is not specified
and if needed
must be calculated by the browser. See
"Concepts - Bounding Boxes" for a description of bboxCenter and bboxSize
fields.
| #VRML V2.0 utf8 #billbrd1.wrl
Billboard
{
axisOfRotation 0 1 0
#default value
children Shape
{
appearance
Appearance
{
texture ImageTexture
{
url "tree.jpg" # obrzok stromu
}#end of ImageTexture
}#end of Appearance
geometry IndexedFaceSet
{
coord Coordinate
{
point
[
0 0 0, #point 0
1 0 0, #point 1
1 1 0, #point 2
0 1 0 #point 3
]#end of point
}#end of Coordinate
coordIndex [ 0 1 2 3 ] #creates a square
}#end of geometry
}#end of Shape
}#end of Billboard
|
10. Inserting
text
Object Text is used to
display text as 2D object placed in XY
coordinate system. Single Text node may contain several text strings
but will all have the same display attributes. The table below displays
the fields associated with the Text node and their default values.
Text
{
string [ ]
fontStyle NULL
length [ ]
maxExtent 0.0
} |
Attribute string
contains sequence of characters in quotation (""). In case,
that we have more strings, when whey must be divided by comma. Example : strings:
string ["today", "tommorrow"]. The next two examples demonstrate basic Text
nodes.
#VRML V2.0 utf8 #text1.wrl
Billboard
{
axisOfRotation 0 0 0 #special
case
children Shape
{
geometry
Text
{
string [ "This is a", "test."]
}#end of Text
}#end of Shape
}#end of Billboard |
#VRML V2.0 utf8 #text2.wrl
Billboard
{
axisOfRotation 0 0 0 #special case
children Shape
{
geometry Text
{
string [ "This is a", "test."]
}#end
of Text
}#end of Shape
}#end of Billboard
Transform
{
translation 5 5 -10
children Billboard
{
axisOfRotation 0 1 0 #default value
children Shape
{
geometry Text
{
string "This is a test."
}#end of Text
appearance Appearance
{
material Material
{
diffuseColor 1 0 0 #red
}#end of Material
}#end of Appearance
}#end of Shape
}#end of Billboard
}#end of Transform
|
The world above displays text in both red and white.
The red string uses an axisOfRotation value of 0 1 0. This means
that when you rotate the world vertically (about the X axis), the text
will not stay forward facing.
The maxExtent and length fields are
used to specify limits for the area in which the text will be specified.
The
maxExtent field holds a value, in local coordinate terms, for the maximum
area of the text to be displayed. An example, if the
maxExtent field holds the value 2.0 and the string reaches farther
than 2 units horizontally (for horizontal text) or vertically (for
vertical text), then the text will be scaled to fit into the area.
Note: horizontal and vertical text will be discussed in the FontStyle
node section of this lesson. The default value of 0.0, indicates that
the string may be any length.
The length field specifies the length,
in local coordinate terms, for the string to be displayed in. If the length
is 2 and the
string is too short, then it will be stretched to fit. Likewise, if
the string is too long, then it will be compressed to fit. Like the
maxExtent field, a 0 in this field indicates that the string may of
any length.
The fontStyle field may be NULL or contain
a FontStyle node. The FontStyle node specifies the font size, font
style,
justification, and many other attributes necessary for rendering text
styles. The table below shows the fields available to the
FontStyle node and the default values.
FontStyle
{
family
"SERIF"
horizontal TRUE
*justify "BEGIN"
*language ""
leftToRight TRUE
size
1.0
spacing
1.0
*style "PLAIN"
topToBottom TRUE
}
* not covered in tutorial
|
The family field may contain one of three
family names; "SERIF", "SANS", and "TYPEWRITER". These names are
required to be supported by VRML browsers. Serif specifies a serif
font like Times Roman, Sans idicates a sans serif font like
Helvetica, and Typewriter specifies a fixed-pitch font such as Courier.
There may be other font families available to certain
browsers, but these will not be discussed in this tutorial. A family
value of empty quotes, "", specifies the default "SERIF".
The horizontal field value of TRUE indicates
a horizontal, left-to-right (positive X direction) display of characters.
A
value of FALSE causes each character to advance from top to bottom
(negative Y direction).
The size and spacing fields specify
the size and the spacing of the characters. You may wish to experiment
with different
values for any text in your world.
The topToBottom and leftToRight
fields specify the direction the words will be displayed. This is useful
when using
multiple strings in a world.
It should be noted that the FontStyle
node is not a commonly used node due to the resources required to display
text.
There are many options available for your text, though they will be
rarely used.