© Richard Jones, 2009 CO641 Computer Graphics 1
CO641 Computer Graphics and Animation
X3d / VRML
Richard [email protected]
http://www.cs.kent.ac.uk/teaching/10/modules/CO/6/41/rej/
© Richard Jones, 2009 CO641 Computer Graphics 2
3D worlds
Objects (International Space Station) Tours: building
© Richard Jones, 2009 CO641 Computer Graphics 3
Constructing 3d worlds
OpenGL• www.openGL.org
DirectX • www.microsoft.com/directx
Java 3d• java.sun.com/products/java-media/3D/• www.java3d.org
X3D• www.web3d.org/x3d/
Virtual Reality Modelling Language (VRML)• www.web3d.org/x3d/vrml/
© Richard Jones, 2009 CO641 Computer Graphics 4
VRML
Markup language for 3D scenes•Widely supported, non-proprietary, scene description
language•animation (scripts, sensors, interpolators, event routes)•VRML 2.0 (VRML97) specifications.
VRML files•MIME type is "model/vrml”•Filename extensions is ".wrl”
Plugins for browsers•Cortona (good for developing)•Cosmoplayer (nicer user interface but crashes nastily)
© Richard Jones, 2009 CO641 Computer Graphics 5
X3D
Open software standard.
Successor to VRML.
New features, APIs, encoding formats, stricter conformance, componentised architecture (profiles).
• XML encoding and Scene Authoring Interface.
• Event model, VRML left many decisions to the browser implementer.
•Compatible with Scalable Vector Graphics (SVG).•New nodes.
© Richard Jones, 2009 CO641 Computer Graphics 6
Why?
Simple syntax Learning curve is not steep
•Focus on graphics rather than complexities of library
Easy to get quite nice imagesSimple animation models
Helps•Understanding of scene graph•Understanding hierarchies•Understanding of transformations
© Richard Jones, 2009 CO641 Computer Graphics 7
SyntaxTransform { children Shape { appearance Appearance { material Material { diffuseColor 0 1 0 } } geometry { Cylinder { height 0.1 radius 0.5 } } }}
<Transform>
<Shape>
<Appearance>
<Material diffuseColor="0 1 0"/>
</Appearance>
<Cylinder height="0.1" radius="0.5"/>
</Shape>
</Transform>
.wrl, .x3dv
.x3d
© Richard Jones, 2009 CO641 Computer Graphics 8
X3D/VRML basics
X3D/VRML comes with a fixed set of objects (called nodes).
X3D/VRML is a programming language.
We’ll want to structure the code and create new (specific) nodes
The prototyping feature allows complex objects to be created, reused, and changing certain characteristics when desired.
It’s important to use good programming practice…just like you would in Java.
© Richard Jones, 2009 CO641 Computer Graphics 9
Creating objects
X3d/VRML has a notion of a node• A fundamental building block• Objects
– Cylinder, Cone, Box, SpotLight• Containers
– Shape (contains geometry node and appearance node)
Hierarchies• Nodes can contain nodes
Each node contains fields (the parameters)Special nodes include:
• Hyperlinking, collision detection
The node hierarchy is the scene graph.
© Richard Jones, 2009 CO641 Computer Graphics 10
Shape nodeShape nodes are basic containers for geometry (Cylinder, Box, etc..)They allow two child nodes: appearance and geometry.
#VRML V2.0 utf8Shape { appearance Appearance { material Material { } } geometry Cylinder { }}
#X3D V3.0 utf-8<Shape <Appearance> <Material /> </Appearance> <Cylinder /></Shape>
mandatory file headers
© Richard Jones, 2009 CO641 Computer Graphics 11
VRML and HTML
Embed VRML in a web page
<html>
<head><title>Embeded VRML test</title> </head>
<body>
<center>
<embed src= "world.wrl"
border=0 height="250" width="600">
</center>
<body>
</html>
© Richard Jones, 2009 CO641 Computer Graphics 12
Appearance node
Add properties: colour, smoothness, shininess etc.Commonly used fields:
• material (diffuseColor, shininess, ambientIntensity, transparency)• texture (ImageTexture, MovieTexture, PixelTexture)
Material { diffuseColor 0.5 0.5 0.5 # red green blue = Gray shininess 0.5 ambientIntensity 0.35}
<Material diffuseColor="0.5 0.5 0.5" shininess="0.5" ambientIntensity="0.35"/>
© Richard Jones, 2009 CO641 Computer Graphics 13
Geometry node
#VRML V2.0 utf8Shape { appearance Appearance { material Material { diffuseColor .5 0 .5 shininess .5 } } geometry Cylinder { radius 3 height 6 side TRUE top FALSE bottom TRUE }}
Important:centre ofthe object(0,0)
© Richard Jones, 2009 CO641 Computer Graphics 14
Scene graphs
A VRML world is a hierarchy of nodes, including Shapes and transformations.
Useful to think of this as a graph.
Use transformations to scale, rotate and move objects.
© Richard Jones, 2009 CO641 Computer Graphics 15
Transformations
Transform {
rotation 1 0 0 1.57
translation 4 3.5 0
scale 1.7 1 0.7
children [ Inline { url “frog.wrl” } ]}
Default values used for omitted fields.Order is always: scale—rotate—translate.
axis (defined by origin to this point)
anglein radians: radians = 180°
right-hand coords
scaled relative to the origin
x
y
z
© Richard Jones, 2009 CO641 Computer Graphics 16
Simple Example
#X3D V3.0 utf-8<Transform translation="1 1 0" > # first child - a red sphere <Shape> <Appearance>
<Material diffuseColor="1 0 0" > # red </Appearance> <Sphere radius="2.3” > </Shape></Transform>
NB: use a good layout style for readability.
© Richard Jones, 2009 CO641 Computer Graphics 17
#VRML V2.0 utf8Transform { children [ NavigationInfo { headlight FALSE } # We'll add our own light DirectionalLight { direction 0 0 -1} # Light illuminating scene Transform { # Third child - a red sphere translation 3 0 1 children [ Shape { geometry Sphere { radius 2.3 } appearance Appearance { material Material { diffuseColor 1 0 0 } # Red } } ] } Transform { # Fourth child - a blue box translation -2.4 .2 1 rotation 0 1 1 .9 children [ Shape { geometry Box { } appearance Appearance { material Material { diffuseColor 0 0 1 } # Blue } } ] } ] # end of children for world}
DRAW THE SCENE GRAPH
© Richard Jones, 2009 CO641 Computer Graphics 18
Title and information
As with HTML, you can also add a title and information about the file:
#VRML V2.0 utf8
WorldInfo {
title “A virtual picture of a house”
info “VRML model of a house”
}
...
© Richard Jones, 2009 CO641 Computer Graphics 19
Programming style
1. Start with the header #VRML 2.0 utf82. Global nodes WorldInfo
• metadata & scene setup.3. Prototypes
• a ‘constructor’ — must be defined before you can create an instance of the prototyped type.
4. Scene hierarchy• most scene hierarchies have one root node.
5. Scripts & Interpolators, placed anywhere1.often placed in complex nodes or after scene hierarchy.
6. Routes must appear after the nodes and fields they refer to
• often they are placed in complex nodes or after the scene hierarchy
• Time sensors can appear after/before scene hierarchy.
© Richard Jones, 2009 CO641 Computer Graphics 20
Reuse
It’s good software engineering practice to reuse code — in any language.
There are 3 ways to do this:
1. Inline2. DEF/USE3. PROTO (and EXTERNPROTO)
© Richard Jones, 2009 CO641 Computer Graphics 21
Inline
#VRML V2.0 utf8Inline {
url ”LowerPlatform.wrl”}
#X3D V3.0 utf-8<Inline url=”LowerPlatform.wrl” >
Reads its children from any URL (can be delayed until the Inline is displayed).Optional fields bboxSize and bboxCenter
© Richard Jones, 2009 CO641 Computer Graphics 22
DEF/USE
A simple naming mechanism.Use for multiple instances, repetition...
Appearance { texture DEF GRAINY ImageTexture {url ”grainy.jpg” } # names a texture map...}...Appearance { texture USE GRAINY }
<Appearance> <ImageTexture DEF=“GRAINY” url=”grainy.jpg” > # names a texture map...</Appearance> ...<Appearance USE=“GRAINY” />
© Richard Jones, 2009 CO641 Computer Graphics 23
Prototypes
These are IMPORTANT
They are the key to good practice, and the reason why most tools (which don’t use them) generate hard to maintain models.
A PROTO defines a new node type in terms of pre-defined nodes (either built in nodes, or other prototypes).The type of the prototype is given by its root node.
Its good practice to utilize prototypes rather than DEF/USE — make all your nodes into a prototype.
© Richard Jones, 2009 CO641 Computer Graphics 24
PROTO
PROTO Seat [
]
{
Shape {
appearance Appearance {
material Material {
diffuseColor 0 0 1
}
}
geometry Box {}
}
}
Once you’ve built your prototype, you can use it as below…
Seat{}
This gives a blue seat — it’s always blue.
© Richard Jones, 2009 CO641 Computer Graphics 25
PROTO parameters
PROTO Seat [
field SFColor seatColor .5 .5 .5
]
{
Shape {
appearance Appearance {
material Material {
diffuseColor IS seatColor
}
}
geometry Box {}
}
}
By default Seat{}the seat is grey.
But we can instantiate a seat of any colour, e.g. red Seat{seatColor 1 0 0}
Note that only seatColor is public.
© Richard Jones, 2009 CO641 Computer Graphics 26
Node specificationsThe ISO standard gives the interface details to each node, etc.(refer to the spec), e.g.
Sphere { field SFFloat radius 1}
Text { exposedField MFString string [] exposedField SFNode fontStyle NULL exposedField MFFloat length [] exposedField SFFloat maxExtent 0.0
}
SFNode (MFNode)The field is a single node (any number of nodes)
fieldThe field can only be set in the ‘constructor’
exposedFieldThe field automatically has a set_ method (set_string) so that it can be changed by other nodes (e.g. scripts)
© Richard Jones, 2009 CO641 Computer Graphics 27
Advanced PROTO
#VRML V2.0 utf8PROTO SizedPositionedObject [ field SFColor baseColor .5 .5 .5 field SFVec3f position 0 0 0 field SFNode model NULL]{ Transform { children [ Shape { appearance Appearance { material Material { diffuseColor IS baseColor } } geometry IS model } ] translation IS position }}
Group { children [ SizedPositionedObject { model Cone{} baseColor 1 0 0 position -3 0 0 }
SizedPositionedObject { model Cylinder{} baseColor 1 1 0 position 0 0 0} ]}
© Richard Jones, 2009 CO641 Computer Graphics 40
Collision
Transform { translation 700 100 -100 children [ Collision { collide TRUE proxy Shape { geometry Box { size 4 2 1 } } #children [ # Inline { url “complex.wrl”} #] } ]}
• Collision of the Avatar with objects.
• e.g. prevent you walking through a wall.
• Quite processor intensive.• Best to put collision only
over nodes that require it.• Also simplify the geometry
& use collision proxies.
• By default, collision detection is on.
© Richard Jones, 2009 CO641 Computer Graphics 41
I
CAD
X3D Profiles
Target a common market or functionality.
Interactive
Core
Interchange
Immersive
Full
© Richard Jones, 2009 CO641 Computer Graphics 42
Core: basic defs (e.g. ROUTE), no geometry, appearance,…
Interchange: exchange models between 3D applications, geometries, appearances, keyframe animation
Immersive: closest to VrML97, Interactive + new nodes
Full: Interactive + Humanoid Animations and other advanced components
© Richard Jones, 2009 CO641 Computer Graphics 43
Interaction
Anchor• load up an HTML file or another VRML file
Inline• Load up an external VRML file into this one.
Collision detection whilst moving round a sceneEvents:
•Sensor – effect the world from a mouse event– detect that the mouse is over me - and then change the
world...• Scripts (user defined programs..)• Interpolators (pre-defined)
Timers• tick, tick ... then after 6 seconds do something
© Richard Jones, 2009 CO641 Computer Graphics 44
Events
As well as fields , some nodes have events.•input events•output events•ROUTE events between nodes
Group { children [ DEF LIGHT_CONTROL TouchSensor {} Inline{ url [ “lightswitch.wrl” ] } ]}DEF LIGHT PointLight { location -6 4 2 on FALSE }Inline {url [ “table.wrl” ] }ROUTE LIGHT_CONTROL.isActive TO LIGHT.on
isActive
on
TouchSensor
PointLight
© Richard Jones, 2009 CO641 Computer Graphics 45
Plane sensorMake object move ONLY along a plane
Group { children [
DEF DRAG_ME PlaneSensor {
minPosition 0 0 # start at 0,0
maxPosition 10 0 # move to 10,0
}
DEF OBJ Transform {
translation 0 0 0
children [ Inline { url [“geometry_to_move.wrl” ] } ]
}
]
}
ROUTE DRAG_ME.translation_changed TO OBF.translation
© Richard Jones, 2009 CO641 Computer Graphics 46
Forms of animationFlip book
• predefined set of images• consecutively replayed • works on 2D bitmap images• interaction: stop,play,rewind
Key frame• define some key frames• interpolate between (in-betweening)• interaction: stop,play,rewind,trajectory,re-action
Procedural• start with an object in space• use physical laws (and other equations) to
effect the object• interaction: stop, play, rewind, mass, gravity, shape...
gravity =10reflection =90o
© Richard Jones, 2009 CO641 Computer Graphics 47
Flip Book animation in VRMLHave a series of predefined VRML geometry files.Place them in a switch statement, a choiceSwitch between them using a timer node
Group { children [ DEF TOUCH TouchSensor { }, DEF TOGGLE Script { ..holds current choice, and if called moves to next....
at end moves to first choice }, DEF SWITCH Switch { whichChoice 0 choice [
Inline { url "frame1.wrl" }, Inline { url "frame2.wrl" }, Inline { url "frame3.wrl" },
] } ] ROUTE TOUCH.touchTime TO TOGGLE.toggle ROUTE TOGGLE.which TO SWITCH.whichChoice}
© Richard Jones, 2009 CO641 Computer Graphics 48
Interpolator NodesInterpolator nodes are designed for linear key-framed animation.
An interpolator node defines a piecewise-linear function, f(t), over the interval (-infinity, +infinity).
The piecewise-linear function is defined by n values of t, called keys, and the n corresponding values of f(t), called keyValues.
The keys must be monotonically non-decreasing, otherwise the results are undefined.
The keys are not restricted to any interval.
© Richard Jones, 2009 CO641 Computer Graphics 49
InterpolatorsThe following node types are interpolator nodes, each based on the type of value that is interpolated:
• ColorInterpolator • CoordinateInterpolator • NormalInterpolator • OrientationInterpolator • PositionInterpolator • ScalarInterpolator
Interpolator semantics:
eventIn SFFloat set_fraction eventOut [S|M]F<type> value_changed exposedField MFFloat key [...] exposedField MF<type>keyValue [...]
© Richard Jones, 2009 CO641 Computer Graphics 50
Key frame in VRMLUse an Engine (such as an Interpolator)Moving a cube (left to right) x + 3
enterTime
startTime
fraction
set_fraction
Trigger Timer Enginee.g Position-Interpolator
Touch Sensor Timer Mover
intensity
Target
Object
value_changed
© Richard Jones, 2009 CO641 Computer Graphics 51
Key frame in VRMLGroup { children [ DEF TARGET_Xform Transform { children [ Shape { geometry Box { } } ] },
DEF TIMER TimeSensor { cycleInterval 2 loop TRUE }, DEF MOVER_POS PositionInterpolator { key [ 0.0, 0.5, 1 ] keyValue [ 0 0 0, 3 0 0, 0 0 0 ] } ]
ROUTE TIMER.fraction TO MOVER_POS.set_fraction ROUTE MOVER_POS.value_changed TO TARGET_Xform.translation}
Key frames...
2 seconds
© Richard Jones, 2009 CO641 Computer Graphics 52
Key frame animation exampleUsing
PositionInterpolator Timer
© Richard Jones, 2009 CO641 Computer Graphics 53
Script nodesThe script node allows code to be incorporated.
The script can be in various Scripting languages,• JavaScript (or ECMASCRIPT) is the most commonly used.
A script node activates when it receives an event.
Script nodes receive events in timestamp order.
Scripts that have access to other nodes (via SFNode/MFNode fields or eventIns) and that have their directOutput field set to TRUE may directly post eventIns to those nodes. They may also read the last value sent from any of the node's eventOuts.
© Richard Jones, 2009 CO641 Computer Graphics 54
Accessing eventIns and eventOuts of other nodes
The script can access any eventIn or eventOut of any node to which it has access.
• access and modify an exposed field of another node (i.e., sends a set_translation eventIn to the Transform node) using ECMAScript:
DEF SomeNode Transform { }
DEF SomeScript Script { field SFNode tnode USE SomeNode eventIn SFVec3f pos directOutput TRUE url "javascript:
function pos (value, timestamp) { tnode.set_translation = value; }"
}
© Richard Jones, 2009 CO641 Computer Graphics 55
#VRML V2.0 utf8Group { children [ DEF TOUCH TouchSensor {}, DEF TOGGLE Script { eventIn SFTime toggle eventOut SFInt32 which field SFInt32 thisVal 0 url "javascript: function toggle() { thisVal = thisVal >= 2 ? 0 : thisVal+1; which = thisVal; }" }, DEF SWITCH Switch { whichChoice 0 choice [ Inline { url "arrowDOWN.wrl" }, Inline { url "arrowUP.wrl" }, Inline { url "object.wrl" }, ] } ] ROUTE TOUCH.touchTime TO TOGGLE.toggle ROUTE TOGGLE.which TO SWITCH.whichChoice}
© Richard Jones, 2009 CO641 Computer Graphics 56
Initialize() shutdown()Initialize() method:
• invoked before the browser presents the world to the user • before any events are processed by nodes in the same VRML file as the
Script node. • Events generated by the initialize() method have timestamps less than
any other events generated by the Script node. Allowing script initialization tasks to be performed prior to the user interacting with the world.
Shutdown() method• invoked when the corresponding Script node is deleted or the world
containing the Script node is unloaded or replaced by another world. • used as a clean-up operation, e.g. remove temporary files. Events
routed to those being removed will not get through! • nothing of the script may be invoked after the shutdown() method has
completed, though the shutdown() method may invoke methods or send events while shutting down.
© Richard Jones, 2009 CO641 Computer Graphics 57
Trick - Head Up Display (HUD)
Head Up Displays usually called HUDs are a simple collection of nodes which ensure that objects will remain in the same position relative to the user regardless of the movement or rotation.
They sense when the viewer has moved, then move the world to match appropriately.
© Richard Jones, 2009 CO641 Computer Graphics 58
# ProximitySensor to ensure HUD geometry moves with user# used in all HUD systemsDEF GlobalProx ProximitySensor { size 1000 1000 1000}
DEF HUD Transform { children [ # needed to prevent collisions with nearby HUD geometry # not needed if far away (a backdrop) or just lighting Collision { collide FALSE children [..HUD geometry and/or lighting ] } ]}# Route user position and orientation to HUDROUTE GlobalProx.position_changed TO HUD.translationROUTE GlobalProx.orientation_changed TO HUD.rotation