VRML 97


Formato per la definizione di oggetti 3D. La
versione VRML 1 viene da una semplificazione
degli scene graphs di OpenInventor. La versione
2.0 (97) aggiunge molti nuovi nodi e modifica gran
parte dei vecchi. Si tratta comunque di uno
standard molto recente (Agosto 1996 per la 1.0).
I files VRML non sono eseguibili, ma files di solo
testo che vengono “eseguiti” da un VRML browser.
Il browser legge il file e genera un ambiente 3D
interattivo. Molto usato sul WEB.
VRML 2.0
Informatica Grafica
1
Ambiente Usato
I browsers VRML sono plugins di un browser
HTML. Noi vedremo Cosmo Player 2.0 (della
Silicon Graphics) insieme a Netscape 4.
 Il browser e’ disponibile gratuitamente sul sito
http://cosmo.sgi.com
 Alternativa: usare WorldView (della Intervista)
insieme ad Internet Explorer 4.
 Informazioni dettagliate su VRML nei siti:
http://www.vrml.org
Sito Ufficiale VRML
http://www.sdsc.edu/vrml
Repository VRML

VRML 2.0
Informatica Grafica
2
Tutorial
I lucidi successivi vengono da un tutorial tenuto al
SIGGRAPH96 da:
Dave Nadeau, John Moreland e Mike Heck
Versione interattiva disponibile sulla mia pagina e
nella directory del laboratorio. Contiene anche
molti esempi ed esercizi. Originale sul WWW alla
pagina:
http://www.sdsc.edu/siggraph96vrml/
VRML 2.0
Informatica Grafica
3
What is VRML?
VRML is:
A text file format
A simple language for describing 3-D shapes and
interactive environments
A web standard
VRML is endorsed by:
Most 3-D graphics vendors
Most web browser vendors
VRML 2.0
Informatica Grafica
4
VRML File Structure
VRML files contain:
The file header
Comments - notes to yourself
Nodes - nuggets of scene information
Fields - node attributes you can change
Values - attribute values
Node Names - names for reusable nodes
more. . .
VRML 2.0
Informatica Grafica
5
A Sample VRML File
#VRML V2.0 utf8
# A Cylinder
Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
height 2.0
radius 1.5
}
}
VRML 2.0
Informatica Grafica
6
Defining Names for Nodes
Nodes can be named, and used
repeatedly
DEF MyCylinder Shape {
...
}
...
USE MyCylinder
...
USE MyCylinder
VRML 2.0
Informatica Grafica
7
Shapes
Shapes are the building blocks of a VRML world
Primitive Shapes are standard building blocks:
Box
Cone
Cylinder
Sphere
VRML 2.0
Informatica Grafica
8
Shapes (2)
Shape nodes describe:
geometry - form, or structure
appearance - color and texture
Shape {
geometry . . .
appearance . . .
}
VRML 2.0
Informatica Grafica
9
Specifying Geometry
Shape geometry is built with geometry nodes
Standard, primitive geometry nodes include:
Box
{...}
Cone { . . . }
Cylinder { . . . }
Sphere { . . . }
VRML 2.0
Informatica Grafica
10
Setting Geometry Dimensions
Geometry node fields control dimensions
Box { size 2.0 0.5 3.0 }
Dimensions are usually in meters, but they can be
anything
Cone { height 3.0 bottomRadius 0.75 }
Cylinder { height 2.0 radius 1.5 }
Sphere { radius 1.0}
VRML 2.0
Informatica Grafica
11
A Sample Primitive Shape
#VRML V2.0 utf8
Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
height 2.0
radius 1.5
}
}
VRML 2.0
Informatica Grafica
12
Groups
Group nodes describe:
children - a list of member nodes for the group
#VRML V2.0 utf8
Group {
children [
Shape { . . . },
Shape { . . . },
...
]
}
VRML 2.0
Informatica Grafica
13
Specifying Transforms
A Transform group node controls:
translation - position
rotation - orientation
scale - size
Transform {
translation 2.0 0.0 0.0 rotation 0.0 0.0 1.0 0.52
scale 0.5 0.5 0.5
children [ . . . ] }
It applies, in a fixed order,
scale - rotation -translation
VRML 2.0
Informatica Grafica
14
Appearance
The primitive shapes have a default emissive
(glowing) white appearance
You can control a shape's
Shading color
Glow color
Transparency
more . . .
VRML 2.0
Informatica Grafica
15
Appearance (2)
Appearance nodes describe:
material properties - color,
transparency, etc.
more . . .
Shape {
appearance Appearance { material . . . }
geometry . . .
}
VRML 2.0
Informatica Grafica
16
Materials
A Material node controls:
diffuse color - main shading color
emissive color - glowing color
transparency - opaque or not
more . . .
Material {
diffuseColor . . .
emissiveColor . . .
transparency . . . }
VRML 2.0
Informatica Grafica
17
Example
Shape {
appearance Appearance {
material Material { diffuseColor 1.0 1.0 1.0 }
}
geometry . . .
}
VRML 2.0
Informatica Grafica
18
Grouping Nodes
Shapes can be grouped to compose more complex
shapes
VRML has several grouping nodes, including:
Group
{...}
Switch
{...}
Transform { . . . }
Billboard { . . . }
VRML 2.0
Informatica Grafica
19
Group and Switch
The Group node creates a basic group. Every child
node in the group is displayed
Group { children [ . . . ] }
The Switch group node creates a switched group.
Only one child node in the group is displayed. You
select which child
Switch {
whichChoice 0
choice [ . . . ]
}
VRML 2.0
Informatica Grafica
20
Transform and Billboard
The Transform group node creates a group with its
own coordinate system. Every child node in the
group is displayed
Transform {
translation . . .
rotation . . .
scale
...
children [ . . . ]
}
VRML 2.0
Informatica Grafica
21
Billboard
The Billboard group node creates a group with a
special coordinate system. Every child node in the
group is displayed. Coordinate system is turned to
face viewer
Billboard { axisOfRotation . . . children [ . . . ] }
A rotation axis defines a pole to rotate round. Similar
to a Transform node's rotation field, but no angle
(auto computed)
VRML 2.0
Informatica Grafica
22
A Sample Billboard Group
Group {
children [
Billboard {
axisOfRotation 0.0 1.0 0.0
children [ ... ]
},
Transform { . . . }
]
}
VRML 2.0
Informatica Grafica
23
Summary of Groups
The Group node creates a basic group
The Switch node creates a group with 1 choice used
The Transform node creates a group with a new
coordinate system
The Billboard node creates a group with a coordinate
system that rotates to face the viewer
VRML 2.0
Informatica Grafica
24
Components
VRML files describe
components of a world:
Tables, chairs, lamps,
walls, floors, doors
Inlining combines files to
build larger components
Rooms, buildings,
neighborhoods
VRML 2.0
Informatica Grafica
25
Inlining
The Inline node creates a special group. Children are
read from a VRML file selected by a URL. Every
child node in the group is displayed
Inline { url "table.wrl” }
Transform {
translation . . .
children [ Inline { url "chair.wrl" } ]
}
VRML 2.0
Informatica Grafica
26
Esempio (1)
Definizione della seguente scena
VRML 2.0
Informatica Grafica
27
Esempio
#VRML V2.0 utf8
Group {
children [ Inline { url "table.wrl" },
Transform {
translation 0.95 0.0 0.0
children DEF Chair Inline { url "chair.wrl" }
Transform {
translation -0.95 0.0 0.0
rotation 0.0 1.0 0.0 3.14 children USE Chair
Transform {
translation 0.0 0.0 0.95
rotation 0.0 1.0 0.0 -1.57 children USE Chair
Transform {
translation 0.0 0.0 -0.95
rotation 0.0 1.0 0.0 1.57 children USE Chair
]
}
VRML 2.0
Informatica Grafica
},
},
},
},
28
IndexedFaceSet
Hard to build using primitives
VRML 2.0
Informatica Grafica
29
Specifying Coordinates
Location of dots (points) using Coordinate node
Coordinate {
point [
2.0 1.0 3.0,
4.0 2.5 5.3,
...
]
}
Three nodes have a coord field which accepts a
Coordinate node
PointSet, IndexedLineSet, IndexedFaceSet
VRML 2.0
Informatica Grafica
30
PointSet node
A dot is drawn at each point
PointSet {
coord Coordinate {
point [ . . . ]
}
}
No control over size of dot
Also supports color field for Color node
VRML 2.0
Informatica Grafica
31
IndexedLineSet node
Straight lines are drawn between points
IndexedLineSet {
coord Coordinate {
point [ . . . ]
}
coordIndex [
1, 0, 3, -1, . . .
]
}
VRML 2.0
Informatica Grafica
32
Coordinate Index Values
coordIndex [ 1, 0, 3, -1, . . . ]
Indexes reference ordered points of coord field:
Index order is arbitrary (eg: 1, 0)
Indexes are Zero-based (eg: 0)
Can skip coordinates (eg: 0, 3)
Poly-line can be many points (eg: 1, 0, 3)
End of poly-line (eg: -1)
Multiple poly-lines (eg: . . .)
VRML 2.0
Informatica Grafica
33
IndexedFaceSet node
Faces are drawn within perimeter of points
IndexedFaceSet {
coord Coordinate {
point [ . . . ]
}
coordIndex [
1, 0, 3, -1, . . .
]
}
VRML 2.0
Informatica Grafica
34
ElevationGrid Node
Good for creating terrains, Mountain Ranges, Sea
Floors and Planet Surfaces
ElevationGrid {
xDimension 3
xSpacing 1.0
zDimension 2
zSpacing 1.0
height [
0.0, -0.5, 0.0,
0.2, 4.0, 0.0
]
}
VRML 2.0
Informatica Grafica
35
Texture Mapping
Wrap images around
shapes
Apply an image as an
opaque "decal"
Apply an image with
transparent "holes"
Wrap a movie's images
around shapes
Add realistic appearance to
shapes
VRML 2.0
Informatica Grafica
36
Texture Mapping Specifics
Texture color overrides Material node color
Appearance node's texture field wraps an image
around geometry
The texture can be an ImageTexture, MovieTexture,
or PixelTexture
VRML 2.0
Informatica Grafica
37
ImageTexture node
Appearance {
material Material {}
texture ImageTexture {
url "myimage.jpg"
}
}
The ImageTexture node supports
JPEG, PNG, GIF
VRML 2.0
Informatica Grafica
38
MovieTexture node
Appearance {
texture MovieTexture {
url "mymovie.mpg"
speed 1
loop FALSE }
}
The MovieTexture nodes supports:
MPEG1-Systems and MPEG1-Video
VRML 2.0
Informatica Grafica
39
PixelTexture Format
The PixelTexture node contains data stored as width,
height, number of channels, followed by
width*height hex values representing the image
Example: A 2x4 RGB image
PixelTexture {
image 2 4 3 0xFF0000 0x00FF00
0 0 0 0 0xFFFFFF 0xFFFF00
}
VRML 2.0
Informatica Grafica
40
Lights
Light sources illuminate
and effect shading of
faces
Several types of lights
available for maximum
control
Lights do not cast shadows
VRML 2.0
Informatica Grafica
41
Light Nodes and Fields
Three different light nodes
PointLight, DirectionalLight, SpotLight
Standard fields (common to all 3) and defaults
on
TRUE
intensity
1.0
ambientIntensity
0.0
color
1.0 1.0 1.0
VRML 2.0
Informatica Grafica
42
Point Light
Point lights have a location and glow radially
PointLight {
# Standard fields, plus:
location 0.0 0.0 0.0
radius 1.0
attenuation 1.0 0.0 0.0
}
VRML 2.0
Informatica Grafica
43
Directional Light
Directional lights point in a specified direction
DirectionalLight {
# Standard fields, plus:
direction 1.0 0.0 0.0
}
VRML 2.0
Informatica Grafica
44
Spot Light
Spot lights point in a direction and focus in a cone
SpotLight { # Standard fields, plus:
location 0.0 0.0 0.0
direction 1.0 0.0 0.0
beamWidth 1.57
cutOffAngle 0.785
radius 1.0
attenuation 1.0 0.0 0.0
}
VRML 2.0
Informatica Grafica
45
Viewpoint
Primarily used to define named camera positions
Browser will usually present a list of viewpoints
using their description strings.
Browser may animate between viewpoints.
Orientation defines direction of view and "up"
direction (relative to default orientation).
Viewpoint { position 0 0 10 orientation 0 0 1 0
description "DefaultView"
}
VRML 2.0
Informatica Grafica
46
Events
Event: A message that contains a data value
Has a specific data type, eg. SFTime
set_
event: Changes node when received
Example: set_startTime
_changed
event: Sent when node changes
Example: position_changed
VRML 2.0
Informatica Grafica
47
Data Types
Standard VRML Data Types
SFBool
SFColor / MFColor
SFFloat / MFFloat
SFImage
SFInt32 / MFInt32
SFnode / MFNode
VRML 2.0
SFRotation / MFRotation
SFString / MFString
SFTime
SFVec2f / MFVec2f
SFVec3f / MFVec3f
Informatica Grafica
48
Fields and Events
Each node has specific fields and
events
Field: A stored value
(parameter), eg. url
EventIn: An event node can
receive, eg. set_url
EventOut: An event node can
send, eg. url_changed
Note: ExposedField defines all
three
VRML 2.0
Informatica Grafica
49
Routes
Route: Connects an EventOut to an EventIn
A Route is not a node!
Output type must match input type exactly
Output may connect to multiple inputs (fan-out)
Multiple outputs may connect to single input
(fan-in)
Nodes must be named in order to use Routes
VRML 2.0
Informatica Grafica
50
Collision Triggers Sound
ROUTE Node1.collideTime
TO Node2.startTime
Note use of DEF to name nodes
DEF NODE1 Collision { . . . }
DEF NODE2 AudioClip { . . . }
ROUTE NODE1.CollideTime
TO NODE2.startTime
VRML 2.0
Informatica Grafica
51
Summary of Events
Event: A message that contains a data value
set_
_changed
events: Change node when received
events: Sent when node changes
EventIn:
Specifies an event node can receive
EventOut:
Specifies an event node can send
VRML 2.0
Informatica Grafica
52
Sensors
Sensing the user's "presence" in the world:
Entering the world
Entering a region surrounding an object
Position and orientation within a region
VRML 2.0
Informatica Grafica
53
The ProximitySensor
Generates events when viewpoint:
Enters Region: SFTime enterTime
Leaves Region: SFTime exitTime
Moves within Region:
SFVec3f position_changed
SFRotation orientation_changed
ProximitySensor { center 0 0 0 size 0 0 0 }
Defines an axis-aligned region
Zero size disables the sensor
All relevant Proximity sensors generate events
VRML 2.0
Informatica Grafica
54
Example: Trigger Alarm
Sound {
source DEF Alarm AudioClip { . . . }
}
DEF Car ProximitySensor {
size 10 10 10 # size of Car
}
ROUTE Car.enterTime TO Alarm.startTime
VRML 2.0
Informatica Grafica
55
Other Nodes that "Sense" the
Viewer
LOD: Distance to viewpoint (no explicit events)
VisibilitySensor: Visibility of a region.
events: isActive, enterTime, exitTime
Collision: Collision of viewer with objects.
event: SFTime collideTime
VRML 2.0
Informatica Grafica
56
TouchSensor Events
Pointer is on geometry: SFBool isOver
Button press/release:
SFBool isActive
SFTime touchTime (on ButtonUp)
Pointer dragged over geometry:
SFVec3f hitPoint_changed
SFVec3f hitNormal_changed
SFVec2f hitTexCoord_changed
VRML 2.0
Informatica Grafica
57
Other Nodes That "Sense" the
User
Anchor: Click on children (causes implicit action)
CylinderSensor: Maps motion to rotation around
sensor's Y axis
PlaneSensor: Maps motion to translation in sensor's
XY plane
SphereSensor: Maps motion to general rotation
around center of sensor
VRML 2.0
Informatica Grafica
58
Summary of Sensors
Sensors are not grouping nodes
Trigger on geometry defined by sibling nodes
When geometry overlaps, closest object is used
Sensor "lowest" in the graph sends the event
Multiple sensors may send "simultaneous" events
Use these sensors to detect user actions.
Use their events to start and stop animations.
Also for simple dragging, rotating objects.
VRML 2.0
Informatica Grafica
59
Time
A TimeSensor node is similar to a stop watch (sorta)
You control the start time, stop time, and cycle
length
The sensor generates events while it is running
You ROUTE events to change node fields
VRML 2.0
Informatica Grafica
60
Time Sensors
TimeSensor nodes describe:
start and stop time - when to run
cycle interval time - how long a cycle is
looping - whether or not to repeat
cycles
TimeSensor {
cycleInterval 4.0
loop FALSE
starTime 0.0
stopTime 1.0
}
VRML 2.0
Informatica Grafica
61
Timer Input Events
Can create continuously running timmers:
loop TRUE stopTime < startTime
Can run one cycle then stop
loop FALSE stopTime < startTime
Can run until stopped, or after cycle is over
loop TRUE or FALSE stopTime >= startTime
The set_startTime input event:
Sets when the timer should start
The set_stopTime input event:
Sets when the timer should stop
VRML 2.0
Informatica Grafica
62
Timer Cycles
The first cycle starts at the start time
The cycle interval is the length (in seconds) of the
cycle
Each cycle varies a fraction from 0.0 to 1.0
If loop is FALSE, there is only one cycle, otherwise
the timer may cycle forever
VRML 2.0
Informatica Grafica
63
Timer Output Events
The isActive output event:
Outputs TRUE at timer start
Outputs FALSE at timer stop
The fraction_changed output event:
Outputs values from 0.0 to 1.0 during a cycle
Resets to 0.0 at the start of each cycle
VRML 2.0
Informatica Grafica
64
A Sample Time Sensor
DEF Monolith1Timer TimeSensor {
cycleInterval 4.0
loop FALSE
startTime 1.0
stopTime 0.0
}
ROUTE Monolith1Touch.touchTime
TO Monolith1Timer.set_startTime
ROUTE Monolith1Timer.fraction_changed
TO Monolith1Light.set_intensity
VRML 2.0
Informatica Grafica
65
Summary of TimeSensors
The TimeSensor node's fields control:
Timer start and stop times
The cycle interval
Whether the timer loops or not
The sensor generates:
isActive events at start and stop
fraction_changed events while running
VRML 2.0
Informatica Grafica
66
Interpolators
To animate the position of a shape you specify:
A list of key positions for a path
An interpolator computes intermediate positions for
you
You specify key values (like positions) along a path
Key values have two components
A value (such as a position)
A key fraction (usually between 0.0 and 1.0)
VRML 2.0
Informatica Grafica
67
Interpolation
Interpolation fills in values between your key values:
Time
Position
Time
Position
0.0
0.0 0.0 0.0 0.1
0.4 0.1 0.0
0.2
0.8 0.2 0.0 . . .
...
0.5
4.0 1.0 0.0 . . .
...
PositionInterpolator nodes describe:
keys - key fractions
values - key positions
PositionInterpolator {
key [ 0.0, . . . ]
keyValue [ 0.0 0.0 0.0, . . . ] }
VRML 2.0
Informatica Grafica
68
Position Interpolator Events
The set_fraction input event:
Sets the current fraction (usually 0.0 to 1.0) along the
key path
The value_changed output event:
Outputs the position along the path each time the
fraction is set
DEF Stair1Path PositionInterpolator {
key [ 0.0, . . . ] keyValue [ 0.0 0.0 0.0, . . .] }
ROUTE Stair1Timer.fraction_changed TO Stair1Path.set_fraction
ROUTE Stair1Path.value_changed TO Stair1.set_translation
VRML 2.0
Informatica Grafica
69
Other Interpolators
You can also interpolate:
Rotations
Colors
Coordinates
Normals
Scalars
VRML 2.0
Informatica Grafica
70
Format of Interpolators
All Interpolators use keys for key fractions.
OrientationInterpolator nodes describe:
values - key rotations (axis and angle)
ColorInterpolator nodes describe:
values - key colors (red, green, blue)
CoordinateInterpolator nodes describe:
values - key coordinate lists (X,Y,Z lists)
NormalInterpolator nodes describe:
values - key normal lists (X,Y,Z lists)
ScalarInterpolator nodes describe:
values - key scalars (used for anything)
VRML 2.0
Informatica Grafica
71
Scripts
Many actions are too complex for built-in sensors,
interpolators, shapes, etc.
Computed animation paths (eg. gravity)
Algorithmic shapes (eg. fractals)
Collaborative environments (eg. games)
You can write program scripts in Java, JavaScript,
etc, that:
Accept event inputs
Generate event outputs
Read and write fields
VRML 2.0
Informatica Grafica
72
Program Script Use
Script nodes include:
url - the program script to use
Script { url "circle.class” or… url "circle.js” or...
url "javascript: ...”}
Script nodes also declare:
fields and events - the program script interface
Each has a name and data type
Fields have an initial value
Script {
field SFFloat cycles 1.0
eventIn SFFloat set_fraction
eventOut SFVec3f position_changed }
VRML 2.0
Informatica Grafica
73
Proto
You can create new node types that encapsulate:
Shapes
Sensors
Interpolators
Scripts
anything else . . .
This creates high-level nodes
Robots, menus, new shapes, etc.
PROTO declares a new node type:
name - the new node type name
fields and events - interface to the prototype
VRML 2.0
Informatica Grafica
74