Objectives Introduce simple data structures for building polygonal models -- Vertex lists and Edge lists Introduce simple data structures for building polygonal models -- Vertex lists and Edge lists OpenGL vertex arrays OpenGL vertex arrays Use transformations by an example of creating graphical (virtual) devices using OpenGL Use transformations by an example of creating graphical (virtual) devices using OpenGL Lead to reusable code that will be helpful later Lead to reusable code that will be helpful later CSC461: Lecture 17 Modeling and Virtual TrackBall

Representing a Mesh Consider a mesh Consider a mesh There are 8 nodes and 12 edges There are 8 nodes and 12 edges 5 interior polygons 5 interior polygons 6 interior (shared) edges 6 interior (shared) edges Each vertex has a location v i = (x i y i z i ) Each vertex has a location v i = (x i y i z i ) v1v1 v2v2 v7v7 v6v6 v8v8 v5v5 v4v4 v3v3 e1e1 e8e8 e3e3 e2e2 e 11 e6e6 e7e7 e 10 e5e5 e4e4 e9e9 e 12

Simple Representation List all polygons by their geometric locations List all polygons by their geometric locations Leads to OpenGL code such as Leads to OpenGL code such as glBegin(GL_POLYGON); glVertex3f(x1, y1, z1); glVertex3f(x6, y6, z6); glVertex3f(x7, y7, z7); glEnd(); Inefficient and unstructured Inefficient and unstructured Consider moving a vertex to a new locations Consider moving a vertex to a new locations

Inward and Outward Facing Polygons The order {v 1, v 6, v 7 } and {v 6, v 7, v 1 } are equivalent in that the same polygon will be rendered by OpenGL but the order {v 1, v 7, v 6 } is different The order {v 1, v 6, v 7 } and {v 6, v 7, v 1 } are equivalent in that the same polygon will be rendered by OpenGL but the order {v 1, v 7, v 6 } is different The first two describe outwardly facing polygons The first two describe outwardly facing polygons Use the right-hand rule = Use the right-hand rule = counter-clockwise encirclement of outward-pointing normal OpenGL treats inward and OpenGL treats inward and outward facing polygons differently

Geometry vs Topology Generally it is a good idea to look for data structures that separate the geometry from the topology Generally it is a good idea to look for data structures that separate the geometry from the topology Geometry: locations of the vertices Geometry: locations of the vertices Topology: organization of the vertices and edges Topology: organization of the vertices and edges Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first Topology holds even if geometry changes Topology holds even if geometry changes

Vertex Lists Put the geometry in an array Put the geometry in an array Use pointers from the vertices into this array Use pointers from the vertices into this array Introduce a polygon list Introduce a polygon list x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 P1 P2 P3 P4 P5 v1v7v6v1v7v6 v8v5v6v8v5v6 topology geometry

Shared Edges and Edge List Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice Can store mesh by edge list Can store mesh by edge list Edge List Edge List Note polygons are not represented v1v1 v2v2 v7v7 v6v6 v8v8 v5v5 v4v4 v3v3 e1e1 e8e8 e3e3 e2e2 e 11 e6e6 e7e7 e 10 e5e5 e4e4 e9e9 e 12 e1 e2 e3 e4 e5 e6 e7 e8 e9 x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 v1 v6

Drawing a polygon from a list of indices Draw a quadrilateral from a list of indices into the array vertices and use color corresponding to first index Draw a quadrilateral from a list of indices into the array vertices and use color corresponding to first index void polygon(int a, int b, int c, int d) { glBegin(GL_POLYGON); glColor3fv(colors[a]); glVertex3fv(vertices[a]); glVertex3fv(vertices[b]); glVertex3fv(vertices[c]); glVertex3fv(vertices[d]); glEnd(); } Modeling a Cube Model a color cube for rotating cube program Model a color cube for rotating cube program Define global arrays for vertices and colors Define global arrays for vertices and colors GLfloat vertices[][3] = {{-1.0,-1.0,-1.0}, { 1.0,-1.0,-1.0}, {{-1.0,-1.0,-1.0}, { 1.0,-1.0,-1.0}, { 1.0, 1.0,-1.0}, {-1.0, 1.0,-1.0}, { 1.0, 1.0,-1.0}, {-1.0, 1.0,-1.0}, {-1.0,-1.0, 1.0}, { 1.0,-1.0, 1.0}, {-1.0,-1.0, 1.0}, { 1.0,-1.0, 1.0}, { 1.0, 1.0, 1.0}, {-1.0, 1.0, 1.0}}; { 1.0, 1.0, 1.0}, {-1.0, 1.0, 1.0}}; GLfloat colors[][3] = {{0.0,0.0,0.0}, {1.0,0.0,0.0}, {1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0}, {1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}};

Draw cube from faces void colorcube( ) { polygon(0,3,2,1); polygon(2,3,7,6); polygon(2,3,7,6); polygon(0,4,7,3); polygon(0,4,7,3); polygon(1,2,6,5); polygon(1,2,6,5); polygon(4,5,6,7); polygon(4,5,6,7); polygon(0,1,5,4); polygon(0,1,5,4);} Note that vertices are ordered so that Note that vertices are ordered so that we obtain correct outward facing normals we obtain correct outward facing normals Efficiency Efficiency The weakness of our approach is that we are building the model in the application and must do many function calls to draw the cube The weakness of our approach is that we are building the model in the application and must do many function calls to draw the cube Drawing a cube by its faces in the most straight forward way requires Drawing a cube by its faces in the most straight forward way requires 6 glBegin, 6 glEnd 6 glBegin, 6 glEnd 6 glColor 6 glColor 24 glVertex 24 glVertex More if we use texture and lighting More if we use texture and lighting

Vertex Arrays OpenGL provides a facility called vertex arrays that allow us to store array data in the implementation OpenGL provides a facility called vertex arrays that allow us to store array data in the implementation Six types of arrays supported Six types of arrays supported Vertices Vertices Colors Colors Color indices Color indices Normals Normals Texture coordinates Texture coordinates Edge flags Edge flags We will need only colors and vertices We will need only colors and vertices Initialization -- Using the same color and vertex data, first we enable Initialization -- Using the same color and vertex data, first we enable glEnableClientState(GL_COLOR_ARRAY); glEnableClientState(GL_COLOR_ARRAY); glEnableClientState(GL_VERTEX_ARRAY); glEnableClientState(GL_VERTEX_ARRAY);

Using Arrays Identify location of arrays Identify location of arrays glVertexPointer(3, GL_FLOAT, 0, vertices); glColorPointer(3, GL_FLOAT, 0, colors); Map indices to faces Map indices to faces Form an array of face indices Form an array of face indices GLubyte cubeIndices[24] = { 0,3,2,1, 2,3,7,6, 0,4,7,3, 1,2,6,5, 4,5,6,7, 0,1,5,4}; Each successive four indices describe a face of the cube Each successive four indices describe a face of the cube 3d arrays stored as floats data contiguous data array

Drawing the cube Draw through glDrawElements which replaces all glVertex and glColor calls in the display callback Draw through glDrawElements which replaces all glVertex and glColor calls in the display callback for(i=0; i<6; i++) glDrawElements(GL_POLYGON, 4, GL_UNSIGNED_BYTE, &cubeIndices[4*i]); format of index data start of index data what to draw number of indices Method 1: Method 1: Method 2: Method 2: glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, cubeIndices); Draws cube with 1 function call!!

Example: Virtual Trackball Physical Trackball Physical Trackball The trackball is an “upside down” mouse The trackball is an “upside down” mouse If there is little friction between the ball and the rollers, we can give the ball a push and it will keep rolling yielding continuous changes If there is little friction between the ball and the rollers, we can give the ball a push and it will keep rolling yielding continuous changes Two possible modes of operation Two possible modes of operation Continuous pushing or tracking hand motion; and Spinning Continuous pushing or tracking hand motion; and Spinning A Trackball from a Mouse A Trackball from a Mouse Problem: we want to get the two behavior modes from a mouse Problem: we want to get the two behavior modes from a mouse We would also like the mouse to emulate a frictionless (ideal) trackball We would also like the mouse to emulate a frictionless (ideal) trackball Solve in two steps Solve in two steps Map trackball position to mouse position Map trackball position to mouse position Use GLUT to obtain the proper modes Use GLUT to obtain the proper modes

Trackball Frame origin at center of ball Projection of Trackball Position We can relate position on trackball to position on a normalized mouse pad by projecting orthogonally onto pad

Reversing Projection Because both the pad and the upper hemisphere of the ball are two-dimensional surfaces, we can reverse the projection Because both the pad and the upper hemisphere of the ball are two-dimensional surfaces, we can reverse the projection A point (x,z) on the mouse pad corresponds to the point (x,y,z) on the upper hemisphere where A point (x,z) on the mouse pad corresponds to the point (x,y,z) on the upper hemisphere where Computing Rotations Computing Rotations Suppose that we have two points that were obtained from the mouse. Suppose that we have two points that were obtained from the mouse. We can project them up to the hemisphere to points p 1 and p 2 We can project them up to the hemisphere to points p 1 and p 2 These points determine a great circle on the sphere These points determine a great circle on the sphere We can rotate from p 1 to p We can rotate from p 1 to p by finding the proper axis of rotation and the angle between the points by finding the proper axis of rotation and the angle between the points y = if r  |x|  0, r  |z|  0

Obtaining the angle The axis of rotation is given by the normal to the plane determined by the origin, p 1, and p 2 The axis of rotation is given by the normal to the plane determined by the origin, p 1, and p 2 The angle between p 1 The angle between p 1 and p 2 is given by If we move the mouse slowly or sample its position frequently, then  will be small and we can use the approximation If we move the mouse slowly or sample its position frequently, then  will be small and we can use the approximation n = p 1  p 1 | sin  | = sin 

Implementing with GLUT We will use the idle, motion, and mouse callbacks to implement the virtual trackball We will use the idle, motion, and mouse callbacks to implement the virtual trackball Define actions in terms of three booleans Define actions in terms of three booleans trackingMouse : if true update trackball position redrawContinue : if true, idle function posts a redisplay trackballMove : if true, update rotation matrix trackballMove : if true, update rotation matrix In this example, we use the virtual trackball to rotate the color cube we modeled earlier In this example, we use the virtual trackball to rotate the color cube we modeled earlier The code for the colorcube function is omitted because it is unchanged from the earlier examples The code for the colorcube function is omitted because it is unchanged from the earlier examples

Initialization #define bool int /* if system does not support bool type */ bool type */ #define false 0 #define true 1 #define M_PI /* if not in math.h */ int winWidth, winHeight; float angle = 0.0, axis[3], trans[3]; bool trackingMouse = false; bool redrawContinue = false; bool trackballMove = false; float lastPos[3] = {0.0, 0.0, 0.0}; int curx, cury; int startX, startY;

The Projection Step voidtrackball_ptov(int x, int y, int width, int height, float v[3]) { float d, a; float d, a; /* project x,y onto a hemisphere centered within width, height, note z is up here*/ /* project x,y onto a hemisphere centered within width, height, note z is up here*/ v[0] = (2.0*x - width) / width; v[0] = (2.0*x - width) / width; v[1] = (height - 2.0F*y) / height; v[1] = (height - 2.0F*y) / height; d = sqrt(v[0]*v[0] + v[1]*v[1]); d = sqrt(v[0]*v[0] + v[1]*v[1]); v[2] = cos((M_PI/2.0) * ((d < 1.0) ? d : 1.0)); v[2] = cos((M_PI/2.0) * ((d < 1.0) ? d : 1.0)); a = 1.0 / sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2]); a = 1.0 / sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2]); v[0] *= a; v[1] *= a; v[2] *= a; v[0] *= a; v[1] *= a; v[2] *= a;}

glutMotionFunc void mouseMotion(int x, int y) { float curPos[3], float curPos[3], dx, dy, dz; dx, dy, dz; // compute position on // compute position onhemisphere trackball_ptov(x, y, winWidth, trackball_ptov(x, y, winWidth, winHeight, curPos); if (trackingMouse) if (trackingMouse) { /* compute the change of /* compute the change of position on the hemisphere */ position on the hemisphere */ dx = curPos[0] - lastPos[0]; dx = curPos[0] - lastPos[0]; dy = curPos[1] - lastPos[1]; dy = curPos[1] - lastPos[1]; dz = curPos[2] - lastPos[2]; dz = curPos[2] - lastPos[2]; } if (dx || dy || dz) { if (dx || dy || dz) { // compute theta and cross product // compute theta and cross product angle = 90.0 * angle = 90.0 * sqrt(dx*dx + dy*dy + dz*dz); axis[0] = lastPos[1]*curPos[2] – axis[0] = lastPos[1]*curPos[2] – lastPos[2]*curPos[1]; lastPos[2]*curPos[1]; axis[1] = lastPos[2]*curPos[0] – axis[1] = lastPos[2]*curPos[0] – lastPos[0]*curPos[2]; lastPos[0]*curPos[2]; axis[2] = lastPos[0]*curPos[1] – axis[2] = lastPos[0]*curPos[1] – lastPos[1]*curPos[0]; lastPos[1]*curPos[0]; /* update position */ /* update position */ lastPos[0] = curPos[0]; lastPos[0] = curPos[0]; lastPos[1] = curPos[1]; lastPos[1] = curPos[1]; lastPos[2] = curPos[2]; lastPos[2] = curPos[2]; } } glutPostRedisplay(); glutPostRedisplay();}

Idle and Display Callbacks void spinCube() { if (redrawContinue) glutPostRedisplay(); if (redrawContinue) glutPostRedisplay();} void display() { glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT ); if (trackballMove) if (trackballMove) { glRotatef(angle, axis[0], axis[1], axis[2]); glRotatef(angle, axis[0], axis[1], axis[2]); }colorcube(); glutSwapBuffers(); glutSwapBuffers();}

Mouse Callback void mouseButton(int button,int state,int x,int y) { if(button==GLUT_RIGHT_BUTTON) exit(0); /* holding down left button allows user to rotate cube */ allows user to rotate cube */ if(button==GLUT_LEFT_BUTTON) switch(state) { case GLUT_DOWN: case GLUT_DOWN: y=winHeight-y; y=winHeight-y; startMotion( x,y); startMotion( x,y); break; break; case GLUT_UP: case GLUT_UP: stopMotion( x,y); stopMotion( x,y); break; break; }}

Start Function void startMotion(int x, int y) { trackingMouse = true; trackingMouse = true; redrawContinue = false; redrawContinue = false; startX = x; startX = x; startY = y; startY = y; curx = x; curx = x; cury = y; cury = y; trackball_ptov(x, y, winWidth, winHeight, lastPos); trackball_ptov(x, y, winWidth, winHeight, lastPos); trackballMove=true; trackballMove=true;} Stop Function void stopMotion(int x, int y) { trackingMouse = false; trackingMouse = false; /* check if position has /* check if position has changed */ if(startX!=x || startY!=y) if(startX!=x || startY!=y) redrawContinue = true; redrawContinue = true; else{ else{ angle = 0.0; angle = 0.0; redrawContinue=false; redrawContinue=false; trackballMove=false; trackballMove=false; }}

Quaternions Because the rotations are on the surface of a sphere, quaternions provide an interesting and more efficient way to implement the trackball Because the rotations are on the surface of a sphere, quaternions provide an interesting and more efficient way to implement the trackball See code in some of the standard demos included with Mesa See code in some of the standard demos included with Mesa