When you play around with your own little VRML files, make sure they really get reloaded right after you change them. To make sure reload them holding down the SHIFT key on your machine when you click on reload in Netscape. If you read this on paper, note that URLs in the examples need to be completed by ``http://tecfa.unige.ch/guides/vrml/''
VRML (*.wrl) files have 3 basic elements:
#.
{.....} (required)
[ ...]. Fields always start with lowerCase letters.
Here is a typical VRML file with a single node (don't worry if you don't understand it):
# VRML V2.0 utf8
# A sample file with a single stupid node
Transform {
translation 0 2 0
children [
Shape {
geometry Sphere {}
}
]
}
VRML II has about 9 major node types. We will shortly list the
features of some important nodes as explained in detail in
the Concepts
and
the =>Node Reference
sections
in the
VRML 97 specification.
However, don't worry too much about the exact meaning of these
features yet. The purpose of this list is just giving you an
overview of some of ``what's there''.
Once you master some basics you then should consider going
back to reading the
the Concepts
Section of VRML 97 specification in whole !
VRML 1.0 contained 6 major (and 36 minor node) types, i.e:
Now be careful! VRML is a caseSensitive Language. Respect that or you will get strange errors!
VRML versions are easy to identify: Just look at the first line in the file You can translate most of old VRML I files with the vrml1to2 program from Sony.
| VRML: | ../examples/basics/basics-1.wrl |
| Source: | ../examples/basics/basics-1.text |
You don't need to worry about details yet, it will just give you an idea of the structure of a VRML file
#VRML V2.0 utf8
# ^^^^^ this is the MANDATORY header line
# The VRML Primer
# 1997 Daniel K. Schneider, TECFA
# No Copyright, steal this!
#
# Draw a blue cylinder - a first node specifying an object
# Radius and height can be floating numbers
Shape {
geometry Cylinder {
radius 0.1
height 3.0
}
appearance Appearance {
material Material { diffuseColor 0 0 1 }
}
}
Transform {
# Move the pen up - a second node specifying a translation
# and a sphere
translation 0 2 0
children [
Shape {
geometry Sphere {}
}
]
}
Ordering is quite simple: VRML is a declarative language and all declaration are executed in the order they appear. Basically speaking, VRML goes ``do this'', ``do this'', etc. However, VRML nodes can be nested at any level of detail (and should be as you will learn later). The usual scoping principles apply. E.g. if you insert a Transform node within a Transform node (you will see that later) transformations applied in the child node are applied within or before the transformations in the parent node. E.g. within a low level node you can rotate some objects and then place those objects somewhere else with a higher level node.
Now all you need is a VRML manual and you can start producing VRML files or write programs that generate VRML. Or can you continue reading this for a little while.
Per definition, all basic predefined shapes in VRML are drawn around the origin and have a standard size. Size is measured in units (roughly meters in reference to the real world). E.g. a cube has a standard size of 2 by 2 by 2 meters. Note that sizes are given with floating point numbers, e.g. 2.0 or .01 or 0.2. Degrees are given in radians.
Some objects (i.e. Cylinders and Cones) have named parts which you can avoid drawing (e.g. the bottom of a cylinder). Per default, all parts are drawn.
#VRML V2.0 utf8
#A simple box (was called cube in VRML I)
Shape {
geometry Box {}
}
The box (cube) above might appear as a flat rectangle in your browser, turn it around to be sure it's a 3D object. Also it does not have any color so it will appear as without any shading (in most or all browsers). If you can't see it in your browser skip this example. Per default, all objects are drawn off the center of the current origin in all directions. E.g. in the above case we draw around the [0 0 0] point: 1 left/right, 1 up/down and 1 forward/backwards leading to a 2 by 2 cube. Just remember this right now: You don't draw towards right, up and forward, but around the origin, i.e. left-to-right, down-to-up, backwards-to-forwards of the origin (the current coordinates of the ``pen'').
| VRML: | ../examples/basics/basics-shapes-2.wrl |
| Source: | ../examples/basics/basics-shapes-2.text |
| VRML Full: | ../examples/basics/basics-shapes-2V.wrl |
| Source Full: | ../examples/basics/basics-shapes-2V.text |
The box here represents something like a floor. If you can't see it in your browser, click on the ``Full'' version. As you will learn later, you have to define appearance and position the user someplace he can see something when the scene loads.
#VRML V2.0 utf8
#A floor, i.e. a thin and large box
Shape {
geometry Box {
size 20 0.1 30
}
}
#VRML V2.0 utf8
#A large sphere
Shape {
geometry Sphere {
radius 2}
}
#VRML V2.0 utf8
#A long stick
Shape {
geometry Cylinder {
radius 0.1
height 3.0
}
| VRML: | ../examples/basics/basics-shapes-5.wrl |
| Source: | ../examples/basics/basics-shapes-5.text |
| VRML Full: | ../examples/basics/basics-shapes-5V.wrl |
| Source Full: | ../examples/basics/basics-shapes-5V.text |
In the cup example
we tell VRML which parts we need. By definition, VRML renders all
parts of an object. If you want to display just some of them
you must specify which ones like in the following example.
Note: this replaces the parts field in VRML 1 that took as arguments
a list of parts in parenthesis separated by vertical bars, i.e. (...|...|...).
#VRML V2.0 utf8
#A round large cup
Shape {
geometry Cylinder{
height 0.5
radius 0.5
bottom TRUE
side TRUE
top FALSE
}
}
Also note that you wouldn't even display a simple cup this way. You'd have to add some color and position either the cup or the default view somewhere else (you will learn that later).
In order to position objects in a VRML scene (unless you want to move the user's viewpoint) you have to use the =>Transform Node. We will introduce some of its features here.
| VRML: | ../examples/basics/basics-1.wrl |
| Source: | ../examples/basics/basics-1.text |
Let's have a look again at the first VRML scene shown in this tutorial ( and ignore the contents of the appearance field right now). The Sphere is placed on top of a stick (the cylinder) because we told VRML to move the pen 2.5 up on the y axis. Since the stick is drawn from -1.5 to + 1.5 along the y axis we draw the Sphere (which has a radius of 1) starting with an origin of 1 further up the y axis.
#VRML V2.0 utf8
# The VRML Primer
# 1997 Daniel K. Schneider, TECFA
# No Copyright, steal this!
#
# Draw a blue cylinder - a first node specifying an object
# Watch out: radius and height are floating numbers !
Shape {
geometry Cylinder {
radius 0.1
height 3.0}
appearance Appearance {
material Material { diffuseColor 0.1 0.1 0.9 }
}
}
Transform {
# Move the pen up - a second node specifying a translation
# and a red sphere
translation 0 2.5 0
children [
Shape {
geometry Sphere { radius 1 }
appearance Appearance {
material Material { diffuseColor 1 0 0 }
}
}
]
}
To move to another point in the same frame of reference the Transform node has a translation field which allows to move the Pen (e.g. the following objects in the group) in some x-y-z direction.
Within a Transform node, objects can be embedded (combined) and addressed as a whole. Concretly, this means that a translation will affect all the renderings within the same Transform node) This is why you must use the ``children'' field to indicate the nodes which are affected by a transformation. (You will see more of that later).
You can also draw overlapping shapes like in the following example:
| VRML: | ../examples/basics/basics-shapes-10.wrl |
| Source: | ../examples/basics/basics-shapes-10.text |
| Full VRML: | ../examples/basics/basics-shapes-10V.wrl |
| Full Source: | ../examples/basics/basics-shapes-10V.text |
#VRML V2.0 utf8
# Overlapping shapes
Shape {
geometry Box {
size 3 0.1 0.1
}
}
Shape {
geometry Box {
size 0.1 3 0.1
}
}
Shape {
geometry Box {
size 0.1 0.1 3
}
}
Shape {
geometry Sphere { radius 0.5 }
}
Note that rendering overlapping node is less efficient than drawing ajacent nodes. E.g. if you want to draw a forest with some balls on top of sticks make sure that the ball does not overlap the stick (altough the visible result would be the same). Also, if you think that this object looks too dull on the screen, apply some Material like we did in the Full VRML scene. We will look into this in section 1.2.5).
Rotations can be around the x, y and z axis (yaw, roll and pitch). The rotation field takes 4 arguments: The axis and the degree in radians. A 180 degree rotation is 3.14159 (Pi). Here is a simple example of a rotation around the z axis:
| VRML: | ../examples/inter/inter-rotation-1.wrl |
| Source: | ../examples/inter/inter-rotation-1.text |
| Full VRML: | ../examples/inter/inter-rotation-1V.wrl |
| Full Source: | ../examples/inter/inter-rotation-1V.text |
The cone is rotated 3.14 radians around z by giving the following arguments to the rotation field of the Transform node.
rotation 0 0 1 3.14
Note that the Boxes represent the x,y,z axis.
#VRML V2.0 utf8
Shape {
geometry Box {
size 0.1 10 0.1
}
}
Shape {
geometry Box {
size 10 0.1 0.1
}
}
Shape {
geometry Box {
size 0.1 0.1 10
}
}
Transform {
rotation 0 0 1 3.14
children [
Shape {
geometry Cone {}
}
]
}
Rotation is not that intuitive, but if you play around with a few examples you might find the grasp for it. When you define a rotation you first of all define the angle of rotation in radians (the 4th number in the field). Then you specify around which axis to rotate. Imagine that the the three axis parameters define a diagonal line within a cube. Rotation will happen around this diagonal ! [drawing needed here]. Rotation has the same effects as translation. It ``reorients'' the pen like any other ``transform''.
You can intuitively learn more about size, translation and rotation by playing with the Tiny 3D Applet/Java1.02. Note that you need a EAI capable browser (most will do). If your browser understands Java 1.1 widgets (e.g. patched Netscape 4) you can try Tiny 3D Applet/Java1.1.
Usually you must use an =>Appearance node when drawing objects. Else they will appear blank, or white, that is dull (or if your headlights are turned off you won't even see a thing at all. Here you will learn how to use simple colors and how to ``dress'' objects with bitmap files.
#VRML V2.0 utf8
# Different materials for Earth and Sun
# Sun turns around Earth :)
# The Earth in blue
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
geometry Sphere {
radius 1
}
}
#The Sun yellow and shining
Transform {
translation 2 1 -2
children [
Shape {
appearance Appearance {
material Material {
emissiveColor 1 1 0
shininess 1
}
}
geometry Sphere {
radius 1
}
}
]
}
What is new here are the appearance and the material node. =>Appearance nodes define the visual properties (skin) of a polygon. The =>material nodes specify surface material properties for associated geometry nodes and are used by the VRML lighting equations during rendering. You can select from several types of color. Colors themselves are given as three RGB numbers in the range of [0,1]. E.g. ``diffuseColor 0 0 1'' gives a diffuse blue.
VRML's lightning model is quite complex and we will only make a few short comments about the fields of the Material node here.
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
}
Those fields define both the color of an objects and the way it reflects
light from the defined light sources. But please note that lightning effects
are also (and mainly) function of the lights you put into the scene.
| Color Appplet: | eai/color/ |
There are various of ways of using textures in an =>Appearance node. Here, we will see how to use =>ImageTexture node. VRML 2 browsers are required to support JPEG and PNG file formats. GIF support is only an option, so use JPEGs or PNGs if ever possible !
Here is a very simple node that dresses a cube with a bitmap file.
Shape {
appearance Appearance {
texture ImageTexture {
url "tecfa/mendelsohn.gif"
}
}
geometry Box { }
}
Per default each side of an object will be painted with an image (e.g. cubes will have 6 images, spheres one, and cylinders two).
Here is a small VRML file that shows some Tecfa people using a few few basics geometric shapes.
| VRML: | ../examples/basics/basics-persons-1.wrl |
| Source: | ../examples/basics/basics-persons-1.text |
Note how you can repeat textures easily by using a =>TextureTransform. The ``floor'' in the example above has been created using this technique. The scale field tells how many times to repeat a bitmap in the s and t direction. (Note: s and t is more or less like a standard x, y of a plane). Look at the code below:
Transform {
translation -4 -2 2
children [
Shape {
appearance Appearance {
texture ImageTexture {
repeatS TRUE
repeatT TRUE
url "tecfa/sylvere.gif"
}
textureTransform TextureTransform {
scale 10 10
}
}
geometry Box {size 10 0.1 10 }
}
]
}
There is much more to texturing with Bitmaps, e.g. you can combine colors and textures (read the specifications or another tutorial).
=>Anchors are group nodes, i.e. they have to be wrapped around the object(s) that represent the anchor. Here is an example that leads to our WWW home page if you click on the Sphere.
| VRML: | ../examples/basics/basics-anchors-1.wrl |
| Source: | ../examples/basics/basics-anchors-1.text |
#VRML V2.0 utf8
Transform {
rotation 1 0 0 0.4
children Shape {
appearance Appearance {
material Material {
diffuseColor 0.2 0.1 0.6
} }
geometry Box {
size 20 0.1 10
} } }
Anchor {
url "http://tecfa.unige.ch/"
description "A link to the Tecfa Home page"
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
geometry Sphere {}
}
]
}
Teleportals are doors into other VRML worlds (scenes). They are done with WWW Anchors. Split up your scene into several ones when rendering, downloading, memory usage, etc. grows too high. But don't, if you want to avoid loading when people walk frequently back and forth.
This example draws 2 texts near the origin. Per default, text is aligned left and bottom (i.e. without translation starts at 0 0 0.
| VRML: | ../examples/basics/basics-text-2.wrl |
| Source: | ../examples/basics/basics-text-2.text |
#VRML V2.0 utf8
Shape {
geometry Text {
string "Le chemin vers l'enfer"
fontStyle FontStyle {
size 2
} }
}
Transform {
translation 0 1.5 0
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
}
geometry Text {
string [
"Le chemin vers",
"l'autre enfer"
]
fontStyle FontStyle {
size 2
} } }
]
}
It will allow you to create simple VRML geometry, color, size and move around it. It also allows you to generate VRML code that you can paste into your editor.
| Java 1.1.x (Netscape 4x PATCHED): | eai/tiny3D-2/tiny3D-2.html |
| Java 1.0.x (Netscape 3x,4x): | eai/tiny3D-2-java1.0.2/tiny3D-2.html |
You should at least glance at the next chapter (2) in order to know how you can reuse nodes, build your own nodes, inline other scences etc.
In any case, you then should read chapter
3 on page ![[*]](http://tecfa.unige.ch/gif/tex2html//cross_ref_motif.gif)
.
Section 3.1 is absolutly mandatory reading.
If you think that you deserve a break go and check out the worlds at SGI's VRML gallery which can be found at http://vrml.sgi.com/worlds/.