Jeff Parker, 2013 Thanks to Prof. Okan Arikan, UT Austin Ed Angel, UNM

Slides:



Advertisements
Similar presentations
Links and Joints.
Advertisements

Animation Following “Advanced Animation and Rendering Techniques” (chapter 15+16) By Agata Przybyszewska.
Animation. 12 Principles Of Animation (1)Squash and Stretch (2)Anticipation (3)Staging (4)Straight Ahead Action and Pose to Pose (5)Follow Through and.
3D Graphics for Game Programming (J. Han) Chapter XI Character Animation.
Forward and Inverse Kinematics CSE 3541 Matt Boggus.
CSCE 641: Forward kinematics and inverse kinematics Jinxiang Chai.
1Notes  Assignment 0 marks should be ready by tonight (hand back in class on Monday)
Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling.
Graphics Korea University Computer Animation Computer Graphics.
Hierarchical Modeling I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico.
CSCE 641: Forward kinematics and inverse kinematics Jinxiang Chai.
Kinematics. ILE5030 Computer Animation and Special Effects2 Kinematics The branch of mechanics concerned with the motions of objects without regard to.
Hierarchical Modeling II Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico.
CSCE 689: Forward Kinematics and Inverse Kinematics
Animation. Outline  Key frame animation  Hierarchical animation  Inverse kinematics.
Animation CS 551 / 651 Kinematics Lecture 09 Kinematics Sarcos Humanoid.
2D Transformations. World Coordinates Translate Rotate Scale Viewport Transforms Hierarchical Model Transforms Putting it all together.
Hierarchical Transformations and Models CSE 3541 Matt Boggus.
An Introduction to Robot Kinematics
University of Texas at Austin CS 378 – Game Technology Don Fussell CS 378: Computer Game Technology 3D Engines and Scene Graphs Spring 2012.
Hierarchical Transformations Hierarchical Models Scene Graphs
05/09/02(c) 2002 University of Wisconsin Last Time Global illumination algorithms Grades so far.
Advanced Graphics (and Animation) Spring 2002
Hierarchy, Modeling, and Scene Graphs Angel: Chapter 10 OpenGL Programming and Reference Guides, other sources. ppt from Angel, AW, etc. CSCI 6360/4360.
Objectives Review some advanced topics, including Review some advanced topics, including Chapter 8: Implementation Chapter 8: Implementation Chapter 9:
Computer Animation Rick Parent Computer Animation Algorithms and Techniques Kinematic Linkages.
Chapter 2 Robot Kinematics: Position Analysis
CSC418 Computer Graphics n Animation Principles n Keyframe Animation.
Demetriou/Loizidou – ACSC330 – Chapter 9 Hierarchical and Object-Oriented Modeling Dr. Giorgos A. Demetriou Dr. Stephania Loizidou Himona Computer Science.
Computer Animation Rick Parent Computer Animation Algorithms and Techniques Kinematic Linkages.
Computer Graphics 2 In the name of God. Outline Introduction Animation The most important senior groups Animation techniques Summary Walking, running,…examples.
Week 4 Lecture 1: Hierarchical Modeling Part 1 Based on Interactive Computer Graphics (Angel) - Chapter 10 1 Angel: Interactive Computer Graphics 5E ©
Hierarchical Modeling. Instance Transformation Start with a prototype object (a symbol) Each appearance of the object in the model is an instance – Must.
C O M P U T E R G R A P H I C S Guoying Zhao 1 / 40 C O M P U T E R G R A P H I C S Guoying Zhao 1 / 40 Computer Graphics Hierarchy I.
Jinxiang Chai Composite Transformations and Forward Kinematics 0.
CSCE 441: Computer Graphics Forward/Inverse kinematics Jinxiang Chai.
Animation CMSC 435/634 By Prof. Marc Olano. Keyframe Animation From hand drawn animation – Lead animator draws poses at key frames – Inbetweener draws.
CS-378: Game Technology Lecture #13: Animation Prof. Okan Arikan University of Texas, Austin Thanks to James O’Brien, Steve Chenney, Zoran Popovic, Jessica.
Graphics Graphics Korea University cgvr.korea.ac.kr 1 Computer Animation 고려대학교 컴퓨터 그래픽스 연구실.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
12 Principles Of Animation (1)Squash and Stretch (2)Anticipation (3)Staging (4)Straight Ahead Action and Pose to Pose (5)Follow Through and Overlapping.
Transformations Tutorial
Computer Graphics I, Fall 2008 Hierarchical Modeling II.
UNC Chapel Hill M. C. Lin Basics of Motion Generation let X i = position,orient. of O i at t k = t 0,  i END = false while (not END) do display O i, 
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
University of Texas at Austin CS384G - Computer Graphics Fall 2010 Don Fussell Hierarchical Modeling.
Hierarchical Modeling. 2 Objectives Build a tree-structured model of a humanoid figure. Examine various traversal strategies. Build a generalized tree-model.
Computer Graphics Chapter 12 Computer Animation.
1cs426-winter-2008 Notes. 2 Kinematics  The study of how things move  Usually boils down to describing the motion of articulated rigid figures Things.
CSCE 441: Computer Graphics Forward/Inverse kinematics Jinxiang Chai.
Animation Animation is about bringing things to life Technically: –Generate a sequence of images that, when played one after the other, make things move.
Computer Graphics I, Fall 2008 Hierarchical Modeling I.
CSCE 441: Computer Graphics: Hierarchical Models Jinxiang Chai.
CGDD 4003 Character Animation. The Skeletal Hierarchy (aka the “rig”) Based on the concept of bones Each bone has exactly one parent Each bone has a transform.
CSCE 441: Computer Graphics Forward/Inverse kinematics
Computer Graphics.
Character Animation Forward and Inverse Kinematics
Computer Animation cgvr.korea.ac.kr.
Hierarchical Modeling II
Computer Graphics - Hierarchical Models-
Hierarchical and Object-Oriented Graphics
Introduction to Computer Graphics with WebGL
CSCE 441: Computer Graphics Forward/Inverse kinematics
Hierarchical and Object-Oriented Graphics
Hierarchical Modeling I
(c) 2002 University of Wisconsin
Hierarchical Modeling & Constructive Solid Geometry
Dr. Chih-Kuo Yeh 葉智國 Computer Graphics Dr. Chih-Kuo Yeh 葉智國
Hierarchical Modeling
Chapter 4 . Trajectory planning and Inverse kinematics
Presentation transcript:

Jeff Parker, 2013 Thanks to Prof. Okan Arikan, UT Austin Ed Angel, UNM Animation Jeff Parker, 2013 Thanks to Prof. Okan Arikan, UT Austin Ed Angel, UNM

Outline Classical Animation History Computer Animation Kinematics 2 Outline Classical Animation History Computer Animation Kinematics Hierarchical Models Why? How? 2

Brief History of Animation 3 Brief History of Animation Shadow Puppets Persistence of Vision Flipbook Thaumotrope Phenakistiscope Zoetrope 3

Muybridge Eadweard Muybridge 4 Muybridge Eadweard Muybridge Settled bet for Leland Stanford on unsupported transit: Is there a point when all four of a horse's hooves are off the ground? 4

They do, but not as Stanford imagined 5 They do, but not as Stanford imagined 5

They do, but not as Stanford imagined 6 They do, but not as Stanford imagined 6

7 Muybridge Sallie Gardner at a Gallop 7

Muybridge Racetrack Camera University of Penn Archives 8 Muybridge Racetrack Camera University of Penn Archives The Photographer, Philip Glass http://www.youtube.com/watch?v=G5Afodfj4t8 8

Disney’s 12 Principles of Animation 9 Disney’s 12 Principles of Animation 1. Squash and stretch 2. Anticipation 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow through and overlapping action 6. Slow In and Slow Out 7. Arcs 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid Drawing 12. Appeal http://www.youtube.com/watch?NR=1&v=xqGL1ZLk3n8 9

Squash and stretch Exaggerate deformation for comedic effect. 10 Squash and stretch Exaggerate deformation for comedic effect. However, the volume should remain fixed. 10

Stretch and Squash Example 11 Stretch and Squash Example Bouncing Ball http://www.idleworm.com/how/anm/01b/bball.shtml 11

Slow In and Out Bouncing Ball 12 Slow In and Out Bouncing Ball http://www.siggraph.org/education/materials/HyperGraph/animation/character_animation/principles/bouncing_ball_example_of_slow_in_out.htm 12

13 Anticipation Direct the audience’s attention to where the action is about to happen 13

Follow through and overlapping Action 14 Follow through and overlapping Action Each action leads to the next Audience needs to see the resolution 50 seconds in http://www.youtube.com/watch?v=5V-QsiPiN_k 14

Secondary Motion A secondary action caused by the primary action 15 Secondary Motion A secondary action caused by the primary action Increases interest, if it does not detract from primary 15

Flour Sack Can we use these simple ideas to inject personality? 16 Flour Sack Can we use these simple ideas to inject personality? Common challenge: animate a half filled flour sack http://www.youtube.com/watch?v=FbG3UCY-9Xw 16

Traditional Animation Process 17 Traditional Animation Process Storyboard Sequence of drawings with descriptions Story-based description Voice recording Match animation to draft soundtrack Final soundtrack with music and sound effects done last Key frames Draw key frames as line drawings Fill in the intermediate images (Inbetweens) Painting Paint the drawings 17

18 Story Board 18

Key Frames (Keyframes) – draw key poses in a sequence 19 Key Frames (Keyframes) – draw key poses in a sequence Often a way of splitting up work: senior artist draws keyframees Novice draws the transitions - inbetweening 19

Putting it all together 20 Putting it all together Which effects you can recognize in Pixar's Luxo Jr? Graphical effects Taditional animation effects How does Lasseter convey personality? Emotions? How does he direct your attention? http://www.youtube.com/watch?v=Hrnz2pg3YPg 20

Kinematics Given a description of a system, describe how it moves 21 Kinematics Given a description of a system, describe how it moves Interested in positions of each component, not in the speed 21

Kinematics Kinematics Considers only motion given the disposition Dynamics Considers underlying forces Compute motion from initial conditions and physics Easy to do with particles

Particle Systems The genesis effect, from the Wrath of Kahn http://www.youtube.com/watch?v=NM1r37zIBOQ William T. Reeves, Particle Systems: A Technique for Modeling a Class of Fuzzy Objects, 1983

Sample Point system We often use differential equations to model behavior Our particles are corks bobbing in sea currents Differential equations define a vector field Our goal is to follow the path of a cork

Evaluating path The program pointDiffyQ.c compares two ways to follow paths Euler method - yellow Trapezoid method – blue The point this visualization tries to make is that the additional work for the trapazoid method gives a much more stable solution Higher order methods, such as Runge-Kutta, are not much more work, but are much more stable

Euler Update /* dx/dt: how x will change this step */ double xprime(double x, double y) { return (cy - y); } /* dy/dt: how y will change this step */ double yprime(double x, double y) return (x - cx); /* Use the slope at (x, y) to predict the next step */ /* This is simple, but not very good */ void eulerUpdate(double x, double y, double *newx, double *newy, double deltaT) *newx = x + deltaT*xprime(x, y); *newy = y + deltaT*yprime(x, y);

Trapezoid Update double xprime(double x, double y); double yprime(double x, double y); /* Average slope at (x, y) * and the slope at the endpoint Euler would predict */ /* This is better than simple Euler */ void trapUpdate(double x, double y, double *newx, double *newy, double deltaT) { double approxX = x + deltaT*xprime(x, y); double approxY = y + deltaT*yprime(x, y); *newx = x + deltaT*(xprime(x, y) + xprime(approxX, approxY))/2.0; *newy = y + deltaT*(yprime(x, y) + yprime(approxX, approxY))/2.0; }

Hierarchical Modeling 28 Hierarchical Modeling System needs to be complex to capture realistic movement You have over two dozen bones in each foot We will settle for less What is focus for figure running? Core Foot on the ground Look at a very small example Bicep and forearm 28

Forward Kinematics x2 y2 O2 y0 a2 y1 2 x1 a1 O1 1 x0 O0 This simple system is described by two angles Position is given by Length of arms a1 and a2 Angles θ1 and θ2 We can compute O1, O2 This is Forward Kinematics

Forward Kinematics

Inverse Kinematics Jeff Lew Given a complex system, figure out how to make it reach an object Typically we position a tool Pen for writing Soldering Gun Tongue for eating snowflakes Description is a vector of joint angles Or a sequence of such vectors Jeff Lew

Motion Capture One way to solve the problem of kinematics Record motion from instrumented live actor Tom Hanks in Polar Express

Study examples http://www.angryanimator.com/word/2010/11/26/tutorial-2-walk-cycle/ http://www.angryanimator.com/tut/pic/002_walkcycle/wlk03.swf

Preston Blair on Gait

Gait is key to character http://www.youtube.com/watch?v=RgMkD4t9ZmQ http://www.youtube.com/watch?v=ZisWjdjs-gM

Work Space vs. Configuration Space Object space: usually 3D Dimensionality: R3 for most things R2 for our extended linkage example Configuration space The space of possible object configurations Often much higher dimension than work space Degrees of Freedom The number of parameters that necessary and sufficient to define position in configuration

Return to our Example Work space: 2D Washer Configuration Space: 2D Torus (2π == 0) Ambiguity in the middle: two ways to reach a position Elbow up or down? Singularities at the boundaries of Work Space

Puma Robot Degrees of Freedom? Base Shoulder Elbow Wrist Work space http://www.youtube.com/watch?v=kzddvCo3RNs http://www.youtube.com/watch v=kEed8DVO21I Degrees of Freedom? Base Shoulder Elbow Wrist Work space

Solving Inverse Kinematics Given end effector position, compute required joint angles In simple case, analytic solution exists Use trig, geometry, and algebra to solve In larger examples, need to use Numerical Methods Why is the problem hard? Solutions may not exist Might not be unique In our simple case, solution is: Compute distance from tip to tail Position second arm for distance, Rotate first arm to position tip

x2 y2 (x,y) O2 2 y0 y1 a2 2 x1  a1 O1  1 x0 O0 Twin solutions: elbow up or down O0

Iterative Solutions Frequently it is not possible to find a closed form One technique is to use the multi-dimensional derivative The Jacobian is the derivative relative to each input Named after K. G. J. Jacobi If y is function of three inputs and one output

Compute Jacobian In our case, Jacobian is a square matrix since dimension of configuration space = dimension of the work space Not true for 3 segment planar linkage, or the Puma To move towards a goal, invert the Jacobian and use that as directive on where to start to move Make small change, recompute the Jacobian, and try again

Jacobian The Jacobian tells us how the output changes as we change the input We know current position of the effector, and know where we want it The difference is Delta Y (Y dot) We want to find Delta X (X dot) that gets us there Invert the Jacobian and solve for Delta X

Invert Jacobian We can invert non-singular square matrices There is also a pseudo inverse that can be used if the matrix is not square Inverting a 2x2 matrix is especially easy Jacobian is non-singular when we can divide by (ad-bc)

Compute Jacobian

Singularities Consider the case when the angles are both 0 Linkage lies on x axis Assume we wish to move endpoint towards origin Small changes in either angle move us in y direction Happens whenever linkage touches rim of workspace: when θ2 = 0 or π Below, we have used θ2 = 0 Determinate is 0: cannot invert Solution – Jiggle the linkage and try again

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Hierarchical Models Examine the limitations of linear modeling Symbols and instances Introduce hierarchical models Articulated models Robots Introduce Tree and DAG models Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Instance Transformation Start with a prototype object (a symbol) Each appearance of the object in the model is an instance Must scale, orient, position Defines instance transformation Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Symbol-Instance Table Can store a model by assigning a number to each symbol and storing the parameters for the instance transformation Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Relationships in Car Model Symbol-instance table does not show relationships between parts of model Consider model of car Chassis + 4 identical wheels Two symbols Rate of forward motion determined by rotational speed of wheels Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Structure Through Function Calls car(speed) { chassis() wheel(right_front); wheel(left_front); wheel(right_rear); wheel(left_rear); } Fails to show relationships well Look at problem using a graph Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree Graph in which each node (except the root) has exactly one parent node May have multiple children Leaf or terminal node: no children root node leaf node Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree Model of Car Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Robot Arm parts in their own coodinate systems robot arm Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Articulated Models Robot arm is an example of an articulated model Parts connected at joints Can specify state of model by giving all joint angles Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Relationships in Robot Arm Base rotates independently Single angle determines position Lower arm attached to base Its position depends on rotation of base Must also translate relative to base and rotate about connecting joint Upper arm attached to lower arm Its position depends on both base and lower arm Must translate relative to lower arm and rotate about joint connecting to lower arm Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Required Matrices Rotation of base: Rb Apply M = Rb to base Translate lower arm relative to base: Tlu Rotate lower arm around joint: Rlu Apply M = Rb Tlu Rlu to lower arm Translate upper arm relative to upper arm: Tuu Rotate upper arm around joint: Ruu Apply M = Rb Tlu Rlu Tuu Ruu to upper arm Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree Model of Robot Note code shows relationships between parts of model Can change “look” of parts easily without altering relationships Simple example of tree model Want a general node structure for nodes Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel Examples

Robot Arm // Parameters controlling the size of the Robot's arm var BASE_HEIGHT = 2.0; var BASE_WIDTH = 5.0; var LOWER_ARM_HEIGHT = 5.0; var LOWER_ARM_WIDTH = 0.5; var UPPER_ARM_HEIGHT = 5.0; var UPPER_ARM_WIDTH = 0.5; // Shader transformation matrices var modelViewMatrix, projectionMatrix; // Array of rotation angles (in degrees) for each rotation axis var Base = 0; var LowerArm = 1; var UpperArm = 2; var theta= [ 0, 0, 0]; var angle = 0;

Read Angles document.getElementById("slider1").onchange = function() { theta[0] = event.srcElement.value; }; document.getElementById("slider2").onchange = function() theta[1] = event.srcElement.value; document.getElementById("slider3").onchange = function() theta[2] = event.srcElement.value;

Draw Base function base() { var s = scale4(BASE_WIDTH, BASE_HEIGHT, BASE_WIDTH); var instanceMatrix = mult( translate( 0.0, 0.5 * BASE_HEIGHT, 0.0 ), s); var t = mult(modelViewMatrix, instanceMatrix); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t) ); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); }

Draw Base // Rotate takes angle and axis function base() { var s = scale4(BASE_WIDTH, BASE_HEIGHT, BASE_WIDTH); var instanceMatrix = mult( translate( 0.0, 0.5 * BASE_HEIGHT, 0.0 ), s); var t = mult(modelViewMatrix, instanceMatrix); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(t) ); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); } var render = function() { gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT ); modelViewMatrix = rotate(theta[Base], 0, 1, 0 ); base(); // Rotate takes angle and axis

Draw Lower Arm function lowerArm() { var s = scale4(LOWER_ARM_WIDTH, LOWER_ARM_HEIGHT, LOWER_ARM_WIDTH); var instanceMatrix = mult( translate( 0.0, 0.5 * LOWER_ARM_HEIGHT, 0.0 ), s); var t = mult(modelViewMatrix, instanceMatrix); gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(t) ); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); }

Draw Lower Arm var render = function() { gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT ); modelViewMatrix = rotate(theta[Base], 0, 1, 0 ); base(); modelViewMatrix = mult(modelViewMatrix, translate(0.0, BASE_HEIGHT, 0.0)); modelViewMatrix = mult(modelViewMatrix, rotate(theta[LowerArm], 0, 0, 1 )); lowerArm(); modelViewMatrix = mult(modelViewMatrix, translate(0.0, LOWER_ARM_HEIGHT, 0.0)); modelViewMatrix = mult(modelViewMatrix, rotate(theta[UpperArm], 0, 0, 1) ); upperArm(); requestAnimFrame(render); }

Possible Node Structure Code for drawing part or pointer to drawing function linked list of pointers to children matrix relating node to parent Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Generalizations Need to deal with multiple children How do we represent a more general tree? How do we traverse such a data structure? Animation How to use dynamically? Can we create and delete nodes during execution? Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Objectives Build a tree-structured model of a humanoid figure Examine various traversal strategies Build a generalized tree-model structure that is independent of the particular model Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Humanoid Figure Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree with Matrices Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Display and Traversal The position of the figure is determined by 11 joint angles (two for the head and one for each other part) Display of the tree requires a graph traversal Visit each node once Display function at each node that describes the part associated with the node, applying the correct transformation matrix for position and orientation Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Transformation Matrices There are 10 relevant matrices M positions and orients entire figure through the torso which is the root node Mh positions head with respect to torso Mlua, Mrua, Mlul, Mrul position arms and legs with respect to torso Mlla, Mrla, Mlll, Mrll position lower parts of limbs with respect to corresponding upper limbs Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Stack-based Traversal Set model-view matrix to M and draw torso Set model-view matrix to MMh and draw head For left-upper arm need MMlua and so on Rather than recomputing MMlua from scratch or using an inverse matrix, we can use the matrix stack to store M and other matrices as we traverse the tree Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Traversal Code save present model-view matrix figure() { glPushMatrix() torso(); glRotate3f(…); head(); glPopMatrix(); glPushMatrix(); glTranslate3f(…); left_upper_arm(); update model-view matrix for head recover original model-view matrix save it again update model-view matrix for left upper arm recover and save original model-view matrix again rest of code Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Analysis The code describes a particular tree and a particular traversal strategy Can we develop a more general approach? Note that the sample code does not include state changes, such as changes to colors May also want to use glPushAttrib and glPopAttrib to protect against unexpected state changes affecting later parts of the code Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

General Tree Data Structure Need a data structure to represent tree and an algorithm to traverse the tree We will use a left-child right sibling structure Uses linked lists Each node in data structure is two pointers Left: next node Right: linked list of children Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Left-Child Right-Sibling Tree Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Sibling Tree I cannot make sense of Angel's drawing Here is my version of this tree Left pointer is to first child Right pointer is to sibling Node contents are not shown Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree node Structure At each node we need to store Pointer to sibling Pointer to child Pointer to a function that draws the object represented by the node Transformation: Homogeneous coordinate matrix to multiply on the right of the current model-view matrix Represents changes going from parent to node Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Tree node Structure At each node we need to store Pointer to sibling Pointer to child Pointer to a function that draws the object represented by the node Transformation: Represents changes going from parent to node var node = { transform: transform, render: render, sibling: sibling, child: child, } Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Setup var torsoId = 0; var headId = 1; var head1Id = 1; var head2Id = 10; var leftUpperArmId = 2; var leftLowerArmId = 3; var rightUpperArmId = 4; ... var torsoHeight = 5.0; var torsoWidth = 1.0; var upperArmHeight = 3.0; var lowerArmHeight = 2.0; var upperArmWidth = 0.5;

Setup Nodes var numNodes = 10; var numAngles = 11; var angle = 0; var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 0]; var numVertices = 24; var stack = []; var figure = []; for( var i=0; i<numNodes; i++) figure[i] = createNode(null, null, null, null);

Draw Lower Arm var figure = []; for( var i=0; i<numNodes; i++) figure[i] = createNode(null, null, null, null); ... function createNode(transform, render, sibling, child) { var node = { transform: transform, render: render, sibling: sibling, child: child, } return node;

Draw Left Upper Arm function initNodes(Id) { var m = mat4(); ... case leftUpperArmId: m = translate(-(torsoWidth+upperArmWidth), 0.9*torsoHeight, 0.0); m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId); break;

Draw Left Upper Arm function initNodes(Id) { var m = mat4(); ... case leftUpperArmId: m = translate(-(torsoWidth+upperArmWidth), 0.9*torsoHeight, 0.0); m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId); break; // function createNode(transform, render, sibling, child)

Draw Lower Arm function initNodes(Id) case leftUpperArmId: ... figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId); break; function leftUpperArm() { instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) ); instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth) ); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4); }

Traverse function traverse(Id) { if (Id == null) return; stack.push(modelViewMatrix); modelViewMatrix = mult(modelViewMatrix, figure[Id].transform); figure[Id].render(); if (figure[Id].child != null) traverse(figure[Id].child); modelViewMatrix = stack.pop(); if (figure[Id].sibling != null) traverse(figure[Id].sibling); }

Traverse function traverse(Id) { if (Id == null) return; // Draw me stack.push(modelViewMatrix); modelViewMatrix = mult(modelViewMatrix, figure[Id].transform); figure[Id].render(); // Draw any children if (figure[Id].child != null) traverse(figure[Id].child); // Restore state and draw my siblings modelViewMatrix = stack.pop(); if (figure[Id].sibling != null) traverse(figure[Id].sibling); }

Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Notes We must save model-view matrix before multiplying it by node matrix Updated matrix applies to children of node but not to siblings which contain their own matrices The traversal program applies to any left-child right-sibling tree The particular tree is encoded in the definition of the individual nodes The order of traversal matters because of possible state changes in the functions Checkout Scene Graphs Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005

Keyframes To reduce the work of animating, define key frames 90 T = 0 1.5 2 3 θ1= 45 90 45 θ2= 0 15 30 θ3= 180 175 200 120 Keyframes To reduce the work of animating, define key frames Two dimensional array: time vs angle Each column has all the angles for one pose Each row holds the angles for a single joint As time advances, interpolate between key frames Metadata might include Time, so poses are not at fixed intervals Table above – gaps differ Movement between poses – linear? Slow in, slow out? 90

Resources 91 John Lasseter , Principles of Traditional Animation Applied to 3D Computer Animation 91

Weblinks 92 The photographer - Philip Glass http://www.youtube.com/watch?v=G5Afodfj4t8 12 Principles of Animation http://www.youtube.com/watch?NR=1&v=xqGL1ZLk3n8 Bouncing Ball http://www.idleworm.com/how/anm/01b/bball.shtml http://www.siggraph.org/education/materials/HyperGraph/animation/character_animation/principles/bouncing_ball_example_of_slow_in_out.htm Follow through and overlapping action http://www.youtube.com/watch?v=5V-QsiPiN_k Rick Parent's Animation book http://www.siggraph.org/education/materials/HyperGraph/animation/rick_parent/Outline.html Flour Sack http://www.youtube.com/watch?v=FbG3UCY-9Xw Luxo Jr http://www.youtube.com/watch?v=PvCWPZfK8pI The Genesis effect, from The Wrath of Kahn http://www.youtube.com/watch?v=NM1r37zIBOQ Walk Cycle http://www.angryanimator.com/word/2010/11/26/tutorial-2-walk-cycle/ http://www.angryanimator.com/tut/pic/002_walkcycle/wlk03.swf Wall-E http://www.youtube.com/watch?v=RgMkD4t9ZmQ http://www.youtube.com/watch?v=ZisWjdjs-gM Puma Robot http://www.youtube.com/watch?v=aHV5oY7viBM 92

Sumary Review steps Model Scripting – how the models will move 93 Sumary Review steps Model Scripting – how the models will move Inverse Kinematics, Dynamic Modeling Inbetweening to thread between steps in the script Rendering Image processing – post processing for effects Animation is a huge industry Computers are widely used Goal is to remove the tedium, while preserving room for artistry 93