OpenSceneGraph Tutorial 2 Realism and Animation

Mikael Drugge Virtual Environments II Spring 2006 Based on material from http://www.openscenegraph.org/

SMM011

Agenda
Realism Loading models MilkShape Lightsources StateSets Materials Textures
SMM011 2

Introduction

SMM011

What makes the difference...?

SMM011

What causes the difference...?

Lightsources
Can change e.g. the mood of a scene via the lighting

Materials
Diffuse colour, the base colour Specularity/hardness, making plastics, metals, etc... Reflections, (not in the GL pipeline, but in e.g. raytracing) Emission, making objects glow or shine as if by light

Textures
Image mapping Bump mapping
SMM011 5

Creating models
Modeling via code
Easy for simple models But, requires a fair bit of imagination For example:
Sphere(0,-0.2,0,2); Sphere(1.3,1.4,0,1); Sphere(-1.3,1.4,0,1); Sphere(0,0,1.9,0.3);
SMM011 6

Whats this?

Creating models with modeling programs

A number of 3D modeling tools exist...
3D Studio, for graphics and raytracing AutoCAD, for CAD applications Maya, for graphics and animation Imagine, an old Amiga raytracer Wingz, modeler for POVray MilkShape, a modeling program

SMM011

MilkShape

SMM011

Introduction to MilkShape 3D
A basic low-polygon modeler Originally designed for a game (Half-Life) Supports basic operations
Select, move, rotate, scale, extrude, etc Low-level editing of vertices and faces Primitives (spheres, boxes, cylinders)

Skeletal animation capabilities Supports 37 file formats from 27 games/engines

SMM011 9

Introduction to MilkShape 3D
Why have we chosen to use MilkShape?
It is fairly intuitive to use and learn Its powerful enough for this course Handles a lot of different formats Allows for 30-day free trial

SMM011

10

Example screenshot of MilkShape

SMM011

11

The coordinate system in MilkShape

Y Y

X Z

X
SMM011 12

Demo of MilkShape!
Learning by doing, so lets create something...

SMM011

13

Demo of MilkShape!
Lets see the result in OSG...

SMM011

14

Loading Objects

Exporting
Autodesk 3DS LightWave 6.5x LWO
Flattens all edges

Wavefront OBJ
Materials in an extra MTL file

3DS or LWO recommended

SMM011

15

Loading models into OSG

SMM011

16

Remember this? Plugins...

OSG Scenegraph Rendering elements Tree/DAG nodes OSGUtil Traversers Enhancements OSGDB Database loading Plug-In management

JPG PNG GIF ...

3DS OSG LWO ...

Plug-Ins

OSGSim OSGText OSGParticle import openscenegraph.osgDB.osgDBNamespace; Handles text, Simulation (skybox, Special effects lights, time-of-day) (fire, smoke...) fonts, ...
SMM011 17

Loading objects code example

import openscenegraph.osgDB.osgDBNamespace; This will load the model into a Node Node node = osgDBNamespace.readNodeFile(somefile.lwo); scene.addChild(node);

Then just handle it like any other node

SMM011 18

What to think about for external models

Retrieving the dimensions for the model
Getting the BoundingSphere via node.getBound() getRadius() E.g. for normalizing the size of an unknown object

SMM011

19

Lightsources

SMM011

20

Lights and Lightsources

LightSource
Extends the Group node addChild() still possible Contains one Light setLight() getLight()

LightSource Light

SMM011

21

The Light
Encapsulates OpenGL glLight() functionality
setLightNum(), sets which GL light to operate on

setAmbient(), ambient colour of the light setDiffuse(), diffuse colour component setSpecular(), specular component Example fire in a fireplace
setDiffuse(orange), for the primary illumination setAmbient(darkred), for simulating the ambient light
SMM011 22

The Light
Light can be point source or spotlight
setPosition(), positions the light setDirection(), aims the spotlight in the given direction

Many functions to tweak the lighting

setConstantAttenuation(), also Linear and Quadratic Light intensity diminishes over a distance

SMM011

23

The Light
More spotlight functions
setSpotCutoff(distance) setSpotExponent(exp) (Not much documentation about these two functions experiment!)

SMM011

24

The Light shadows?

No shadows
Shadows are expensive to compute Possible to achieve in e.g. raytracing OSG does not support real time shadows Some engines do, however, e.g. AgentFX by Agency9

SMM011

25

Example

SMM011

26

Lighting

Lightsources example code

Light light1 = new Light(); light1.setLightNum(0); Create a light for GL light #0 Purple light

light1.setDiffuse( new Vec4fReference(1f,0f,1f, 1f)); light1.setPosition( new Vec4fReference(x, y, z, 1f));

SMM011

Note this!

27

Lightsources example code

// create lightsource and set its light LightSource ls = new LightSource(); ls.setLight(light1); // turn on the lightsource ls.setLocalStateSetModes( STATEATTRIBUTEValues.ON_Val);

SMM011

28

Lightsources example code

// create a stateset for the root node StateSet stateset = new StateSet(); root.setStateSet(stateset); (Well come back to StateSets in a few slides, so dont worry) // turn the lightsource on for this stateset ls.setStateSetModes(stateset, STATEATTRIBUTEValues.ON_Val);
SMM011 29

Lightsources example code

// then add the lightsource to the scene root.addChild(ls);

Repeat the process if you need more lightsources

You should reuse the same StateSet however

Keep in mind you can alter light properties during run-time

Colour, position, direction, etc... Turn lights on and off, etc...
SMM011 30

Summary how to add a lightsource

1. 2. 3. 4. 5. Create a new LightSource Create a new Light and associate with a GL light Adjust the light parameters; colours, attenuation... Make the lightsource use your light (via setLight()) Create a stateset for the part of the scenegraph tree that should be illuminated by the lightsource 6. Turn on the lightsource in the stateset 7. Add the lightsource to the scene
SMM011 31

Some things to think about

setDiffuse() may be all you need, BUT For materials where specularity, etc. are defined, the lightsource needs to emit light that affects these too
If not, the material properties will seem to have no effect

I.e. make sure you set the colour for all components
setDiffuse(somecolour); setSpecular(somecolour); etc...
SMM011 32

StateSets

SMM011

33

What is a StateSet?
It encapsulates OpenGL state modes and attributes
Used for textures, lightsources, materials, transparency...

E.g. specifies textures for Drawables

Drawables can share a single StateSet

Sharing statesets is recommended! Why?

It minimizes state changes in the GL pipeline Changing the state in the pipeline is expensive! Thus, sharing the same StateSet is a good thing
SMM011 34

StateSets example code revisited

// create a stateset for the root node StateSet stateset = new StateSet(); root.setStateSet(stateset); I.e. create a stateset that will apply from the root node and downwards. (The entire scene will use this stateset, meaning all of it will be illuminated by the lightsource in the example a few slides ago.)
SMM011 35

Materials

SMM011

36

Introduction to Materials
Not all objects are made of the same thing
Metals, glass, plastics, wood, paper, skin, crystal...

Different properties, depending on

How rough/smooth the surface of the object is How the light refracts when hitting an object The colour of the object and the light

SMM011

37

Materials in OSG
The Material class
Encapsulates OpenGLs glMaterial state

Usage
Create a new Material and set its properties Apply the material to a StateSet via stateset.setAttribute(material); Apply the StateSet to e.g. a Geode geode.setStateSet(stateset);
SMM011 38

The Material class some functions

Front and/or Back faces

setDiffuse(MATERIALFace, Vec4fReference) setSpecular(...) setAmbient(...) Vec4f(R, G, B, Alpha) setEmission(...) setShininess(...) setAlpha/setTransparency(...)

SMM011 39

Materials some examples and hints

setDiffuse
The base colour of an object

setSpecular & setShininess

Plastics often have a white specularity, and are hard, i.e. they have a small area where this specularity occurs Common mistake when making metals: making them too hard and white its better with a softer setting and a specularity in the same nuance as the diffuse colour

SMM011

40

Materials some examples and hints

setAmbient
Simulates the background noise of all lightsources Instead of black shadows, use the ambient colour

setEmission
Can make an object look like it radiates light Instead of using a real lightsource theyre expensive E.g. to create a torch, make the flame emissive and place a lightsource within it, also use an ambient component

SMM011

41

Materials some examples and hints

setAlpha/setTransparency
Sets the Alpha value of ambient, diffuse, specular and emission colours setAlpha(value) = setTransparency(1 value) Useful for making e.g. windows, water, holograms, etc...

SMM011

42

Example creating an orange plastic ball

shape = new ShapeDrawable( new Sphere(new Vec3fReference(0f, 0f, 0f), 1f)); geode = new Geode(); Orange colour stateset = new StateSet(); White specularity material = new Material(); Make it a bit harder material.setDiffuse(MATERIALFace.FRONT_AND_BACK, new Vec4fReference(1.0f, 0.5f, 0.1f, 1f)); material.setSpecular(MATERIALFace.FRONT_AND_BACK, new Vec4fReference(1.0f, 1.0f, 1.0f, 1f)); material.setShininess(MATERIALFace.FRONT_AND_BACK, 63f);
SMM011 43

Example creating an orange plastic ball

stateset.setAttribute(material); geode.setStateSet(stateset); geode.addDrawable(shape); ...
Associate material with the stateset

Apply the stateset to the geode with the sphere object

SMM011

44

Example a window
// you know this... shape = new ShapeDrawable( new Box(new Vec3fReference(-1f, -1f, 0f), 1f, 0.2f, 2f)); geode = new Geode(); stateset = new StateSet(); material = new Material(); // set the diffuse colour component to a lightblue nuance material.setDiffuse(MATERIALFace.FRONT_AND_BACK, new Vec4fReference(0.4f, 0.8f, 1f, 1f));
SMM011 45

Example a window

You need to enable blending to get transparency

stateset.setMode(GL.GL_BLEND, STATEATTRIBUTEValues.ON_Val); stateset.setRenderingHint( STATESETRenderingHint.TRANSPARENT_BIN_Val); material.setTransparency( MATERIALFace.FRONT_AND_BACK, 0.6f); The higher the number
the more transparency
SMM011 46

Set a rendering hint to use transparent bin

Example a window
// set properties (you know this already ) stateset.setAttribute(material); geode.setStateSet(stateset); geode.addDrawable(shape); root.addChild(geode); Transparency is easy (from an API perspective), just remember to enable the GL_BLEND mode
SMM011 47

Example demo of Looks.java

SMM011

48

Looks

Textures

SMM011

49

Introduction to Textures
Why do we need textures?
Difficult and expensive to model everything with polygons E.g. wooden surfaces, wallpapers, labels, faces, etc... Bumpmapping to simulate e.g. the texture of an orange Image maps are often cheaper in terms of computation

SMM011

50

Textures in OSG
The Texture class
Encapsulates OpenGLs texture functionality Texture1D/2D/3D subclasses for 1D/2D/3D Example Texture2D Y

X
SMM011 51

Texture coordinates
ShapeDrawables have texture coordinates defined
I.e. create the shape and just apply the texture to it

For a primitive GL rectangle, its also very simple

An example follows...

SMM011

52

Texture coordinates
// a rectangle

0 Vec2Array texcoords = new Vec2Array(); texcoords.push_back(new Vec2f(0.00f, 0.00f)); texcoords.push_back(new Vec2f(1.00f, 0.00f)); texcoords.push_back(new Vec2f(1.00f, 1.00f)); texcoords.push_back(new Vec2f(0.00f, 1.00f)); bbGeometry.setTexCoordArray(0, texcoords);
SMM011 53

Questions? Break...

SMM011

54

Agenda
Callbacks Animation Kinematics Morphing

SMM011

55

Callbacks

SMM011

56

Introduction to Callbacks
A callback is a function associated with an event
When the event occurs, the callback is invoked Developer registers callbacks, which are then automatically invoked by the system as needed

Callbacks exist outside of graphical programming

Typically used in client-server systems

SMM011

57

Callbacks in OSG
Callbacks are user-defined functions executed upon tree traversal (e.g. when updating, drawing or culling)
Can associate a callback with a certain node Upon traversal, every node with a callback gets it executed

SMM011

58

Callbacks in OSG
Remember this code from the event loop?
viewer.sync(); viewer.update(); viewer.frame();

Invokes any update callbacks for nodes in the tree

Suitable place for animating an object

SMM011

59

Callbacks in OSG
Why not do it like this?
viewer.sync(); viewer.update(); ... put animation code in here ... viewer.frame();

The effect will be the same, but callbacks provide a better interface (simpler, cleaner, less cluttered, easier to maintain) Callbacks may increase performance on multithreaded systems
Callbacks code can execute in parallel
SMM011 60

Callbacks in OSG
In the Node class
setCullCallback(...) setEventCallback(...) setUpdateCallback()

NodeCallback, the base class for callbacks

The callback function is named operatorMethod(Node, NodeVisitor) Override this function with your own code
SMM011 61

Callbacks in OSG
A callback can access user data via
node.setUserData() node.getUserData()

The user data can be used to store node-specific information, such as the rotation of a gun turret User data should extend the Referenced class
(Reference counted class for garbage collection)

SMM011

62

Example adding a callback to a node

public class MyNodeCallback extends NodeCallback { public void operatorMethod(Node node, NodeVisitor nv) { ... Put your callback } code in this function } ... node.setUpdateCallback(new MyNodeCallback());

Applies the callback to the specified node

SMM011 63

Animation

SMM011

64

What is animation?
A motion picture made by photographing successive positions of inanimate objects (as puppets or mechanical parts)
...from the Merriam-Webster dictionary.

I.e. changing an objects position over time

SMM011

65

Cartoon vs. Computer Animation

Cartoon/computer animation has common features
Both work on a frame per frame basis Each frame holds a snapshot of the scene In the next frame, the scene has changed slightly The result? The viewer gets the impression of movement

SMM011

66

Cartoon vs. Computer Animation

Framerate, number of frames per second (fps)
E.g. 60 fps in computer games, smooth scrolling/updates Film projection, 24 fps, enough to trick the viewer

Quality of animations
Some cartoons look really good, some others dont Why? Manual animation by hand drawing is expensive! 24 fps, 90 minute movie, results in 129600 frames One way to make it cheaper is to reduce the number of frames via the framerate Some low budget TV cartoons use e.g. 12 or 6 fps Or, use a computer to do most of the work
SMM011 67

Keyframe Animation
Keyframe
A frame where objects are Positioned Oriented Scaled ...in a predefined way Based on time (normally)

00:00:00

00:00:30

SMM011

68

Keyframe Animation
Interpolating in between keyframes
You dont want to specify every single frame (Like we did earlier) Easier to set-up keyframes Let the computer interpolate

Comparison with cartoon animations

Some hand animators also work like this Artists draw the important keyframes Animators draws the frames in between a.k.a. inbetweening
SMM011 69

The AnimationPath in OSG

Defines a path by which an object should move
Control points at specific times (seconds, real-world clock) Position Rotation Scaling Interpolates the frames in between the keyframes Can also retrieve points at an arbitrary time, if needed

SMM011

70

The AnimationPath in OSG

Applied via e.g. an AnimationPathCallback
transform.setUpdateCallback() Called at the event-loops viewer.update()

Can also be used to record the Viewers motion

SMM011

71

Animation Path an example

time, (xt, yt, zt) 10s, (10,20,30)

30s, (-5,10,32)

SMM011

72

Animation Path attitudes

time, (xt, yt, zt), attitude

Note that rotations are interpolated in between keyframes! What does this mean?
SMM011 73

Animation Path
Loop/repeat mode
Looping Repeat forever No loop Just play once Swinging Play once, then play backwards, then repeat
SMM011 74

Example moving in a square

AnimationPath ap = new AnimationPath(); // add positions for given times ap.insert(0.0, new ANIMATIONPATHControlPoint( new Vec3dReference(40,40,0))); ap.insert(2.0, new ANIMATIONPATHControlPoint( new Vec3dReference(-40,40,0))); ap.insert(4.0, new ANIMATIONPATHControlPoint( new Vec3dReference(-40,-40,0))); ap.insert(6.0, new ANIMATIONPATHControlPoint( new Vec3dReference(40,-40,0))); ap.insert(8.0, new ANIMATIONPATHControlPoint( new Vec3dReference(40,40,0))); ap.setLoopMode(ANIMATIONPATHLoopMode.LOOP);
SMM011

For loops, make sure start/end is identical

75

Example penguin moving in a square

PositionAttitudeTransform xform = new PositionAttitudeTransform(); xform.setUpdateCallback( new AnimationPathCallback(ap));

We can only apply this to a transform!

Node node = osgDBNamespace.readNodeFile("penguin.obj"); xform.addChild(node); root.addChild(xform);

SMM011

76

Example demonstration
AnimDemo.java
Moves in a square

SMM011

77

Anim Demo

Example moving and rotating

Quat q = new Quat(); q.setAxis(Vec3d.ZAxis); q.setAngle(Math.PI/2); ap.insert(15, new ANIMATIONPATHControlPoint( new Vec3dReference(10,20,30), q)); (Keep in mind rotations are interpolated in between...)
SMM011 78

Example demonstration
AnimDemo2.java
Moves and rotates

SMM011

79

Anim Demo2

AnimationPath time-related functions

getInterpolatedControlPoint(time)
Return an interpolated point for an arbitrary time

getFirstTime(), getLastTime(), getPeriod() getMatrix(time)

Return the transformation matrix for an arbitrary time

SMM011

80

Summary of creating Animations with A.P.

Animations are easy to implement in OSG
1. Create an AnimationPath 2. Add control points (keyframes) for specified times Positions, attitudes, scaling 3. Apply an update callback for the path Apply on a transform node Add geodes etc. to the transform

SMM011

81

Other ways of animating objects

Add code in event handlers that manipulate transform nodes
If the user can directly manipulate an object, the animation occurs as feedback to the users actions

Add your own update callback

Extend e.g. the NodeCallback or AnimationPathCallback Implement/override the operatorMethod() Compute the interpolated positions and rotations More work in terms of code, but also more flexibility
SMM011 82

Things to keep in mind when animating

Review the following event loop in pseudo-code
loop { animate(); draw(); }

What problems can this cause? Hint think about the performance of different computers...
loop { sync_time(); animate(); draw(); }

You need to keep track of real clock time, and do animation based on time, not on CPU performance!
SMM011 83

Animating the viewer

SMM011

84

Animating the Viewer

The Viewer itself has no update callback You can put your code in between update()/frame()
viewer.sync(); viewer.update(); ... viewer animation goes here ... viewer.frame();

And/or, use a MatrixManipulator...

SMM011

85

Matrix manipulators
The MatrixManipulator class
Abstract base class extending the standard GUIEventHandler Defines interface for controlling cameras in response to GUI events Subclasses (test with 1, 2, 3 in standard Viewer) TrackballManipulator The standard viewer mode DriveManipulator Left button accelerates, right breaks FlightManipulator Works like a flight simulator
SMM011 86

Matrix manipulators, more subclasses

AnimationPathManipulator
Follow an animation path

KeySwitchMatrixManipulator
Allows for easily changing among multiple manipulators E.g. make a certain key k switch to another manipulator

NodeTrackerManipulator
Make viewer track a node with/without rotations

TerrainManipulator
Make viewer follow the terrain (for rolling hills, etc)
SMM011 87

Matrix manipulators, how to apply

viewer.addCameraManipulator(...); Example
We only want our own manipulator, not any other

viewer.setUpViewer( ESCAPE_SETS_DONE_Val | HEAD_LIGHT_SOURCE_Val); viewer.addCameraManipulator( new FlightManipulator());

SMM011

88

Matrix Manip Demo

Kinematics a brief introduction

SMM011

89

Kinematics
Involves describing the position of parts based on joint angles
p = f()

Parts position (p) is a function of the angles () E.g. a robotic arm

3 angles we can specify, 3 degrees of freedom
SMM011 90

Inverse kinematics
In kinematics we study
p = f()

while in inverse kinematics, we study

= g(p)

I.e. based on a desired position of the object in the scene, what are the angles () to achieve it? E.g. a robotic arm
How to make the hand catch an object What angles should the joints be at May be none, one, or a set of solutions!
SMM011 91

Summary of kinematics
Its good to know the appropriate terms
Kinematics, p = f(), compute part position based on angles Inverse kinematics, = g(p), get angles for desired position

You may run into problems like these

How to make an arm reach for a certain object? What constraints do you need? These also become part of the equations E.g. an elbow, cannot bend it too far Scenegraphs generally help you with the basic kinematics
SMM011 92

Morphing

SMM011

93

What is Morphing?
Extend the idea of animation to include vertices Change the shape of an object
Define certain shapes for different keyframes Interpolate in between the keyframes Produces a gradual shift of an objects shape

Some examples
Changing the face of a human into something else Turning a floor into the shape of a human being
SMM011 94

Morphing a trivial example in 2D

SMM011

95

Morphing a non-trivial example in 2D

(A) (B)

Number of vertices differ for the shapes

Which vertex in A corresponds to which vertex in B? How to add/eliminate vertices during interpolation?
SMM011 96

Morphing, one more example

When the number of vertices are equal between two keyframes, morphing is a bit simpler to implement
But may still be non-trivial Consider the following example 0 1 2 4 3
SMM011

3 4

0
97

Morphing, which interpolation is correct?

1 2

3 4

3
SMM011

1
98

Morphing, which interpolation is correct?

Both can be correct, depending on what you want Its not just coding, you need to become good animators also!
The animator needs to decide how morphing should be handled, what effects are desired, etc. Linear morphing based on vertex identities Morphing using the closest vertices

SMM011

99

Pseudo-code for linear morphing

For each vertex, interpolation is computed according to
X = Xstart + frame * (Xend-Xstart)/numframes; Y = Ystart + frame * (Yend-Ystart)/numframes; Z = Zstart + frame * (Zend-Zstart)/numframes;

Normals recalculated per face or per vertex

Flat shading requires only face normals easy to compute Some shading methods may require recalculated vertex normals This may be very slow
SMM011 100

Pseudo-code for linear morphing

X = Xstart; Xdelta = (Xend-Xstart)/numframes; for (frame=0; frame<numframes; frame++) { draw object; for (all vertices in object) { X += Xdelta; } for (all normals in object) { recalculate normal; } }
SMM011 101

Example in OSG not this time!

Morphing is left as an exercise for the reader
OSG does not provide specific morphing functionality So, you need to implement it from scratch, more or less

Some hints and ideas

Linear morphing is probably the easiest to start with Interpolate the vertex positions between keyframes You may need to interpolate the normals as well

SMM011

102

Summary

SMM011

103

Summary
Introduction
We often want our virtual world to look like the real world

Modeling objects
Introduction to MilkShape and 3D modeling programs Loading the creations as nodes into OSG

Lightsources
How to illuminate a scene and alter its properties

Materials
Basic GL parameters for changing the look of objects

Textures
An introduction on how to use textures within OSG
SMM011 104

Summary
Callbacks
Definition of callbacks, how to implement them in OSG

Animation
Basics of animation, frames and keyframes Computer and hand-drawn animation, similarities and differences Animating objects with OSG functions or manually

Kinematics
A brief introduction to the area Applicable in e.g. robotics

Morphing
Idea behind morphing, some examples on when to use it What to think about, pseudo-code for linear morphing
SMM011 105

Questions?

SMM011

106