Informatica Grafica VRML 2.01 VRML 97 l Formato per la definizione di oggetti 3D. La versione VRML 1 viene da una semplificazione degli scene graphs di

VRML 2.0 1Informatica Grafica

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.


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 sitohttp://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 VRMLhttp://www.sdsc.edu/vrml Repository VRML


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/


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 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. . .


A Sample VRML File

#VRML V2.0 utf8# A CylinderShape { appearance Appearance { material Material { } } geometry Cylinder { height 2.0 radius 1.5 } }


Defining Names for Nodes

Nodes can be named, and usedrepeatedly DEF MyCylinder Shape { . . . } . . . USE MyCylinder . . . USE MyCylinder


Shapes

Shapes are the building blocks of a VRML world Primitive Shapes are standard building blocks: Box Cone Cylinder Sphere


Shapes (2)

Shape nodes describe: geometry - form, or structure appearance - color and texture

Shape { geometry . . . appearance . . . }


Specifying Geometry

Shape geometry is built with geometry nodes Standard, primitive geometry nodes include: Box { . . . } Cone { . . . } Cylinder { . . . } Sphere { . . . }


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}


A Sample Primitive Shape

#VRML V2.0 utf8Shape { appearance Appearance { material Material { } } geometry Cylinder { height 2.0 radius 1.5 }}


Groups

Group nodes describe: children - a list of member nodes for the

group #VRML V2.0 utf8Group { children [ Shape { . . . }, Shape { . . . }, . . . ] }


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.52scale 0.5 0.5 0.5 children [ . . . ] }

It applies, in a fixed order, scale - rotation -translation


Appearance

The primitive shapes have a default emissive (glowing) white appearance

You can control a shape's Shading color Glow color Transparency more . . .


Appearance (2)

Appearance nodes describe: material properties - color, transparency, etc. more . . .

Shape { appearance Appearance { material . . . } geometry . . . }


Materials

A Material node controls: diffuse color - main shading color emissive color - glowing color transparency - opaque or not more . . . Material { diffuseColor . . . emissiveColor . . . transparency . . . }


Example

Shape { appearance Appearance { material Material { diffuseColor 1.0 1.0

1.0 } } geometry . . .}


Grouping Nodes

Shapes can be grouped to compose more complex shapes

VRML has several grouping nodes, including:

Group { . . . } Switch { . . . } Transform { . . . } Billboard { . . . }


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 0choice [ . . . ]

}


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 [ . . . ]

}


BillboardThe 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)


A Sample Billboard Group

Group { children [ Billboard { axisOfRotation 0.0 1.0 0.0 children [ ... ] }, Transform { . . . } ]}


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


Components

VRML files describe components of a world:

Tables, chairs, lamps, walls, floors, doors

Inlining combines files to build larger components

Rooms, buildings, neighborhoods


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" } ]

}


Esempio (1)

Definizione della seguente scena


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 },

]

}


IndexedFaceSet

Hard to build using primitives


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


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


IndexedLineSet node

Straight lines are drawn between points

IndexedLineSet {coord Coordinate {

point [ . . . ] } coordIndex [ 1, 0, 3, -1, . . . ] }


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: . . .)


IndexedFaceSet node

Faces are drawn within perimeter of points IndexedFaceSet {

coord Coordinate {point [ . . . ]

}coordIndex [

1, 0, 3, -1, . . .]

}


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 ]}


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


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


ImageTexture node

Appearance { material Material {} texture ImageTexture { url "myimage.jpg" } }

The ImageTexture node supports JPEG, PNG, GIF


MovieTexture node

Appearance {texture MovieTexture {

url "mymovie.mpg"speed 1loop FALSE }

}

The MovieTexture nodes supports:MPEG1-Systems and MPEG1-Video


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 }


Lights

Light sources illuminate and effect shading of faces

Several types of lights available for maximum control

Lights do not cast shadows


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


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}


Directional Light

Directional lights point in a specified direction

DirectionalLight { # Standard fields, plus: direction 1.0 0.0 0.0}


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}


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" }


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


Data Types

Standard VRML Data Types

SFBool SFRotation / MFRotation

SFColor / MFColor SFString / MFString SFFloat / MFFloat SFTime SFImage SFVec2f / MFVec2f SFInt32 / MFInt32 SFVec3f / MFVec3f SFnode / MFNode


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


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


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


Summary of Events

Event: A message that contains a data value

set_ events: Change node when received

_changed events: Sent when node changes

EventIn: Specifies an event node can receive

EventOut: Specifies an event node can send


Sensors

Sensing the user's "presence" in the world:

Entering the world

Entering a region surrounding an object

Position and orientation within a region


The ProximitySensor

Generates events when viewpoint: Enters Region: SFTime enterTime Leaves Region: SFTime exitTime Moves within Region: SFVec3f position_changed SFRotation orientation_changedProximitySensor { center 0 0 0 size 0 0 0 } Defines an axis-aligned region Zero size disables the sensor All relevant Proximity sensors generate events


Example: Trigger Alarm

Sound {source DEF Alarm AudioClip { . . . }

}

DEF Car ProximitySensor {size 10 10 10 # size of Car

}

ROUTE Car.enterTime TO Alarm.startTime


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


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


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


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.


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


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 FALSEstarTime 0.0 stopTime 1.0

}


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


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


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


A Sample Time Sensor

DEF Monolith1Timer TimeSensor {cycleInterval 4.0 loop FALSEstartTime 1.0 stopTime 0.0

}ROUTE Monolith1Touch.touchTime

TO Monolith1Timer.set_startTime

ROUTE Monolith1Timer.fraction_changedTO Monolith1Light.set_intensity


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


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)


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 positionsPositionInterpolator { key [ 0.0, . . . ]

keyValue [ 0.0 0.0 0.0, . . . ] }


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


Other Interpolators

You can also interpolate: Rotations Colors Coordinates Normals Scalars


Format of InterpolatorsAll 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)


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


Program Script UseScript 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 }


Proto

You can create new node types that encapsulate: Shapes Sensors Interpolators Scriptsanything 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

Documents

Informatica Grafica VRML 2.01 VRML 97 l Formato per la definizione di oggetti 3D. La versione VRML 1 viene da una semplificazione degli scene graphs di