SMM011 1

OpenSceneGraph – Tutorial 2Realism and Animation

Mikael DruggeVirtual Environments II

Spring 2006

Based on material from http://www.openscenegraph.org/

SMM011 2

Agenda

• Realism• Loading models• MilkShape• Lightsources• StateSets• Materials• Textures

SMM011 3

Introduction

SMM011 4

What makes the difference...?

SMM011 5

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 6

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);

What’s this?

SMM011 7

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 8

MilkShape

SMM011 9

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 10

Introduction to MilkShape 3D

• Why have we chosen to use MilkShape?– It is fairly intuitive to use and learn– It’s powerful enough for this course– Handles a lot of different formats– Allows for 30-day free trial

SMM011 11

Example screenshot of MilkShape

SMM011 12

The coordinate system in MilkShape

X

Y Y

Z

Z

X

SMM011 13

Demo of MilkShape!

• Learning by doing, so let’s create something...

SMM011 14

Demo of MilkShape!

• Let’s see the result in OSG...

LoadingObjects

SMM011 15

Exporting

• Autodesk 3DS• LightWave 6.5x LWO

– Flattens all edges• Wavefront OBJ

– Materials in an extra MTL file

• 3DS or LWO recommended

SMM011 16

Loading models into OSG

SMM011 17

Remember this? Plugins...OSG

ScenegraphRendering elements

Tree/DAG nodes OSGDBDatabase loading

Plug-In management

OSGTextHandles text,

fonts, ...

Plug-Ins

OSGUtilTraversers

Enhancements

OSGSimSimulation (skybox,lights, time-of-day)

OSGParticleSpecial effects(fire, smoke...)

JPGPNGGIF...

3DSOSGLWO

...

import openscenegraph.osgDB.osgDBNamespace;

SMM011 18

Loading objects – code example

import openscenegraph.osgDB.osgDBNamespace;

Node node = osgDBNamespace.readNodeFile(“somefile.lwo”);

scene.addChild(node);

This will load themodel into a Node

Then just handle itlike any other node

SMM011 19

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 20

Lightsources

SMM011 21

Lights and Lightsources

• LightSource– Extends the Group node

• addChild() still possible– Contains one Light

• setLight()• getLight() LightSource

Light

SMM011 22

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 23

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 24

The Light

• More spotlight functions– setSpotCutoff(distance)– setSpotExponent(exp)– (Not much documentation about

these two functions – experiment!)

SMM011 25

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 26

Example

Lighting

SMM011 27

Lightsources – example code

Light light1 = new Light();light1.setLightNum(0);

light1.setDiffuse(new Vec4fReference(1f,0f,1f, 1f));

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

Create a lightfor GL light #0

Purple light

Note this!

SMM011 28

Lightsources – example code

// create lightsource and set its lightLightSource ls = new LightSource();ls.setLight(light1);

// turn on the lightsourcels.setLocalStateSetModes(STATEATTRIBUTEValues.ON_Val);

SMM011 29

Lightsources – example code

// create a “stateset” for the root node StateSet stateset = new StateSet();root.setStateSet(stateset);

// turn the lightsource on for this statesetls.setStateSetModes(stateset, STATEATTRIBUTEValues.ON_Val);

(We’ll come back to StateSetsin a few slides, so don’t worry)

SMM011 30

Lightsources – example code

// then add the lightsource to the sceneroot.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 31

Summary – how to add a lightsource

1. Create a new LightSource2. Create a new Light and associate with a GL light3. Adjust the light parameters; colours, attenuation...4. Make the lightsource use your light (via setLight())5. Create a stateset for the part of the scenegraph

tree that should be illuminated by the lightsource6. Turn on the lightsource in the stateset7. Add the lightsource to the scene

SMM011 32

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 33

StateSets

SMM011 34

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 35

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 applyfrom the root node and downwards.

(The entire scene will use thisstateset, meaning all of it will beilluminated by the lightsource inthe example a few slides ago.)

SMM011 36

Materials

SMM011 37

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 38

Materials in OSG

• The ”Material” class– Encapsulates OpenGL’s 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 39

The Material class – some functions

• setDiffuse(MATERIALFace, Vec4fReference)• setSpecular(...)• setAmbient(...)• setEmission(...)• setShininess(...)• setAlpha/setTransparency(...)

Vec4f(R, G, B, Alpha)

Front and/orBack faces

SMM011 40

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 – it’s better with a softer setting and a specularity in the same nuance as the diffuse colour

SMM011 41

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 – they’re expensive– E.g. to create a torch, make the flame emissive and place

a lightsource within it, also use an ambient component

SMM011 42

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 43

Example – creating an orange plastic ball

shape = new ShapeDrawable(new Sphere(new Vec3fReference(0f, 0f, 0f), 1f));

geode = new Geode();stateset = new StateSet();material = new Material();

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);

•Orange colour•White specularity•Make it a bit harder

SMM011 44

Example – creating an orange plastic ball

stateset.setAttribute(material);geode.setStateSet(stateset);geode.addDrawable(shape);...

Associate materialwith the stateset

Apply the statesetto the geode withthe sphere object

SMM011 45

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 nuancematerial.setDiffuse(MATERIALFace.FRONT_AND_BACK, new

Vec4fReference(0.4f, 0.8f, 1f, 1f));

SMM011 46

Example – a window

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

You need to enableblending to gettransparency

Set a rendering hintto use transparent bin

SMM011 47

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 48

Example – demo of Looks.java

Looks

SMM011 49

Textures

SMM011 50

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 51

Textures in OSG

• The ”Texture” class– Encapsulates OpenGL’s texture functionality– Texture1D/2D/3D – subclasses for 1D/2D/3D

X

YExample Texture2D

SMM011 52

Texture coordinates

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

• For a primitive GL rectangle, it’s also very simple– An example follows...

SMM011 53

Texture coordinates

// a rectangle

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);

0 1

3 2

SMM011 54

Questions?

Break...

SMM011 55

Agenda

• Callbacks• Animation• Kinematics• Morphing

SMM011 56

Callbacks

SMM011 57

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 58

Callbacks in OSG

• Callbacks are user-defined functions executed upontree 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 59

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 60

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 61

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 62

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 63

Example – adding a callback to a node

public class MyNodeCallback extends NodeCallback {public void operatorMethod(Node node, NodeVisitor nv) {

...}

}

...node.setUpdateCallback(new MyNodeCallback());

Put your callbackcode in this function

Applies the callbackto the specified node

SMM011 64

Animation

SMM011 65

What is animation?

• “A motion picture made by photographingsuccessive positions of inanimate objects(as puppets or mechanical parts)”...from the Merriam-Webster dictionary.

• I.e. changing an object’s position over time

SMM011 66

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 67

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 don’t– 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 68

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 69

Keyframe Animation

• Interpolating in between keyframes– You don’t 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 70

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 71

The AnimationPath in OSG

• Applied via e.g. an AnimationPathCallback– transform.setUpdateCallback()– Called at the event-loop’s viewer.update()

• Can also be used to record the Viewer’s motion

SMM011 72

Animation Path – an exampletime, (xt, yt, zt)

10s, (10,20,30)

30s, (-5,10,32)

SMM011 73

Animation Path – attitudes

time, (xt, yt, zt), attitude

Note that rotationsare interpolated inbetween keyframes!What does this mean?

SMM011 74

Animation Path

• Loop/repeat mode– Looping

• Repeat forever– No loop

• Just play once– Swinging

• Play once, thenplay backwards,then repeat

SMM011 75

Example – moving in a square

AnimationPath ap = new AnimationPath();

// add positions for given timesap.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);

For loops,make surestart/end isidentical

SMM011 76

Example – penguin moving in a square

PositionAttitudeTransform xform =new PositionAttitudeTransform();

xform.setUpdateCallback(new AnimationPathCallback(ap));

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

xform.addChild(node);root.addChild(xform);

We can onlyapply this toa transform!

SMM011 77

Example – demonstration

• AnimDemo.java– Moves in a square

AnimDemo

SMM011 78

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 areinterpolated in between...)

SMM011 79

Example – demonstration

• AnimDemo2.java– Moves and rotates

AnimDemo2

SMM011 80

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 81

Summary of creating Animations with A.P.

• Animations are easy to implement in OSG1. Create an AnimationPath2. Add control points (keyframes) for specified times

• Positions, attitudes, scaling3. Apply an update callback for the path

– Apply on a transform node– Add geodes etc. to the transform

SMM011 82

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 user’s 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 83

Things to keep in mind when animating

• Review the following event loop in pseudo-codeloop {

animate();draw();

}• What problems can this cause?• Hint – think about the performance of different computers...

loop {sync_time();animate();draw();

}

You need to keep trackof real clock time, and doanimation based on time,not on CPU performance!

SMM011 84

Animating the viewer

SMM011 85

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 86

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 87

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 88

Matrix manipulators, how to apply

• viewer.addCameraManipulator(...);

• Exampleviewer.setUpViewer(

ESCAPE_SETS_DONE_Val |HEAD_LIGHT_SOURCE_Val);

viewer.addCameraManipulator(new FlightManipulator());

MatrixManipDemo

We only want ourown manipulator,not any other

SMM011 89

Kinematics – a brief introduction

SMM011 90

Kinematics

• Involves describingthe position of partsbased 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 91

Inverse kinematics

• In kinematics we studyp = 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 92

Summary of kinematics

• It’s 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 93

Morphing

SMM011 94

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 object’s shape

• Some examples– Changing the face of a human into something else– Turning a floor into the shape of a human being

SMM011 95

Morphing – a trivial example in 2D

SMM011 96

Morphing – a non-trivial example in 2D

• Number of vertices differ for the shapes– Which vertex in A corresponds to which vertex in B?– How to add/eliminate vertices during interpolation?

(A) (B)

SMM011 97

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

34

2 3

4

01

SMM011 98

Morphing, which interpolation is correct?

0 1

2

34

2 3

4

01

SMM011 99

Morphing, which interpolation is correct?

• Both can be correct, depending on what you want• It’s 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 basedon vertex identities

Morphing using theclosest vertices

SMM011 100

Pseudo-code for linear morphing

• For each vertex, interpolation is computed according toX = 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 101

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 102

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 103

Summary

SMM011 104

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 105

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 106

Questions?