VRML
Virtual Reality Modeling Language
Che cos’è il VRML
E’ un linguaggio di programmazione che
consente la simulazione di mondi virtuali
tridimensionali.
E’ possibile descrivere ambienti virtuali
contenenti oggetti, sorgenti luminose,
immagini, suoni, filmati.
Questi mondi possono essere
• animati
• presentare interattività e link a URL remoti
Che cos’è il VRML
E’ costituito da file .wrl, semplici file di testo
(caratteri ASCII)
E’ un formato standard che descrive scene
tridimensionali.
Un file VRML pubblicato su Internet è
accessibile da qualsiasi macchina
indipendentemente dalla piattaforma (richiede
solo un plug-in).
Che cos’è il VRML
Esempi:
http://www.bbc.co.uk/history/3d/iron/ironbridge.wrl
http://www.bbc.co.uk/history/3d/viking/ribble.wrl
http://www.bbc.co.uk/history/3d/bridge/lon_bridge.wrl
http://www.bbc.co.uk/history/3d/abbey/abbey.wrl
http://www.bbc.co.uk/history/3d/fort/fort.wrl
http://www.smeenk.com/vrml/elevators/elevatorshigh.wrl
http://collections.ic.gc.ca/rondes/vrml/parcours/wrl/final.WRL
http://www.int3d.com/data/savoye.wrl
http://www.int3d.com/scenes3d.html
http://www.int3d.com/models3d.html
http://www.3dcafe.com/asp/textures.asp
http://www.3dcafe.com/asp/vrml.asp
http://www.ocnus.com/models/models.html
http://eureka.lucia.it/vrml/p_indice.html
I player per il VRML
Informazioni e plug-in reperibili presso il sito
virtuworlds (http://www.virtuworlds.com)
Ad esempio:
• Cortona 3.1- Parallel Graphics
• Contact 5.0- Blaxxun
• OpenWorlds Horizons - DRaW Computing
• Viscape 5.6x
• Cosmo Player 2.1.1 - Computer Associates
• WorldView - Computer Associates
Cortona VRML Client: sul CD cortvrml.exe
I player per il VRML
Controlli per muoversi, ruotare, fare una panoramica, ecc.
I tools per lo sviluppo del VRML
1. Editor: VRMLPad
Sul CD: vpad20.exe
I tools per lo sviluppo del VRML
2. Authoring: Internet Space Builder
Sul CD: isben.exe
I tools per lo sviluppo del VRML
3. Authoring: CiteMap
Sul CD: 3DCMB10a.exe
I tools per lo sviluppo del VRML
4. Authoring: VGE
Sul CD: VGE.exe
Il primo file VRML
obbligatoria
#VRML V2.0 utf8
# sfera VRML
nodo Shape
Shape {
appearance Appearance {
material Material { emissiveColor 1 0 0 }
}
geometry Sphere { radius 1 }
}
colore
due campi:
appearence
geometry
raggio
Il primo file VRML
Quindi:
Shape è un nodo che può contenere due campi: appearance
e geometry.
In ciascuno di questi campi si può dichiarare un nodo:
- per appearance si può dichiarare il nodo Appearance;
- per geometry se ne possono dichiarare diversi: Box, Cone,
Cylinder, ElevationGrid, Extrusion, IndexedFaceSet,
IndexedLineSet, PointSet, Sphere, Text
Ciascuno di questi nodi può contenere diversi campi (ad
esempio: Sphere può contenere solo radius, Appearence può
contenere material, texture e textureTransform).
Per material si può definire il nodo Material, che può
contenere diversi campi, tra i quali emissiveColor.
I campi emissiveColor e radius sono quelli per i quali si
definisce il valore.
Il primo file VRML
Shape
appearence
geometry
Appearence
Sphere
material
radius 1
Material
emissiveColor 1 0 0
I nodi e i loro campi
Esistono molti nodi (node): alcuni (come Shape)
possono esistere indipendentemente, altri (come
Sphere) solo come “property node” di un campo
(field) di un altro nodo.
Vedi Node Reference (sul cd)
Esempio:
Shape {
appearance NULL # exposedField SFNode
geometry
NULL # exposedField SFNode
}
Esercizi
1. Provare il primo esempio con VRMLPad.
#VRML V2.0 utf8
# sfera VRML
Shape {
appearance Appearance {
material Material { emissiveColor 1 0 0 }
}
geometry Sphere { radius 1 }
}
2. Cambiare il colore.
3. Cambiare le dimensioni.
Esercizi
4. Modificare la figura geometrica:
• Box { size x y z }
• Cone { bottomRadius r
height h }
• Cylinder { radius r
height h }
y
x
z
n.b.: al posto di x, y, z, r, h si devono usare dei valori
numerici
5. Nel field geometry si può usare anche un nodo
Text:
• Text { string “Buongiorno” }
Posizione e orientamento degli oggetti
Gli oggetti vengono automaticamente posizionati
nell’origine degli assi (0,0,0). Inserendo più oggetti
nella stessa pagina questi vengono tutti posizionati
nello stesso modo. Es.:
Shape {
appearance Appearance {
material Material { emissiveColor 1 0 0 }
}
geometry Cylinder { radius 2 height }
}
Shape {
appearance Appearance {
material Material { emissiveColor 0 1 0 }
}
geometry Sphere { radius 2.5 }
}
Posizione e orientamento degli oggetti
Per spostare un oggetto in un’altra posizione si deve
inserirlo in un nodo Transform:
Transform {
translation 0 2 0
children [
Shape {
appearance Appearance {
material Material { emissiveColor 1 0 0 }
}
geometry Sphere { radius 2.5 }
}
]
Shape è contenuto come argomento del
}
campo children (parentesi quadre)
Posizione e orientamento degli oggetti
Lo spostamento di un oggetto dipende da:
translation 2 2 0
I tre valori indicano lo spostamento lungo gli assi x, y
e z.
y
2
2
z
x
Posizione e orientamento degli oggetti
E’ possibile orientare un oggetto: nel nodo
Transform è possibile usare un campo rotation:
Transform {
rotation 1 1 0 –1,56
children [
Shape {
appearance Appearance {
material Material {
emissiveColor 1 0 0
}
}
geometry Box { size 2 2 2 }
}
]
}
Valori del campo rotation:
i primi tre indicano l’asse
(o gli assi) attorno a cui
effettuare la rotazione,
il quarto l’angolo di
rotazione (in radianti)
Posizione e orientamento degli oggetti
Esempi di rotazione
rotation 1 0 0 .78
y
rotation 1 0 0 -.78
rotation 0 0 1 -.78
rotation 1 1 0 .78
x
z
Posizione e orientamento degli oggetti
 E’ possibile utilizzare translation e rotation in un
unico Transform
 E’ possibile anche inserire una Transform in una
Transform
 E’ possibile realizzare un oggetto complesso,
composto da più oggetti, alcuni dei quali spostati (o
ruotati) con una Transform e inserire il tutto entro
un’altra Transform che lo ruoti o lo sposti
Transform {
translation ……
rotation …..
children [
………
]
}
Esercizi
1. Realizzare i seguenti oggetti complessi
2. Realizzare e ruotare i seguenti oggetti complessi
Creare oggetti complessi
Per realizzare oggetti più complessi è necessario
usare i nodi IndexedLineSet e IndexedFaceSet.
Esempio (un quadrato):
Shape {
appearance Appearance {
material Material {emissiveColor 1 .5 0 }
}
geometry IndexedLineSet {
coord Coordinate {
point [ 0 0 0, 0 1 0, 1 1 0, 1 0 0, 0 0 0]
}
Numero
coordIndex [ 0 1 2 3 0 ]
dei vertici
}
}
1
0
y
2
3
x
z
Coordinate
dei punti
Creare oggetti complessi
Esempio (una piramide):
4
y
Shape {
2
appearance Appearance {
3
material Material {emissiveColor 1 .5 0 } 0
x
1
}
z
geometry IndexedFaceSet {
coord Coordinate {
point [-1 0 1, 1 0 1, 1 0 -1, -1 0 -1, 0 2 0 ]
Coordinate
}
dei 5 punti
coordIndex [ 0, 3, 2, 1, -1
Elenco delle facce (5),
0, 1, 4, -1
elenco dei vertici (in
1, 2, 4, -1
senso antiorario) delle
2, 3, 4, -1
facce (-1 conclude la
3, 0, 4, -1 ]
faccia)
}
}
Le luci
Negli esempi finora non erano presenti luci: gli
oggetti erano visibili perché c’era il campo
emissiveColor (che è luminoso).
E’ possibile invece utilizzare un materiale diffuseColor,
aggiungendo un nodo DirectionalLight:
DirectionalLight { direction 1 -1 0 }
…
material Material { diffuseColor 1 0.5 0 }
Per le direzioni: si riferiscono agli assi (x y z), 1 nella
direzione dell’asse, -1 nella direzione opposta
Le luci
Un altro nodo “luminoso” è SpotLight, che deve
anche essere posizionato (per default è nell’origine):
Transform {
translation 3 0 0
children [
SpotLight {
direction 1 1 0
location -2 1 2
radius 12
beamWidth 1
cutOffAngle 1
}
]
}
Posizione dello spot
Le luci
Un altro nodo “luminoso” è PointLight, che emette in
tutte le direzioni:
PointLight {
radius 6
location 0 0 0
}
Esercizi
1. Riprendere alcuni file degli esercizi precedenti e
modificare il materiale degli oggetti, usando:
diffuseColor (colori a piacere)
verificarne la visibilità.
Aggiungere quindi delle luci di tipo diverso,
posizionate a piacere.
Le superfici
Per rendere più realistiche le superfici è possibile
utilizzare il campo texture di Appearence:
Shape {
appearance Appearance {
material Material { }
texture ImageTexture { url "mondo.jpg“ }
}
geometry Sphere { radius 2 }
}
come ImageTexture si può usare un file .gif o .jpg
Le superfici
Si possono usare anche immagini trasparenti (.gif) e
animate:
Shape {
appearance Appearance {
material Material { }
texture MovieTexture {
url “movie.mpg“
loop TRUE
startTime 1
}
…
Le superfici
Per una corretta gestione delle Texture è possibile
utilizzare un campo del nodo Appearence:
textureTransform, che contiene il nodo
TextureTransform con i campi:
• scale (modifica la dimensione dell’immagine)
• rotation (ruota l’immagine)
• center (posizione del centro di rotazione
• translation (trasla l’immagine)
Esempio:
textureTransform TextureTransform {
scale 2 2
}
Le superfici
Senza textureTransform
scale 2 2
scale 2 1
center 0 0
rotation .78
translation 0.2 0.2
Lo spazio
Per creare spazi più realistici si possono dare dei colori
allo sfondo, oppure utilizzare immagini, utilizzando il
nodo BackGround, che ha i seguenti campi:
BackGround {
backUrl [ “nome”]
bottomUrl [ “nome”]
frontUrl [ “nome”]
leftUrl [ “nome”]
rightUrl [ “nome”]
topUr [ “nome”]
skyAngle [ angoli ]
skyColor [ colori ]
groundAngle [ angoli ]
groundColor [ colori ]
}
Lo spazio viene
considerato come
l’interno di un box
Lo spazio viene
considerato come
l’interno di una sfera
Esercizi
1. Riprendere alcuni file degli esercizi precedenti e
aggiungere delle texture e degli sfondi.
La navigazione
E’ possibile definire diversi punti di vista (gestiti con il
menù contestuale) con il nodo Viewpoint:
Viewpoint{
position 0 -1.25 7.5
orientation 0 0 0 0
description "Distante"
}
Posizione dello sguardo
Con il nodo NavigationInfo è posssibile definire
alcune caratteristiche del “visitatore” del mondo:
NavigationInfo {
Raggio di collisione, altezza
avatarSize [ 3.8, 3, 0.5 ]
occhi, massimo salto
headlight FALSE
Luce
speed 1
Velocità
type "WALK"
Modalità di navigazione
visibilityLimit 10
Limite di visibilità
}
La navigazione
Con il nodo Collision si può evitare che l’utente
passi le superfici; il nodo Collision deve contenere
tutti gli oggetti che si vuole rendere solidi:
Collision {
children [
…
]
}
La navigazione
Con il nodo Anchor è possibile realizzare link: si
possono collegare url anche remoti, aprire altri file
.wrl, aprire altri file html in un altro frame, ecc.
Anche Anchor deve contenere tutti gli oggetti attivi:
Anchor {
url “nomefile”
description “descrizione”
parameter “target=nometarget”
children [
…
]
}
Esercizi
1. Riprendere alcuni file degli esercizi precedenti e
effettuare le seguenti modifiche:
• aggiungere dei viewpoints
• rendere solide le superfici
2. Creare un file .wrl che funzioni da menu per aprire
altri file .wrl
3. Inserire un file .wrl che funzioni da menu in una
pagina html, e utilizzarlo come menu per aprire
altre pagine html in un altro frame.
n.b.: per inserire un file .wrl in una pagina html:
<embed src=“miofile.wrl" width=100% height=100%>
DEF e USE
Con il comando DEF è possibile realizzare dei nuovi
nodi (in genere oggetti complessi), da duplicare poi
con USE. Ad esempio:
DEF Casa
[…]
Transform {
translation -12 0 30
children [
USE Casa
]
}
Animazione
Per realizzare un’animazione è necessario per prima
cosa introdurre il “tempo”, con il nodo TimeSensor:
DEF Tempo TimeSensor {
cycleInterval 5
enabled TRUE
loop TRUE
startTime 1
}
E’ necessario poi poter modificare i valori di qualche
campo degli oggetti (es. posizione, colore, ecc.).
Un nodo Interpolator si preoccupa di calcolare valori
diversi di un campo (ad es. la posizione) in funzione
dei valori di un altro campo (di solito il campo time di
un nodo di tipo TimeSensor)
Animazione
Si possono usare 6 nodi interpolatori per effettuare i
cambiamenti dei valori dei campi:
• ColorInterpolator,
• CoordinateInterpolator,
• NormalInterpolator,
• OrientationInterpolator,
• PositionInterpolator,
• ScalarInterpolator
Per ciascuno di questi nodi si possono definire i
campi key (i tempi del cambiamento, almeno 2),
keyvalue (i valori dei punti chiave), set_fraction
(riceve il valore di un evento), value_changed (il
risultato del cambiamento)
Animazione
Quindi:
1. TimeSensor scandisce il tempo
2. Un nodo Interpolator fornisce i valori da cambiare
3. Con il comando ROUTE si passa il contenuto di un
nodo ad un altro:
ROUTE campo sorgente TO campo destinazione
Animazione
Esempio (una sfera si sposta lungo l’asse x):
DEF SferaBlu
Transform {
translation 0 0 0
children [
Shape {
appearance Appearance {material Material { diffuseColor 0 0 1 } }
geometry Sphere { radius 1.4 }
Tempo scandisce il tempo;
} ] }
Posizione fornisce i tempi del
DEF Tempo TimeSensor {
cambiamento e i valori di posizione
cycleInterval 4
ROUTE mette in comunicazione
enabled TRUE
Tempo con Posizione e
loop TRUE
Posizione con SferaBlu
startTime 1 }
DEF Posizione PositionInterpolator {
key [0 .5 1]
keyValue [-3 0 0, 3 0 0, -3 0 0] }
ROUTE Tempo.fraction_changed TO Posizione.set_fraction
ROUTE Posizione.value_changed TO SferaBlu.set_translation
Esercizi
1. Modificare l’animazione precedente in modo da
avere un precorso più complesso (più punti nel
campo keyValue) e con velocità diverse per i
diversi tratti (frazioni di tempo uguali nel campo
key e distanze diverse, o viceversa).
2. Realizzare un movimento circolare (quasi).
3. Realizzare un movimento contemporaneo di più
oggetti.
Animazione
Esempio (un orologio):
Viewpoint { position 0 1.5 2 }
# il quadrante
DEF orologio Transform {
translation 0 1.5 -1
children [
Transform {
rotation 1 0 0 1.57
children [
Shape {
appearance Appearance {
material Material {diffuseColor .55 .55 .60}
}
geometry Cylinder { radius 1 height .1 }
}
]
}
Animazione
# sfera che funge da perno per la lancetta dei secondi
DEF perno_secondi Transform {
children [
Shape {
appearance Appearance {
material Material { diffuseColor 1 0 0 }
}
geometry Sphere { radius .05 }
}
# lancetta dei secondi
Transform {
translation 0 .25 .15
children [
Shape {
appearance Appearance {
material Material { diffuseColor .75 .25 0 }
}
geometry Box { size .01 .75 .001 }
} ] } ]
}]}