VRML 97

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

2
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

3
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/

4
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

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

6
A Sample VRML File

• VRML V2.0 utf8
• A Cylinder
• Shape
• appearance Appearance
• material Material
• geometry Cylinder
• height 2.0
• radius 1.5

7
Defining Names for Nodes

• Nodes can be named, and used
• repeatedly
• DEF MyCylinder Shape
• . . .
• . . .
• USE MyCylinder
• . . .
• USE MyCylinder

8
Shapes

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

9
Shapes (2)

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

10
Specifying Geometry

• Shape geometry is built with geometry nodes
• Standard, primitive geometry nodes include
• Box . . .
• Cone . . .
• Cylinder . . .
• Sphere . . .

11
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

12
A Sample Primitive Shape

• VRML V2.0 utf8
• Shape
• appearance Appearance
• material Material
• geometry Cylinder
• height 2.0
• radius 1.5

13
Groups

• Group nodes describe
• children - a list of member nodes for the
  group
• VRML V2.0 utf8
• Group
• children
• Shape . . . ,
• Shape . . . ,
• . . .

14
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

15
Appearance

• The primitive shapes have a default emissive
  (glowing) white appearance
• You can control a shape's
• Shading color
• Glow color
• Transparency
• more . . .

16
Appearance (2)

• Appearance nodes describe
• material properties - color,
• transparency, etc.
• more . . .
• Shape
• appearance Appearance material . . .
• geometry . . .

17
Materials

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

18
Example

• Shape
• appearance Appearance
• material Material diffuseColor 1.0 1.0
  1.0
• geometry . . .

19
Grouping Nodes

• Shapes can be grouped to compose more complex
  shapes
• VRML has several grouping nodes, including
• Group . . .
• Switch . . .
• Transform . . .
• Billboard . . .

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

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

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

23
A Sample Billboard Group

• Group
• children
• Billboard
• axisOfRotation 0.0 1.0 0.0
• children ...
• ,
• Transform . . .

24
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

25
Components

• VRML files describe components of a world
• Tables, chairs, lamps, walls, floors, doors
• Inlining combines files to build larger
  components
• Rooms, buildings, neighborhoods

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

27
Esempio (1)

• Definizione della seguente scena

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

29
IndexedFaceSet

• Hard to build using primitives

30
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

31
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

32
IndexedLineSet node

• Straight lines are drawn between points
• IndexedLineSet
• coord Coordinate
• point . . .
• coordIndex
• 1, 0, 3, -1, . . .

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

34
IndexedFaceSet node

• Faces are drawn within perimeter of points
• IndexedFaceSet
• coord Coordinate
• point . . .
• coordIndex
• 1, 0, 3, -1, . . .

35
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

36
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

37
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

38
ImageTexture node

• Appearance
• material Material
• texture ImageTexture
• url "myimage.jpg"
• The ImageTexture node supports
• JPEG, PNG, GIF

39
MovieTexture node

• Appearance
• texture MovieTexture
• url "mymovie.mpg"
• speed 1
• loop FALSE
• The MovieTexture nodes supports
• MPEG1-Systems and MPEG1-Video

40
PixelTexture Format

• The PixelTexture node contains data stored as
  width, height, number of channels, followed by
  widthheight hex values representing the image
• Example A 2x4 RGB image
• PixelTexture
• image 2 4 3 0xFF0000 0x00FF00
• 0 0 0 0 0xFFFFFF 0xFFFF00

41
Lights

• Light sources illuminate and effect shading of
  faces
• Several types of lights available for maximum
  control
• Lights do not cast shadows

42
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

43
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

44
Directional Light

• Directional lights point in a specified direction
  
• DirectionalLight
• Standard fields, plus
• direction 1.0 0.0 0.0

45
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

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

47
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

48
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

49
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

50
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

51
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

52
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

53
Sensors

• Sensing the user's "presence" in the world
• Entering the world
• Entering a region surrounding an object
• Position and orientation within a region

54
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

55
Example Trigger Alarm

• Sound
• source DEF Alarm AudioClip . . .
• DEF Car ProximitySensor
• size 10 10 10 size of Car
• ROUTE Car.enterTime TO Alarm.startTime

56
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

57
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

58
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

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

60
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

61
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

62
Timer Input Events

• Can create continuously running timmers
• loop TRUE stopTime lt startTime
• Can run one cycle then stop
• loop FALSE stopTime lt startTime
• Can run until stopped, or after cycle is over
• loop TRUE or FALSE stopTime gt startTime
• The set_startTime input event
• Sets when the timer should start
• The set_stopTime input event
• Sets when the timer should stop

63
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

64
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

65
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

66
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

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

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

69
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

70
Other Interpolators

• You can also interpolate
• Rotations
• Colors
• Coordinates
• Normals
• Scalars

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

72
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

73
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

74
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