Co641 computer graphics and animation x3d vrml
This presentation is the property of its rightful owner.
Sponsored Links
1 / 46

CO641 Computer Graphics and Animation X3d / VRML PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

CO641 Computer Graphics and Animation X3d / VRML. Richard Jones [email protected] 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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Co641 computer graphics and animation x3d vrml

CO641 Computer Graphics and AnimationX3d / VRML

Richard Jones

[email protected]

SW107

http://www.cs.kent.ac.uk/teaching/10/modules/CO/6/41/rej/

CO641 Computer Graphics


3d worlds

3D worlds

Tours: building

Objects (International Space Station)

CO641 Computer Graphics


Constructing 3d worlds

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


Co641 computer graphics and animation x3d vrml

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


Co641 computer graphics and animation x3d vrml

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


Co641 computer graphics and animation x3d vrml

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


Syntax

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


X3d vrml basics

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


Creating objects

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


Shape node

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


Vrml and html

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


Appearance node

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 shininess0.5 ambientIntensity 0.35}

  • <Material diffuseColor="0.5 0.5 0.5" shininess="0.5" ambientIntensity="0.35"/>

CO641 Computer Graphics


Geometry node

Geometry node

  • #VRML V2.0 utf8

  • Shape {

  • appearance Appearance {

  • material Material {

  • diffuseColor .5 0 .5

  • shininess .5

  • }

  • }

  • geometry Cylinder {

  • radius 3

  • height6

  • sideTRUE

  • topFALSE

  • bottomTRUE

  • }

  • }

Important:centre ofthe object(0,0)

CO641 Computer Graphics


Scene graphs

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


Transformations

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


Simple example

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


Co641 computer graphics and animation x3d vrml

  • #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


Title and information

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


Programming style

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


Reuse

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


Inline

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


Def use

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


Prototypes

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


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.

PROTO

CO641 Computer Graphics


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.

PROTO parameters

CO641 Computer Graphics


Node specifications

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


Advanced proto

#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


Collision

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


X3d profiles

X3D Profiles

  • Target a common market or functionality.

Full

I

Immersive

Interactive

CAD

Core

Interchange

CO641 Computer Graphics


Co641 computer graphics and animation x3d vrml

  • 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


Interaction

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


Events

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


Plane sensor

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


Forms of animation

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


Flip book animation in vrml

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


Interpolator nodes

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


Interpolators

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


Key frame in vrml

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


Key frame in vrml1

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


Key frame animation example

Key frame animation example

  • Using

  • PositionInterpolator Timer

CO641 Computer Graphics


Script nodes

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


Accessing eventins and eventouts of other nodes

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


Co641 computer graphics and animation x3d vrml

  • #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


Initialize shutdown

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


Trick head up display hud

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


Co641 computer graphics and animation x3d vrml

# 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


  • Login