hierarchical and object-oriented graphics

1

Hierarchical and Object-Oriented Graphics

• Construct complex models from a set of simple geometric objects

• Extend the use of transformations to include hierarchical relationships

• Useful for characterizing relationships among model parts in applications such as robotics and figure animations.

2

Symbols and Instances

• A non-hierarchical approach which models our world as a collection of symbols.

• Symbols can include geometric objects, fonts and other application-dependent graphical objects.

• Use the following instance transformation to place instances of each symbol in the model.

• The transformation specify the desired size, orientation and location of the symbol.

TRSM

3

Example

4

Hierarchical Models

• Relationships among model parts can be represented by a graph.

• A graph consists of :- A set of nodes or vertices.- A set of edges which connect pairs of nodes.

• A directed graph is a graph where each of its edges has a direction associated with it.

5

Trees and DAG: Trees

• A tree is a directed graph without closed paths or loops.

• Each tree has a single root node with outgoing edges only.

• Each non-root node has a parent node from which an edge enters.

• Each node has one or more child nodes to which edges are connected.

• A node without children is called a terminal node or leaf.

6

Trees and DAGS: Trees

root node

node

edge

leaf

7

Example

8

Trees and DAG: DAG

• Storing the same information in different nodes is inefficient.

• Use a single prototype for multiple instances of an object and replace the tree structure by the directed acyclic graph (DAG).

• Both trees and DAG are hierarchical methods of expressing relationships.

9

Example: A Robot Arm• The robot arm is modeled using three simple objects.

• The arm has 3 degrees of freedom represented by the 3 joint angles between components.

• Each joint angle determines how to position a component with respect to the others.

10

Robot Arm: Base

• The base of the robot arm can rotate about the y axis by the angle .

• The motion of any point p on the base can be described by applying the rotation matrix )(yR

11

Robot Arm: Lower Arm

• The lower arm is rotated about the z-axis by an angle , which is represented by

• It is then shifted to the top of the base by a distance , which is represented by .

• If the base has rotated, we must also rotate the lower arm using .

• The overall transformation is .

)(zR

1h)0,,0( 1hT

)(yR

)()0,,0()( 1 zy h RTR

12

Robot Arm: Upper Arm

• The upper arm is rotated about the z-axis by the angle , represented by the matrix .

• It is then translated by a matrix relative to the lower arm.

• The previous transformation is then applied to position the upper arm relative to the world frame.

• The overall transformation is

)(zR

)0,,0( 2hT

)()0,,0()()0,,0()( 21 zzy hh RTRTR

13

OpenGL Display Program

display(){

glRotatef(theta, 0.0, 1.0, 0.0);base();glTranslatef(0.0, h1, 0.0);glRotatef(phi, 0.0, 0.0, 1.0);lower_arm();glTranslatef(0.0, h2, 0.0);glRotatef(psi, 0.0, 0.0, 1.0);upper_arm();

}

14

Tree Representation

• The robot arm can be described by a tree data structure.

• The nodes represent the individual parts of the arm.

• The edges represent the relationships between the individual parts.

15

Information Stored in Tree Node

• A pointer to a function that draws the object.

• A homogeneous coordinate matrix that positions, scales and orients this node relative to its parent.

• Pointers to children of the node.

• Attributes (color, fill pattern, material properties) that applies to the node.

16

Trees and Traversal

• Perform a tree traversal to draw the represented figure.

• Two possible approaches- Depth-first- Breadth-first

• Two ways to implement the traversal function- Stack-based approach- Recursive approach

17

Example: A Robot Figure

• The torso is represented by the root node.

• Each individual part, represented by a tree node, is positioned relative to the torso by appropriate transformation matrices.

• The tree edges are labeled using these matrices.

18

Stack-Based Traversal

• The torso is drawn with the initial model-view matrix

• Trace the leftmost branch to the head node- Update the model-view matrix to - Draw the head

• Back up to the torso node.

• Trace the next branch of the tree.- Draw the left-upper arm with matrix- Draw the left-lower arm with matrix

• Draw the other parts in a similar way.

M

hMM

luaMM

llaluaMMM

19

OpenGL Implementation: Head

Figure()

{

glPushMatrix();

torso();

glTranslate

glRotate3

head();

glPopMatrix();

20

OpenGL Implementation: Left Arm

glPushMatrix();

glTranslate

glRotate3

Left_upper_arm();

glTranslate

glRotate3

Left_lower_arm();

glPopMatrix();

}

21

Push and Pop Operations

• glPushMatrix puts a copy of the current model-view matrix on the top of the model-view-matrix stack.

• glTranslate and glRotate together construct a transformation matrix to be concatenated with the initial model-view matrix.

• glPopMatrix recovers the original model-view matrix.

• glPushAttrib and glPopAttrib store and retrieve primitive attributes in a similar way as model-view matrices.

22

Recursive Approach

• Use a left-child right-sibling structure.

• All elements at the same level are linked left to right.

• The children are arranged as a second list from the leftmost child to the rightmost.

root

23

Example

24

FirstChild pointer: arrow that points downward

NextSibling pointer: arrow that goes left to right

25

Data Structure for Node

Typedef struct treenode

{

GLFloat m[16];

void (*f)();

struct treenode *sibling;

struct treenode *child;

} treenode;

26

Description of Data Structure Elements

• m is used to store a 4x4 homogeneous coordinate matrix by columns.

• f is a pointer to the drawing function.

• sibling is a pointer to the sibling node on the right.

• child is a pointer to the leftmost child.

27

OpenGL Code: Torso Node Initialization

glLoadIdentity();

glRotatef(theta[0], 0.0, 1.0, 0.0);

glGetFloatv(GL_MODELVIEW_MATRIX,torso_node.m);

Torso_node.f=torso;

Torso_node.sibling=NULL;

Torso_node.child= &head_node;

28

OpenGL Code: Upper Left Arm Node Initialization

glLoadIdentity();

glTranslatef(-(TORSO_RADIUS+UPPER_ARM_RADIUS),

0.9*TORSO_HEIGHT, 0.0);

glRotatef(theta[3], 1.0, 0.0, 0.0);

glGetFloatv(GL_MODELVIEW_MATRIX, lua_node.m);

Lua_node.f=left_upper_arm;

Lua_node.sibling= &rua_node;

Lua_node.child= &lla_node;

29

OpenGL Code: Tree Traversal

Void traverse (treenode *root)

{

if (root==NULL) return;

glPushMatrix();

glMultMatrixf(root->m);

root->f();

if (root->child!=NULL) traverse(root->child);

glPopMatrix();

if (root->sibling!=NULL) traverse(root->sibling);

}

30

Animation

• Objective: to model a pair of walking legs.

31

Animation: Walking Legs

• Rotation of the base will cause rotation of all the other parts.

• Rotation of other parts will only affect themselves and those lower parts attached to them.

32

Definition of Body Metrics

• The relative body metrics are defined in the file model.h.

• The main parts include the base and the two legs.

#define TORSO_HEIGHT 0.8

#define TORSO_WIDTH TORSO_HEIGHT*0.75

#define TORSO_DEPTH TORSO_WIDTH/3.0

#define BASE_HEIGHT TORSO_HEIGHT/4.0

#define BASE_WIDTH TORSO_WIDTH

#define BASE_DEPTH TORSO_DEPTH

33

Drawing the Base

void Draw_Base(void)

{

glPushMatrix() ;

glScalef(BASE_WIDTH,BASE_HEIGHT, BASE_DEPTH);

glColor3f(0.0,1.0,1.0) ;

glutWireCube(1.0) ;

glPopMatrix() ;

}

34

Drawing the Upper Leg

void Draw_Upper_Leg(void)

{

glPushMatrix() ;

glScalef(UP_LEG_JOINT_SIZE,UP_LEG_JOINT_SIZE,UP_LEG_JOINT_SIZE);

glColor3f(0.0,1.0,0.0) ;

glutWireSphere(1.0,8,8) ;

glPopMatrix() ;

glColor3f(0.0,0.0,1.0) ;

glTranslatef(0.0,- UP_LEG_HEIGHT * 0.75, 0.0) ;

glPushMatrix() ;

glScalef(UP_LEG_WIDTH,UP_LEG_HEIGHT,UP_LEG_WIDTH) ;

glutWireCube(1.0) ;

glPopMatrix() ;

}

35

Drawing the Whole Leg

void Draw_Leg(int side)

{

glPushMatrix() ;

glRotatef(walking_angles[side][3],1.0,0.0,0.0) ;

Draw_Upper_Leg() ;

glTranslatef(0.0,- UP_LEG_HEIGHT * 0.75,0.0) ;

glRotatef(walking_angles[side][4],1.0,0.0,0.0) ;

Draw_Lower_Leg() ;

glTranslatef(0.0,- LO_LEG_HEIGHT * 0.625, 0.0) ;

glRotatef(walking_angles[side][5],1.0,0.0,0.0) ;

Draw_Foot() ;

glPopMatrix() ;

}

36

Drawing the Complete Model

void Draw_Base_Legs(void)

{

glPushMatrix() ;

glTranslatef(0.0,base_move,0.0) ;

Draw_Base() ;

glTranslatef(0.0,-(BASE_HEIGHT),0.0) ;

glPushMatrix() ;

glTranslatef(TORSO_WIDTH * 0.33,0.0,0.0) ;

Draw_Leg(LEFT) ;

glPopMatrix() ;

glTranslatef(-TORSO_WIDTH * 0.33,0.0,0.0) ;

Draw_Leg(RIGHT) ;

glPopMatrix() ;

}

37

Modeling the Walking Motion

cosYverticallower_leg_

cosXverticalupper_leg_

vertical)lower_leg__vertical(upper_leg-LLntDisplaceme

38

Codes for Calculating Vertical Displacement

double find_base_move(double langle_up, double langle_lo, double rangle_up, double rangle_lo)

{

double result1, result2, first_result, second_result, radians_up, radians_lo;

radians_up = (PI*langle_up)/180.0 ;

radians_lo = PI*(langle_lo-langle_up)/180.0 ;

result1 = (UP_LEG_HEIGHT + 2*UP_LEG_JOINT_SIZE) * cos(radians_up);

result2 = (LO_LEG_HEIGHT+2*(LO_LEG_JOINT_SIZE+FOOT_JOINT_SIZE)

+FOOT_HEIGHT)* cos(radians_lo) ;

first_result = LEG_HEIGHT - (result1 + result2) ;

39

Codes for Calculating Vertical Displacement

radians_up = (PI*rangle_up)/180.0 ;

radians_lo = PI*(rangle_lo-rangle_up)/180.0 ;

result1 = (UP_LEG_HEIGHT + 2*UP_LEG_JOINT_SIZE) * cos(radians_up) ;

result2 = (LO_LEG_HEIGHT +2*(LO_LEG_JOINT_SIZE+FOOT_JOINT_SIZE)

+FOOT_HEIGHT)* cos(radians_lo) ;

second_result = LEG_HEIGHT - (result1 + result2) ;

if (first_result <= second_result)

return (- first_result) ;

else

return (- second_result) ;

}

40

Key-Frame Animation

• The more critical motions of the object is shown in a number of key frames.

• The remaining frames are filled in by interpolation (the inbetweening process)

• In the current example, inbetweening is automated by interpolating the joint angles between key frames.

41

Interpolation Between Key Frames

• Let the set of joint angles in key frame A and key frame B be

and respectively.

• If there are M frames between key frame A and B, let

• The set of joint angles in the m-th in-between frame is assigned as

),,,( 21 ANAA ),,,( 21 BNBB

MAnBn

n

),,,( 2211 NANAA mmm

42

Implementation of Key-Frame Animation switch (flag)

{

case 1 :

l_upleg_dif = 15 ;r_upleg_dif = 5 ;

l_loleg_dif = 15 ;r_loleg_dif = 5 ;

l_upleg_add = l_upleg_dif / FRAMES ;

r_upleg_add = r_upleg_dif / FRAMES ;

l_loleg_add = l_loleg_dif / FRAMES ;

r_loleg_add = r_loleg_dif / FRAMES ;

walking_angles[0][3] += l_upleg_add ;

walking_angles[1][3] += r_upleg_add ;

walking_angles[0][4] += l_loleg_add ;

walking_angles[1][4] += r_loleg_add ;

43

Implementation of Key-Frame Animation

base_move =find_base_move(walking_angles[0][3],

walking_angles[0][4], walking_angles[1][3],

walking_angles[1][4] ) ;

frames-- ;

if (frames == 0)

{ flag = 2 ; frames = FRAMES ;}

break ;

case 2:

44

Snapshots of Walking Sequence

45

Object-Oriented Approach

• Adopt an object-oriented approach to define graphical objects.

• In an object-oriented programming language, objects are defined as modules with which we build programs

• Each module includes- The data that define the properties of the module

(attributes).- The functions that manipulate these attributes

(methods).

• Messages are sent to objects to invoke a method.

46

A Cube Object

• Non object-oriented implementation

• Need external function to manipulate the variables in the data structure.

Typedef struct cube

{

float color[3];

float matrix[4][4];

}cube;

47

A Cube Object

• Object-oriented implementation

Class cube

{

float color[3];

float matrix[4][4];

public:

void render();

void translate (float x, float y, float z);

void rotate(float theta, float axis_x, floataxis_y, float axis_z);

}

48

A Cube Object

• The application code assumes that a cube instance “knows” how to perform action on itself.

Cube a;

a.rotate(45.0, 1.0, 0.0, 0.0);

a.translate (1.0, 2.0, 3.0);

a.render();

49

Other Examples: a Material Object

• Definition of the material class

• Creating an instance of the material class

Class material

{

float specular[3];

float shininess;

float diffuse[3];

float ambient[3];

}

Cube a;

Material b;

a.setMaterial(b);

50

Other examples: a light source object

• Definition of the light source class

Class light

{

boolean type;

boolean near;

float position[3];

float orientation[3];

float specular[3];

float diffuse[3];

float ambient[3];

}

51

Solid Modeling

How would you interpret the above object?

52

Solids

• Definition- A model which has a well-defined inside and

outside- For each point, we can determine whether the

point is inside, outside, or on the solid

• Purpose- Model more complicated shapes- Mass properties calculations

= Volume and Moment of Insertia- CAD/CAM manufacturing

53

Representations

• Constructive Solid Geometry (CSG)

• Spatial Partitioning representation- Cell Decomposition- Spatial-occupancy Enumeration- Quadtrees and Octrees- Binary Space Partitioning (BSP)

54

Constructive Solid Geometry (CSG ) Trees (1)

Data Structure = Binary tree• Nodes= Boolean Operations

- Union, Intersection, Difference• Nodes = Transformation

- To position and scale objects• Leaves = Primitives

- Blocks and wedges- Quadrics – spheres, cylinders, cones, paraboloids- Deformed solids

55

CSG Trees (2)

• Constructive solid geometry (CSG) operates on a set of solid geometric entities instead of surface primitives.

• Uses three operations: union, intersection, and set difference:- AB consists of all points in either A or B.- AB consists of all points in both A and B.- A-B consists of all points in A which are not in B.

56

CSG Trees (3)

57

CSG Trees (3)

• The algebraic expressions are stored and parsed using expression trees.- Internal nodes store operations.- Terminal nodes store operands.

• The CSG tree is evaluated by a post-order traversal.

58

CSG Trees (4)

- Example

Extracted from Foley et al.’s book

59

CSG Trees (5)- Example

CSG does not provide unique representation

Extracted from Foley et al.’s book

60

Spatial Partitioning Representation (SPR) – Cell Decomposition• Each cell-decomposition system defines a set of primitives

cells that are typically parameterized• “Gluing” them together

Extracted from Foley et al.’s book

61

SPR – Spatial-Occupancy Enumeration

• Special case of cell decomposition• Decomposed into identical cells arranged in a fixed, regular

grid

Extracted from Foley et al.’s book

62

SPR – Quadtrees and Octrees (2)

• A hierarchical variant of spatial-occupancy enumeration• Designed to address approach’s demanding storage

requirements• Use separating planes and lines parallel to the coordinate

axes.• For a quadtree, each parent node has four child nodes.• For an octree (derived from quadtrees), each parent node has

eight child nodes.

Extracted from Foley et al.’s book

63

SPR – Quadtrees and Octrees (3)

• Successive subdivision can be represented as a tree with partially full quadrants (P), full (F) and empty (E)

• No standard for assigning quadrant numbers (0-3)

Extracted from Foley et al.’s book

64

SPR – Quadtrees and Octrees (4)

• Octree is similar to the quandtree, except that its three dimensionals are recursively subdivided into octant.

Extracted from Foley et al.’s book

65

SPR – Quadtrees and Octrees (5)• Boolean set operations

Extracted from Foley et al.’s book

S T

TS TS

66

SPR – Binary Space-Partitioning (BSP) Trees (1)

• Recursively divide space into a pairs of subspaces, each separated by a plane of arbitrary orientation and position.

• Originally, used in determining visible surface in graphics

View point

67

SPR – Binary Space-Partitioning (BSP) Trees (2)• Rendering of a set of polygons using binary spatial-partition tree (BSP tree)

• Plane A separates polygons into two groups- B,C in front of A- D,E and F behind A.

• In the BSP tree- A is at the root.- B and C are in the left subtree.- D, E and F are in the right subtree.

68

SPR – Binary Space-Partitioning (BSP) Trees (3)

• Proceeding recursively- B is in front of C- D separates E and F

• In the 2 BSP sub-trees- B is the left child of C- E and F are the left and right of D respectively

69

SPR – Binary Space-Partitioning (BSP) Trees (4)

• Later to represent arbitrary polyhedra.• Each internal node is associated with a plane and has two

child pointers – one for each side • If the half-space on a side of the plane is subdivided further,

its child is the root of a subtree• If the half-space is homogenous, its child is a leaf,

representing a region either entirely inside or entirely outside, labeled as “in” or “out”

70

Comparison of Representations

• Accuracy- Spatial-partitioning – only an approximation- CSG – high

• Uniqueness- Octree and spatial-occupancy-enumeration – unique- CSG – not