1 / 46

CO641 Computer Graphics and Animation X3d / VRML

CO641 Computer Graphics and Animation X3d / VRML. Richard Jones R.E.Jones@kent.ac.uk SW107. http://www.cs.kent.ac.uk/teaching/10/modules/CO/6/41/rej/. 3D worlds. Tours: building. Objects (International Space Station). Constructing 3d worlds. OpenGL www.openGL.org DirectX

libby
Download Presentation

CO641 Computer Graphics and Animation X3d / VRML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CO641 Computer Graphics and AnimationX3d / VRML Richard Jones R.E.Jones@kent.ac.uk SW107 http://www.cs.kent.ac.uk/teaching/10/modules/CO/6/41/rej/ CO641 Computer Graphics

  2. 3D worlds Tours: building Objects (International Space Station) 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/ 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) 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. 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 images • Simple animation models • Helps • Understanding of scene graph • Understanding hierarchies • Understanding of transformations CO641 Computer Graphics

  7. Syntax .wrl, .x3dv • Transform { 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> .x3d 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. 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. CO641 Computer Graphics

  10. Shape node • Shape 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 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> 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"/> CO641 Computer Graphics

  13. Geometry node • #VRML V2.0 utf8 • Shape { • 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) 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. CO641 Computer Graphics

  15. Transformations y • 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. x z angle in radians: p radians = 180° right-hand coords axis (defined by origin to this point) scaled relative to the origin 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. CO641 Computer Graphics

  17. #VRML V2.0 utf8 • Transform { • 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 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” } ... CO641 Computer Graphics

  19. Programming style • Start with the header #VRML 2.0 utf8 • Global nodes WorldInfo • metadata & scene setup. • Prototypes • a ‘constructor’ — must be defined before you can create an instance of the prototyped type. • Scene hierarchy • most scene hierarchies have one root node. • Scripts & Interpolators, placed anywhere • often placed in complex nodes or after scene hierarchy. • 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. CO641 Computer Graphics

  20. Reuse • It’s good software engineering practice to reuse code — in any language. • There are 3 ways to do this: • Inline • DEF/USE • PROTO (and EXTERNPROTO) 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 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” /> CO641 Computer Graphics

  23. Prototypes IMPORTANT • 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. CO641 Computer Graphics

  24. 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. PROTO CO641 Computer Graphics

  25. 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. PROTO parameters CO641 Computer Graphics

  26. 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 { exposedField MFString string [] exposedField SFNode fontStyle NULL exposedField MFFloat length [] exposedField SFFloat maxExtent 0.0 • } exposedField The field automatically has a set_ method (set_string) so that it can be changed by other nodes (e.g. scripts) SFNode (MFNode) The field is a single node (any number of nodes) field The field can only be set in the ‘constructor’ CO641 Computer Graphics

  27. #VRML V2.0 utf8 PROTO 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} ] } Advanced PROTO CO641 Computer Graphics

  28. 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. CO641 Computer Graphics

  29. X3D Profiles • Target a common market or functionality. Full I Immersive Interactive CAD Core Interchange CO641 Computer Graphics

  30. 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 CO641 Computer Graphics

  31. 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 ... then after 6 seconds do something CO641 Computer Graphics

  32. TouchSensor on isActive PointLight Events • As well as fields , some nodes have events. • input events • output events • ROUTE events between nodes Group { children [ DEF LIGHT_CONTROLTouchSensor {} Inline{ url [ “lightswitch.wrl” ] } ] } DEF LIGHT PointLight { location -6 4 2 on FALSE } Inline {url [ “table.wrl” ] } ROUTE LIGHT_CONTROL.isActive TO LIGHT.on CO641 Computer Graphics

  33. Plane sensor • Make 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 CO641 Computer Graphics

  34. Forms of animation • Flip 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 =10 reflection =90o CO641 Computer Graphics

  35. 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 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 } CO641 Computer Graphics

  36. 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 keyValues. • The keys must be monotonically non-decreasing, otherwise the results are undefined. • The keys are not restricted to any interval. CO641 Computer Graphics

  37. Interpolators • The 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 [...] CO641 Computer Graphics

  38. Key frame in VRML • Use an Engine (such as an Interpolator) • Moving a cube (left to right) x + 3 Object Touch Sensor Timer Mover intensity startTime set_fraction value_changed enterTime fraction Target Trigger Timer Engine e.g Position- Interpolator CO641 Computer Graphics

  39. Key frame in VRML Group { 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 } 2 seconds Key frames... CO641 Computer Graphics

  40. Key frame animation example • Using • PositionInterpolator Timer CO641 Computer Graphics

  41. Script nodes • The 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. CO641 Computer Graphics

  42. 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; }" } CO641 Computer Graphics

  43. #VRML V2.0 utf8 • Group { • 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 • } CO641 Computer Graphics

  44. 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. CO641 Computer Graphics

  45. 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. CO641 Computer Graphics

  46. # 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 CO641 Computer Graphics

More Related