CO 641 Computer Graphics and Animation X 3

CO 641 Computer Graphics and Animation X 3 d / VRML Richard Jones R. E. Jones@kent. ac. uk SW 107 http: //www. cs. kent. ac. uk/teaching/10/modules/CO/6/41/rej/ © Richard Jones, 2009 CO 641 Computer Graphics 1

3 D worlds Objects (International Space Station) © Richard Jones, 2009 CO 641 Computer Graphics Tours: building 2

Constructing 3 d worlds Open. GL • www. open. GL. org Direct. X • www. microsoft. com/directx Java 3 d • java. sun. com/products/java-media/3 D/ • www. java 3 d. org X 3 D • www. cs. ukc. ac. uk/teaching/01/modules/CO/6/12/key. Frame. Square Motion. wrl Virtual Reality Modelling Language (VRML) • www. web 3 d. org/x 3 d/vrml/ © Richard Jones, 2009 CO 641 Computer Graphics 3

VRML Markup language for 3 D scenes • Widely supported, non-proprietary, scene description language • animation (scripts, sensors, interpolators, event routes) • VRML 2. 0 (VRML 97) 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 CO 641 Computer Graphics 4

X 3 D 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 CO 641 Computer Graphics 5

Why? Simple syntax Learning curve is not steep • Focus on graphics rather than complexities of library Easy to get quite nice images Simple animation models Helps • Understanding of scene graph • Understanding hierarchies • Understanding of transformations © Richard Jones, 2009 CO 641 Computer Graphics 6

Syntax Transform { children Shape { appearance Appearance { material Material { diffuse. Color 0 1 0 } } geometry { Cylinder { height 0. 1 radius 0. 5 } } } } <Transform> <Shape> <Appearance> <Material diffuse. Color="0 1 0"/> </Appearance> <Cylinder height="0. 1" radius="0. 5"/> </Shape> </Transform> © Richard Jones, 2009 CO 641 Computer Graphics . wrl, . x 3 dv . x 3 d 7

X 3 D/VRML basics X 3 D/VRML comes with a fixed set of objects (called nodes). X 3 D/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 CO 641 Computer Graphics 8

Creating objects X 3 d/VRML has a notion of a node • A fundamental building block • Objects – Cylinder, Cone, Box, Spot. Light • 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 CO 641 Computer Graphics 9

Shape nodes are basic containers for geometry (Cylinder, Box, etc. . ) They allow two child nodes: appearance and geometry. #VRML V 2. 0 utf 8 Shape { appearance Appearance { material Material { } } geometry Cylinder { } } #X 3 D V 3. 0 utf-8 <Shape <Appearance> <Material /> </Appearance> <Cylinder /> </Shape> mandatory file headers © Richard Jones, 2009 CO 641 Computer Graphics 10

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 CO 641 Computer Graphics 11

Appearance node Add properties: colour, smoothness, shininess etc. Commonly used fields: • material (diffuse. Color, shininess, ambient. Intensity, transparency) • texture (Image. Texture, Movie. Texture, Pixel. Texture) Material { diffuse. Color 0. 5 # red green blue = Gray shininess 0. 5 ambient. Intensity 0. 35 } <Material diffuse. Color="0. 5" shininess="0. 5" ambient. Intensity="0. 35" /> © Richard Jones, 2009 CO 641 Computer Graphics 12

Geometry node #VRML V 2. 0 utf 8 Shape { appearance Appearance { material Material { diffuse. Color. 5 0. 5 shininess . 5 } } geometry Cylinder { radius 3 height 6 side TRUE top FALSE bottom TRUE } } © Richard Jones, 2009 CO 641 Computer Graphics Important: centre of the object (0, 0) 13

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 CO 641 Computer Graphics 14

Transformations y Transform { x rotation 1 0 0 1. 57 translation 4 3. 5 0 scale 1. 7 1 0. 7 children [ Inline { url “frog. wrl” } ] } z angle in radians: p radians = 180° right-hand coords axis (defined by origin to this point) Default values used for omitted fields. Order is always: scale—rotate—translate. © Richard Jones, 2009 CO 641 Computer Graphics scaled relative to the origin 15

Simple Example #X 3 D V 3. 0 utf-8 <Transform translation="1 1 0" > # first child - a red sphere <Shape> <Appearance> <Material diffuse. Color="1 0 0" > # red </Appearance> <Sphere radius="2. 3” > </Shape> </Transform> NB: use a good layout style for readability. © Richard Jones, 2009 CO 641 Computer Graphics 16

#VRML V 2. 0 utf 8 Transform { children [ Navigation. Info { headlight FALSE } # We'll add our own light Directional. Light { 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 { diffuse. Color 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 { diffuse. Color 0 0 1 } # Blue } ] } DRAW THE SCENE ] # end of children for world } © Richard Jones, 2009 CO 641 Computer Graphics GRAPH 17

Title and information As with HTML, you can also add a title and information about the file: #VRML V 2. 0 utf 8 World. Info { title “A virtual picture of a house” info “VRML model of a house” }. . . © Richard Jones, 2009 CO 641 Computer Graphics 18

Programming style 1. Start with the header #VRML 2. 0 utf 8 2. Global nodes World. Info • 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 anywhere 1. 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 7. Time sensors can appear after/before scene hierarchy. © Richard Jones, 2009 CO 641 Computer Graphics 19

Reuse It’s good software engineering practice to reuse code — in any language. There are 3 ways to do this: 1. Inline 2. DEF/USE 3. PROTO (and EXTERNPROTO) © Richard Jones, 2009 CO 641 Computer Graphics 20

Inline #VRML V 2. 0 utf 8 Inline { url ”Lower. Platform. wrl” } #X 3 D V 3. 0 utf-8 <Inline url=”Lower. Platform. wrl” > Reads its children from any URL (can be delayed until the Inline is displayed). Optional fields bbox. Size and bbox. Center © Richard Jones, 2009 CO 641 Computer Graphics 21

DEF/USE A simple naming mechanism. Use for multiple instances, repetition. . . Appearance { texture DEF GRAINY Image. Texture {url ”grainy. jpg” } # names a texture map. . . }. . . Appearance { texture USE GRAINY } <Appearance> <Image. Texture DEF=“GRAINY” url=”grainy. jpg” > # names a texture map. . . </Appearance> . . . <Appearance USE=“GRAINY” /> © Richard Jones, 2009 CO 641 Computer Graphics 22

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 CO 641 Computer Graphics 23

PROTO Seat [ ] { Shape { appearance Appearance { material Material { diffuse. Color 0 0 1 } } geometry Box {} } } © Richard Jones, 2009 CO 641 Computer Graphics Once you’ve built your prototype, you can use it as below… Seat{} This gives a blue seat — it’s always blue. 24

PROTO parameters PROTO Seat [ field SFColor seat. Color. 5. 5. 5 ] { Shape { appearance Appearance { material Material { diffuse. Color IS seat. Color } } geometry Box {} } } © Richard Jones, 2009 CO 641 Computer Graphics By default Seat{} the seat is grey. But we can instantiate a seat of any colour, e. g. red Seat{seat. Color 1 0 0} Note that only seat. Color is public. 25

Node specifications The ISO standard gives the interface details to each node, etc. (refer to the spec), e. g. Sphere { field SFFloat radius 1 } Text { exposed. Field MFString string exposed. Field SFNode font. Style exposed. Field MFFloat length exposed. Field SFFloat max. Extent } © Richard Jones, 2009 CO 641 Computer Graphics [] NULL [] 0. 0 exposed. Field The field automatically SFNode has a set_(MFNode) method The field is a single (set_string) so that it node number can be(any changed byofother nodes)(e. g. scripts) nodes field The field can only be set in the ‘constructor’ 26

#VRML V 2. 0 utf 8 PROTO Sized. Positioned. Object [ field SFColor base. Color. 5. 5. 5 field SFVec 3 f position 0 0 0 field SFNode model NULL ] { Transform { children [ Shape { appearance Appearance { material Material { diffuse. Color IS base. Color } } geometry IS model } ] translation IS position } } © Richard Jones, 2009 CO 641 Computer Graphics Advanced PROTO Group { children [ Sized. Positioned. Object { model Cone{} base. Color 1 0 0 position -3 0 0 } Sized. Positioned. Object { model Cylinder{} base. Color 1 1 0 position 0 0 0} ] } 27

Collision Transform { translation 700 100 -100 children [ Collision { collide TRUE proxy Shape { • Quite processor intensive. geometry Box { size 4 2 1 } • Best to put collision only } over nodes that require it. #children [ • Also simplify the geometry & # Inline { url “complex. wrl”} #] use collision proxies. } • By default, collision detection is ] } • Collision of the Avatar with objects. • e. g. prevent you walking through a wall. on. © Richard Jones, 2009 CO 641 Computer Graphics 40

X 3 D Profiles Target a common market or functionality. Full Immersive Interactive Core I Interchange CAD © Richard Jones, 2009 CO 641 Computer Graphics 41

Core: basic defs (e. g. ROUTE), no geometry, appearance, … Interchange: exchange models between 3 D applications, geometries, appearances, keyframe animation Immersive: closest to Vr. ML 97, Interactive + new nodes Full: Interactive + Humanoid Animations and other advanced components © Richard Jones, 2009 CO 641 Computer Graphics 42

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 scene Events: • 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. . . © Richard Jones, 2009 then after 6 seconds do something CO 641 Computer Graphics 43

Events As well as fields , some nodes have events. • input events • output events Group { • ROUTE events between nodes Touch. Sensor on is. Active Point. Light children [ DEF LIGHT_CONTROL Touch. Sensor {} Inline{ url [ “lightswitch. wrl” ] } DEF LIGHT Point. Light { location -6 4 2 on FALSE } Inline {url [ “table. wrl” ] } ROUTE LIGHT_CONTROL. is. Active TO LIGHT. on © Richard Jones, 2009 CO 641 Computer Graphics 44

Plane sensor Make object move ONLY along a plane Group { children [ DEF DRAG_ME Plane. Sensor { min. Position 0 0 # start at 0, 0 max. Position 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 CO 641 Computer Graphics 45

Forms of animation Flip book • predefined set of images • consecutively replayed • works on 2 D 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. . . © Richard Jones, 2009 CO 641 Computer Graphics gravity =10 reflection =90 o 46

Flip Book animation in VRML Have a series of predefined VRML geometry files. Place them in a switch statement, a choice Switch between them using a timer node Group { children [ DEF TOUCH Touch. Sensor { }, DEF TOGGLE Script {. . holds current choice, and if called moves to next. . at end moves to first choice }, DEF SWITCH Switch { which. Choice 0 choice [ Inline { url "frame 1. wrl" }, Inline { url "frame 2. wrl" }, Inline { url "frame 3. wrl" }, ] } ] ROUTE TOUCH. touch. Time TO TOGGLE. toggle ROUTE TOGGLE. which TO SWITCH. which. Choice } © Richard Jones, 2009 CO 641 Computer Graphics 47

Interpolator Nodes Interpolator 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 key. Values. The keys must be monotonically non-decreasing, otherwise the results are undefined. The keys are not restricted to any interval. © Richard Jones, 2009 CO 641 Computer Graphics 48

Interpolators The following node types are interpolator nodes, each based on the type of value that is interpolated: • • • Color. Interpolator Coordinate. Interpolator Normal. Interpolator Orientation. Interpolator Position. Interpolator Scalar. Interpolator semantics: event. In SFFloat set_fraction event. Out [S|M]F<type> value_changed exposed. Field MFFloat key [. . . ] exposed. Field MF<type> key. Value [. . . ] © Richard Jones, 2009 CO 641 Computer Graphics 49

Key frame in VRML Use an Engine (such as an Interpolator) Moving a cube (left to right) x + 3 Touch Sensor Timer start. Time enter. Time Trigger © Richard Jones, 2009 Mover set_fraction intensity value_changed fraction Timer Object Engine e. g Position. Interpolator CO 641 Computer Graphics Target 50

Key frame in VRML Group { children [ DEF TARGET_Xform Transform { children [ Shape { geometry Box { } } ] }, 2 seconds DEF TIMER Time. Sensor { cycle. Interval 2 loop TRUE }, DEF MOVER_POS Position. Interpolator { key [ 0. 0, 0. 5, 1 ] key. Value [ 0 0 0, 3 0 0, 0 0 0 ] Key frames. . . } ] ROUTE TIMER. fraction TO MOVER_POS. set_fraction ROUTE MOVER_POS. value_changed TO TARGET_Xform. translation } © Richard Jones, 2009 CO 641 Computer Graphics 51

Key frame animation example Using Position. Interpolator Timer © Richard Jones, 2009 CO 641 Computer Graphics 52

Script nodes The script node allows code to be incorporated. The script can be in various Scripting languages, • Java. Script (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 event. Ins) and that have their direct. Output field set to TRUE may directly post event. Ins to those nodes. They may also read the last value sent from any of the node's event. Outs. © Richard Jones, 2009 CO 641 Computer Graphics 53

Accessing event. Ins and event. Outs of other nodes The script can access any event. In or event. Out of any node to which it has access. • access and modify an exposed field of another node (i. e. , sends a set_translation event. In to the Transform node) using ECMAScript: DEF Some. Node Transform { } DEF Some. Script { field SFNode tnode USE Some. Node event. In SFVec 3 f pos direct. Output TRUE url "javascript: function pos (value, timestamp) { tnode. set_translation = value; }" } © Richard Jones, 2009 CO 641 Computer Graphics 54

#VRML V 2. 0 utf 8 Group { children [ DEF TOUCH Touch. Sensor {}, DEF TOGGLE Script { event. In SFTime toggle event. Out SFInt 32 which field SFInt 32 this. Val 0 url "javascript: function toggle() { this. Val = this. Val >= 2 ? 0 : this. Val+1; which = this. Val; }" }, DEF SWITCH Switch { which. Choice 0 choice [ Inline { url "arrow. DOWN. wrl" }, Inline { url "arrow. UP. wrl" }, Inline { url "object. wrl" }, ] } ] ROUTE TOUCH. touch. Time TO TOGGLE. toggle ROUTE TOGGLE. which TO SWITCH. which. Choice © Richard Jones, 2009 CO 641 Computer Graphics } 55

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 CO 641 Computer Graphics 56

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 CO 641 Computer Graphics 57

# Proximity. Sensor to ensure HUD geometry moves with user # used in all HUD systems DEF Global. Proximity. Sensor { size 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 HUD ROUTE Global. Prox. position_changed TO HUD. translation ROUTE Global. Prox. orientation_changed TO HUD. rotation © Richard Jones, 2009 CO 641 Computer Graphics 58