openscenegraph tutorial part two
DESCRIPTION
Beginner level openscenegraph tutorial part two.TRANSCRIPT
![Page 1: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/1.jpg)
SMM011 1
OpenSceneGraph – Tutorial 2Realism and Animation
Mikael DruggeVirtual Environments II
Spring 2006
Based on material from http://www.openscenegraph.org/
![Page 2: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/2.jpg)
SMM011 2
Agenda
• Realism• Loading models• MilkShape• Lightsources• StateSets• Materials• Textures
![Page 3: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/3.jpg)
SMM011 3
Introduction
![Page 4: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/4.jpg)
SMM011 4
What makes the difference...?
![Page 5: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/5.jpg)
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
![Page 6: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/6.jpg)
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?
![Page 7: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/7.jpg)
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
![Page 8: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/8.jpg)
SMM011 8
MilkShape
![Page 9: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/9.jpg)
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
![Page 10: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/10.jpg)
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
![Page 11: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/11.jpg)
SMM011 11
Example screenshot of MilkShape
![Page 12: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/12.jpg)
SMM011 12
The coordinate system in MilkShape
X
Y Y
Z
Z
X
![Page 13: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/13.jpg)
SMM011 13
Demo of MilkShape!
• Learning by doing, so let’s create something...
![Page 14: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/14.jpg)
SMM011 14
Demo of MilkShape!
• Let’s see the result in OSG...
LoadingObjects
![Page 15: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/15.jpg)
SMM011 15
Exporting
• Autodesk 3DS• LightWave 6.5x LWO
– Flattens all edges• Wavefront OBJ
– Materials in an extra MTL file
• 3DS or LWO recommended
![Page 16: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/16.jpg)
SMM011 16
Loading models into OSG
![Page 17: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/17.jpg)
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;
![Page 18: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/18.jpg)
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
![Page 19: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/19.jpg)
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
![Page 20: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/20.jpg)
SMM011 20
Lightsources
![Page 21: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/21.jpg)
SMM011 21
Lights and Lightsources
• LightSource– Extends the Group node
• addChild() still possible– Contains one Light
• setLight()• getLight() LightSource
Light
![Page 22: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/22.jpg)
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
![Page 23: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/23.jpg)
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
![Page 24: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/24.jpg)
SMM011 24
The Light
• More spotlight functions– setSpotCutoff(distance)– setSpotExponent(exp)– (Not much documentation about
these two functions – experiment!)
![Page 25: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/25.jpg)
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
![Page 26: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/26.jpg)
SMM011 26
Example
Lighting
![Page 27: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/27.jpg)
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!
![Page 28: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/28.jpg)
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);
![Page 29: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/29.jpg)
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)
![Page 30: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/30.jpg)
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...
![Page 31: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/31.jpg)
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
![Page 32: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/32.jpg)
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...
![Page 33: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/33.jpg)
SMM011 33
StateSets
![Page 34: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/34.jpg)
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
![Page 35: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/35.jpg)
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.)
![Page 36: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/36.jpg)
SMM011 36
Materials
![Page 37: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/37.jpg)
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
![Page 38: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/38.jpg)
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);
![Page 39: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/39.jpg)
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
![Page 40: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/40.jpg)
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
![Page 41: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/41.jpg)
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
![Page 42: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/42.jpg)
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...
![Page 43: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/43.jpg)
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
![Page 44: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/44.jpg)
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
![Page 45: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/45.jpg)
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));
![Page 46: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/46.jpg)
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
![Page 47: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/47.jpg)
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
![Page 48: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/48.jpg)
SMM011 48
Example – demo of Looks.java
Looks
![Page 49: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/49.jpg)
SMM011 49
Textures
![Page 50: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/50.jpg)
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
![Page 51: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/51.jpg)
SMM011 51
Textures in OSG
• The ”Texture” class– Encapsulates OpenGL’s texture functionality– Texture1D/2D/3D – subclasses for 1D/2D/3D
X
YExample Texture2D
![Page 52: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/52.jpg)
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...
![Page 53: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/53.jpg)
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
![Page 54: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/54.jpg)
SMM011 54
Questions?
Break...
![Page 55: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/55.jpg)
SMM011 55
Agenda
• Callbacks• Animation• Kinematics• Morphing
![Page 56: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/56.jpg)
SMM011 56
Callbacks
![Page 57: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/57.jpg)
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
![Page 58: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/58.jpg)
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
![Page 59: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/59.jpg)
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
![Page 60: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/60.jpg)
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
![Page 61: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/61.jpg)
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
![Page 62: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/62.jpg)
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)
![Page 63: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/63.jpg)
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
![Page 64: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/64.jpg)
SMM011 64
Animation
![Page 65: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/65.jpg)
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
![Page 66: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/66.jpg)
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
![Page 67: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/67.jpg)
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 ☺
![Page 68: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/68.jpg)
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
![Page 69: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/69.jpg)
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”
![Page 70: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/70.jpg)
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
![Page 71: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/71.jpg)
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
![Page 72: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/72.jpg)
SMM011 72
Animation Path – an exampletime, (xt, yt, zt)
10s, (10,20,30)
30s, (-5,10,32)
![Page 73: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/73.jpg)
SMM011 73
Animation Path – attitudes
time, (xt, yt, zt), attitude
Note that rotationsare interpolated inbetween keyframes!What does this mean?
![Page 74: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/74.jpg)
SMM011 74
Animation Path
• Loop/repeat mode– Looping
• Repeat forever– No loop
• Just play once– Swinging
• Play once, thenplay backwards,then repeat
![Page 75: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/75.jpg)
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
![Page 76: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/76.jpg)
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!
![Page 77: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/77.jpg)
SMM011 77
Example – demonstration
• AnimDemo.java– Moves in a square
AnimDemo
![Page 78: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/78.jpg)
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...)
![Page 79: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/79.jpg)
SMM011 79
Example – demonstration
• AnimDemo2.java– Moves and rotates
AnimDemo2
![Page 80: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/80.jpg)
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
![Page 81: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/81.jpg)
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
![Page 82: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/82.jpg)
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
![Page 83: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/83.jpg)
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!
![Page 84: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/84.jpg)
SMM011 84
Animating the viewer
![Page 85: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/85.jpg)
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...
![Page 86: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/86.jpg)
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
![Page 87: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/87.jpg)
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)
![Page 88: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/88.jpg)
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
![Page 89: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/89.jpg)
SMM011 89
Kinematics – a brief introduction
![Page 90: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/90.jpg)
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
![Page 91: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/91.jpg)
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!
![Page 92: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/92.jpg)
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
![Page 93: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/93.jpg)
SMM011 93
Morphing
![Page 94: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/94.jpg)
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
![Page 95: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/95.jpg)
SMM011 95
Morphing – a trivial example in 2D
![Page 96: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/96.jpg)
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)
![Page 97: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/97.jpg)
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
![Page 98: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/98.jpg)
SMM011 98
Morphing, which interpolation is correct?
0 1
2
34
2 3
4
01
![Page 99: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/99.jpg)
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
![Page 100: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/100.jpg)
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
![Page 101: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/101.jpg)
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;
}}
![Page 102: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/102.jpg)
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
![Page 103: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/103.jpg)
SMM011 103
Summary
![Page 104: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/104.jpg)
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
![Page 105: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/105.jpg)
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
![Page 106: Openscenegraph Tutorial Part Two](https://reader031.vdocuments.net/reader031/viewer/2022013122/55cf9aae550346d033a2ddf2/html5/thumbnails/106.jpg)
SMM011 106
Questions?