Geometric Transformations Chun-Yuan Lin CG 2018/9/12

Introduction Now, we tale a look at transformation operations that we can apply to objects to reposition or resize them. These operations are also used in the viewing routines that convert a world-coordinate scene description to a display for an output device. (geometric transformations) Geometric transformations can be used to describe how objects might move around in a scene during an animation sequence or simply to view them from another angle. CG 2018/9/12

Basic two-dimensional geometric transformations (1) The geometric transformation functions that are available in all graphics packages are those for translation, rotation and scaling. We first consider operations in two dimensions, then we discuss how these basic ideas can be extended to three-dimensional scenes. Two-Dimensional Translation We perform a translation on a single coordinate point by adding offsets to its coordinates so as to generate a new coordinate position. (multiple coordinate points) To translate a two-dimensional position, we add translation distance tx and ty to the original coordinates (x, y) to obtain the new coordinate position (x’, y’). CG 2018/9/12

Basic two-dimensional geometric transformations (2) The translation distance pair (tx, ty) is called a translation vector or shift vector. Translate is a rigid-body transformation that moves objects without deformation. (the same before and after the translation) P’ T P CG 2018/9/12

Basic two-dimensional geometric transformations (3) The following routines illustrates the translation operations. class wcPt2D { public: GLfloat x, y; }; void translatePolygon (wcPt2D * verts, GLint nVerts, GLfloat tx, GLfloat ty) { GLint k; for (k = 0; k < nVerts; k++) { verts [k].x = verts [k].x + tx; verts [k].y = verts [k].y + ty; } glBegin (GL_POLYGON); for (k = 0; k < nVerts; k++) glVertex2f (verts [k].x, verts [k].y); glEnd ( ); CG 2018/9/12

Basic two-dimensional geometric transformations (4) If we want to delete the original polygon, we could display it in the background color before translating it. CG 2018/9/12

Basic two-dimensional geometric transformations (5) Two-Dimensional Rotation We generate a rotation transformation of an object by specifying a rotation axis and a rotation angle. A two-dimensional rotation of an object is obtained by repositioning the object along a circular path in the xy plane. Parameters for the two-dimensional rotation are the rotation angle θ and a position (xr, yr) called the rotation point (or pivot point) about which the object is to be rotated. A positive value defines a counterclockwise rotation. A negative value defines a clockwise rotation. θ yr xr CG 2018/9/12

Basic two-dimensional geometric transformations (6) To simplify the explanation of the basic method, we first determine the transformation equation for rotation of a point position P when the pivot point is at the coordinate origin. (x’, y’) r (x, y) θ r CG 2018/9/12

Basic two-dimensional geometric transformations (7) A column-vector representation for a coordinate position P, as in equation is standard mathematical notation. OpenGL allows follow the standard column-vector convention. With a pivot point (xr, yr) : As with translation rotations are rigid-body transformations that move objects without deformation. (x’, y’) (x, y) (xr, yr) CG 2018/9/12

Basic two-dimensional geometric transformations (8) class wcPt2D { public: GLfloat x, y; }; void rotatePolygon (wcPt2D * verts, GLint nVerts, wcPt2D pivPt, GLdouble theta) { wcPt2D * vertsRot; GLint k; for (k = 0; k < nVerts; k++) { vertsRot [k].x = pivPt.x + (verts [k].x - pivPt.x) * cos (theta) - (verts [k].y - pivPt.y) * sin (theta); vertsRot [k].y = pivPt.y + (verts [k].x - pivPt.x) * sin (theta) + (verts [k].y - pivPt.y) * cos (theta); } glBegin {GL_POLYGON}; for (k = 0; k < nVerts; k++) glVertex2f (vertsRot [k].x, vertsRot [k].y); glEnd ( ); CG 2018/9/12

Basic two-dimensional geometric transformations (9) Two-Dimensional Scaling To alter the size of an object, we apply a scaling transformation. A simple two-dimensional scaling is performed by multiplying object positions by scaling factors sx and sy to produce the transformed coordinates (x’, y’). Any positive values can be assigned to the scaling factor sx and sy. Values less than 1 reduce the size of objects; Values larger than 1 produce enlargements. When sx and sy are assigned the same value, a uniform scaling is produced. CG 2018/9/12

Basic two-dimensional geometric transformations (10) Unequal values for sx and sy result in a differential scaling that is often used in design applications. In some systems, negative values can also be specified for the scaling parameters. This not only resizes an object, it reflects it about one or more of the coordinate axes. Scaling factors with absolute values less than 1 move objects closer to the coordinate origin. The value larger than 1 move coordinate positions farther from the origin. CG 2018/9/12

Basic two-dimensional geometric transformations (11) We can control the location of a scaled object by choosing a position, called the fixed point (xf, yf), that is to remain unchanged after the scaling transformation. Objects are now resized by scaling the distances between object points and the fixed point. (xf, yf) CG 2018/9/12

Basic two-dimensional geometric transformations (12) class wcPt2D { public: GLfloat x, y; }; void scalePolygon (wcPt2D * verts, GLint nVerts, wcPt2D fixedPt, GLfloat sx, GLfloat sy) { wcPt2D vertsNew; GLint k; for (k = 0; k < n; k++) { vertsNew [k].x = verts [k].x * sx + fixedPt.x * (1 - sx); vertsNew [k].y = verts [k].y * sy + fixedPt.y * (1 - sy); } glBegin {GL_POLYGON}; for (k = 0; k < n; k++) glVertex2v (vertsNew [k].x, vertsNew [k].y); glEnd ( ); CG 2018/9/12

Matrix Representation and Homogenous Coordinates (1) Many graphics applications involve sequences of geometric transformations. Here we consider how the matrix representations discussed in the previous sections can be reformulated so that such transformation sequences can be efficiently processed. We have seen in Section 5-1 that each of the three basic two- dimensional transformation (translation, rotation and scaling) can be expressed in the general matrix form: CG 2018/9/12

Matrix Representation and Homogenous Coordinates (2) Translation Rotation Scaling CG 2018/9/12

Matrix Representation and Homogenous Coordinates (3) To produce a sequence of transformation with these equations, such as scaling follow by rotation then translation, we would calculate the transformed coordinates one step at a time. A more efficient approach, however, is to combine the transformation so that the final coordinate positions are obtained directly from the initial coordinates, without calculating intermediate coordinate values. CG 2018/9/12

Matrix Representation and Homogenous Coordinates (4) Homogeneous Coordinates Multiplicative and translational terms for a two-dimensional geometric transformation can be combined into a single matrix if we expand the representation to 3 by 3 matrices. We can use the third column of a transformation matrix for the translation terms, and all transformation equations can be expressed as matrix multiplications. To expand each two-dimensional coordinate-position representation (x, y) to a three-elements representation (xh, yh, h), called homogeneous coordinates, where the homogenous parameter h is a non-zero value. CG 2018/9/12

Matrix Representation and Homogenous Coordinates (5) Homogenous coordinate representation could be written as (hx, hy, h). h can be any nonzero value. There are infinite number of equivalent homogenous representations for each coordinate point (x, y). A convenient choice is simply to set h =1. Each two-dimensional position is then represented with homogenous coordinates (x, y, 1). When a Cartesian point (x, y) is converted to a homogenous representation (xh, yh, h), equations containing x and y. Expressing position in homogenous coordinates allows us to represent all geometric transformation equations as matrix multiplications, which is the standard method used in graphics systems. CG 2018/9/12

Matrix Representation and Homogenous Coordinates (6) Two-Dimensional Translation Matrix We can represent the equations for a two-dimensional translation of a coordinate position using the following matrix multiplication CG 2018/9/12

Matrix Representation and Homogenous Coordinates (7) Two-Dimensional Rotation Matrix In some graphics libraries, a two-dimensional rotation function generates only rotations about the coordinate origin. A rotation about any other pivot point must then be performed as a sequence of transformation operations. CG 2018/9/12

Matrix Representation and Homogenous Coordinates (8) Two-Dimensional Scaling Matrix CG 2018/9/12

Matrix Representation and Homogenous Coordinates (9) Translation Rotation Scaling CG 2018/9/12

Inverse Transformations (1) We obtain the inverse matrix by negating the translation distances. An inverse rotation is accomplished by replacing the rotation angle by its negative. Negative values for rotation angles generate rotations in a clockwise direction. CG 2018/9/12

Inverse Transformations (2) The inverse matrix for any scaling transformation by replacing the scaling parameters with their reciprocal. CG 2018/9/12

Inverse Transformations (3) Translation Rotation Scaling CG 2018/9/12

Two-Dimensional Composite Transformations (1) Using matrix representations, we can set up a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformation. (concatenation, composite of matrices) It is more efficient to first multiply the transformation matrices to form a single composite matrix. CG 2018/9/12

Two-Dimensional Composite Transformations (2) Composite Two-Dimensional Translations CG 2018/9/12

Two-Dimensional Composite Transformations (3) Composite Two-Dimensional Rotations CG 2018/9/12

Two-Dimensional Composite Transformations (4) Composite Two-Dimensional Scaling CG 2018/9/12

Two-Dimensional Composite Transformations (5) Translation Rotation Scaling CG 2018/9/12

Two-Dimensional Composite Transformations (6) General Two-Dimensional Pivot-Point Rotation When a graphics package provides only a rotate function with respet to the coordinate origin, we can generate a two-dimensional rotation about any other pivot point (xr, yr) by performing the following sequence of translate-rotation-translate operations. CG 2018/9/12

CG 2018/9/12

Two-Dimensional Composite Transformations (7) General Two-Dimensional Fixed-Point Scaling CG 2018/9/12

CG 2018/9/12

Two-Dimensional Composite Transformations (8) Translation Rotation Scaling CG 2018/9/12

Two-Dimensional Composite Transformations (9) General Two-Dimensional Scaling Directions Parameters sx and sy scale objects along the x and y directions. We can scale an object in other directions by rotating the object to align the desired scaling directions with the coordinate axes before applying the scaling transformation. y s2 x θ CG s1 2018/9/12

Two-Dimensional Composite Transformations (10) Matrix Concatenation Properties Multiplication of matrices is associative. We can construct a composite matrix either by multiplying from left to right or by multiplying from right to left. (for some graphics packages, the order must be specified) Transformation products may not be commutative. CG 2018/9/12

CG 2018/9/12

Two-Dimensional Composite Transformations (11) General Two-Dimensional Composite Transformations and Computational Efficiency The four elements rsjk are the multiplicative rotation-scaling terms in the transformation, which involve only rotation angles and scaling factors. Elements trsx and trsy are the translation terms, containing combinations of translation distances, pivot-point and fixed-point coordinates, rotation angles and scaling parameters. CG 2018/9/12

Two-Dimensional Composite Transformations (12) Thus, we need actually perform only four multiplications and four additions to transform coordinate positions. This is the maximum number of computations required for any transformation sequence. Since rotation calculations require trigonometric evaluations and several multiplications for each transformed point, computational efficiency can become any important consideration in rotation transformations. When the rotation angle is small, the trigonometric functions can be replaced with approximation values based on the first few terms of their power series expansions. CG 2018/9/12

Two-Dimensional Composite Transformations (13) But even with small rotation angles, the accumulated error over many steps can become quite large. Composite transformations often involve inverse matrices. CG 2018/9/12

Two-Dimensional Composite Transformations (14) Two-Dimensional Rigid-Body Transformation If a transformation matrix includes only translation and rotation parameters, it is a rigid-body transformation matrix. A rigid-body change in coordinate position is also sometimes referred to as a rigid-motion transformation. is an orthogonal matrix. CG 2018/9/12

Two-Dimensional Composite Transformations (15) Constructing Two-Dimensional Rotation Matrices The orthogonal property of rotation matrices is useful for constructing the matrix when we know the final orientation of an object, rather than the amount of angular rotation necessary to put the object into that position. v’ u’ CG 2018/9/12

Two-Dimensional Composite Transformations (16) Two-Dimensional Composite-Matrix Programming Example A triangle Scaled with respect to its centroid position Rotated wth respect to its centroid position Translate centroid CG 2018/9/12

#include <GL/glut.h> #include <stdlib.h> #include <math.h> /* Set initial display-window size. */ GLsizei winWidth = 600, winHeight = 600; /* Set range for world coordinates. */ GLfloat xwcMin = 0.0, xwcMax = 225.0; GLfloat ywcMin = 0.0, ywcMax = 225.0; class wcPt2D { public: GLfloat x, y; }; CG 2018/9/12

typedef GLfloat Matrix3x3 [3][3]; Matrix3x3 matComposite; const GLdouble pi = 3.14159; void init (void) { /* Set color of display window to white. */ glClearColor (1.0, 1.0, 1.0, 0.0); } CG 2018/9/12

/. Construct the 3 by 3 identity matrix /* Construct the 3 by 3 identity matrix. */ void matrix3x3SetIdentity (Matrix3x3 matIdent3x3) { GLint row, col; for (row = 0; row < 3; row++) for (col = 0; col < 3; col++) matIdent3x3 [row][col] = (row == col); } CG 2018/9/12

/. Premultiply matrix m1 times matrix m2, store result in m2 /* Premultiply matrix m1 times matrix m2, store result in m2. */ void matrix3x3PreMultiply (Matrix3x3 m1, Matrix3x3 m2) { GLint row, col; Matrix3x3 matTemp; for (row = 0; row < 3; row++) for (col = 0; col < 3 ; col++) matTemp [row][col] = m1 [row][0] * m2 [0][col] + m1 [row][1] * m2 [1][col] + m1 [row][2] * m2 [2][col]; for (col = 0; col < 3; col++) m2 [row][col] = matTemp [row][col]; } CG 2018/9/12

void translate2D (GLfloat tx, GLfloat ty) { Matrix3x3 matTransl; / void translate2D (GLfloat tx, GLfloat ty) { Matrix3x3 matTransl; /* Initialize translation matrix to identity. */ matrix3x3SetIdentity (matTransl); matTransl [0][2] = tx; matTransl [1][2] = ty; /* Concatenate matTransl with the composite matrix. */ matrix3x3PreMultiply (matTransl, matComposite); } CG 2018/9/12

void rotate2D (wcPt2D pivotPt, GLfloat theta) { Matrix3x3 matRot; / void rotate2D (wcPt2D pivotPt, GLfloat theta) { Matrix3x3 matRot; /* Initialize rotation matrix to identity. */ matrix3x3SetIdentity (matRot); matRot [0][0] = cos (theta); matRot [0][1] = -sin (theta); matRot [0][2] = pivotPt.x * (1 - cos (theta)) + pivotPt.y * sin (theta); matRot [1][0] = sin (theta); matRot [1][1] = cos (theta); matRot [1][2] = pivotPt.y * (1 - cos (theta)) - pivotPt.x * sin (theta); /* Concatenate matRot with the composite matrix. */ matrix3x3PreMultiply (matRot, matComposite); } CG 2018/9/12

void scale2D (GLfloat sx, GLfloat sy, wcPt2D fixedPt) { Matrix3x3 matScale; /* Initialize scaling matrix to identity. */ matrix3x3SetIdentity (matScale); matScale [0][0] = sx; matScale [0][2] = (1 - sx) * fixedPt.x; matScale [1][1] = sy; matScale [1][2] = (1 - sy) * fixedPt.y; /* Concatenate matScale with the composite matrix. */ matrix3x3PreMultiply (matScale, matComposite); } CG 2018/9/12

/. Using the composite matrix, calculate transformed coordinates /* Using the composite matrix, calculate transformed coordinates. */ void transformVerts2D (GLint nVerts, wcPt2D * verts) { GLint k; GLfloat temp; for (k = 0; k < nVerts; k++) { temp = matComposite [0][0] * verts [k].x + matComposite [0][1] * verts [k].y + matComposite [0][2]; verts [k].y = matComposite [1][0] * verts [k].x + matComposite [1][1] * verts [k].y + matComposite [1][2]; verts [k].x = temp; } CG 2018/9/12

void triangle (wcPt2D *verts) { GLint k; glBegin (GL_TRIANGLES); for (k = 0; k < 3; k++) glVertex2f (verts [k].x, verts [k].y); glEnd ( ); } void displayFcn (void) /* Define initial position for triangle. */ GLint nVerts = 3; wcPt2D verts [3] = { {50.0, 25.0}, {150.0, 25.0}, {100.0, 100.0} }; CG 2018/9/12

/. Calculate position of triangle centroid /* Calculate position of triangle centroid. */ wcPt2D centroidPt; GLint k, xSum = 0, ySum = 0; for (k = 0; k < nVerts; k++) { xSum += verts [k].x; ySum += verts [k].y; } centroidPt.x = GLfloat (xSum) / GLfloat (nVerts); centroidPt.y = GLfloat (ySum) / GLfloat (nVerts); /* Set geometric transformation parameters. */ wcPt2D pivPt, fixedPt; pivPt = centroidPt; fixedPt = centroidPt; GLfloat tx = 0.0, ty = 100.0; GLfloat sx = 0.5, sy = 0.5; GLdouble theta = pi/2.0; CG 2018/9/12

glClear (GL_COLOR_BUFFER_BIT); // Clear display window. glColor3f (0.0, 0.0, 1.0); // Set initial fill color to blue. triangle (verts); // Display blue triangle. /* Initialize composite matrix to identity. */ matrix3x3SetIdentity (matComposite); /* Construct composite matrix for transformation sequence. */ scale2D (sx, sy, fixedPt); // First transformation: Scale. rotate2D (pivPt, theta); // Second transformation: Rotate translate2D (tx, ty); // Final transformation: Translate. /* Apply composite matrix to triangle vertices. */ transformVerts2D (nVerts, verts); CG 2018/9/12

glColor3f (1. 0, 0. 0, 0. 0); // Set color for transformed triangle glColor3f (1.0, 0.0, 0.0); // Set color for transformed triangle. triangle (verts); // Display red transformed triangle. glFlush ( ); } void winReshapeFcn (GLint newWidth, GLint newHeight) { glMatrixMode (GL_PROJECTION); glLoadIdentity ( ); gluOrtho2D (xwcMin, xwcMax, ywcMin, ywcMax); glClear (GL_COLOR_BUFFER_BIT); CG 2018/9/12

void main (int argc, char void main (int argc, char ** argv) { glutInit (&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowPosition (50, 50); glutInitWindowSize (winWidth, winHeight); glutCreateWindow ("Geometric Transformation Sequence"); init ( ); glutDisplayFunc (displayFcn); glutReshapeFunc (winReshapeFcn); glutMainLoop ( ); } CG 2018/9/12

Other Two-Dimensional Transformations (1) A few additional transformations that are useful in certain applications. (reflection, shear) Reflection A transformation that produces a mirror image of an object is called a reflection. (may rotate the object 180° about the reflection axis. Reflection about the line y=0 (the x axis) is accomplished with the transformation matrix CG 2018/9/12

Other Two-Dimensional Transformations (2) A reflection about the line x = 0 (the y axis): The reflection is sometimes referred to as a reflection relative to the coordinate origin. (also can with a pivot point) CG 2018/9/12

Other Two-Dimensional Transformations (3) y = x We can derive this matrix by concatenating a sequence of rotation and coordinate axis reflection matrices. (rotate, reflection, rotate) y = -x CG 2018/9/12

Other Two-Dimensional Transformations (4) y = mx +b translate-rotate-reflect transformation Inverse rotation and translate transformation Shear A transformation that distorts the shape of an object. An x-direction shear relative to the x axis. CG 2018/9/12

Other Two-Dimensional Transformations (5) Any real number can be assigned to the shear parameter shx. Negative values for shx shift coordinate positions to the left. We can generate x-direction shears to other reference lines. yref shx=0.5 yref CG 2018/9/12

Other Two-Dimensional Transformations (6) A y-direction shear relative to the line x=xref xref shy=0.5 xref CG 2018/9/12

Raster Methods For Geometric Transformations (1) The characteristics of raster systems suggest an alternate method for performing certain two-dimensional transformations. Raster systems store picture information as color patterns in the frame buffer. Therefore, some simple object transformations can be carried out rapidly by manipulating an array of pixel values. Routines for performing some raster operations are usually available in a graphics package. (OpenGL) pmax pmin CG p0 2018/9/12

Raster Methods For Geometric Transformations (2) We can rotate a two-dimensional object or pattern 90 ° counterclockwise by reversing the pixel values in each row of the array, then interchanging rows and columns. A 180 ° rotation is obtained by reversing the order of the elements in each row of the array, then reversing the order of the row. For array rotations that are not multiples of 90 °, we need to do some extra processing. CG 2018/9/12

OpenGL Raster Transformations (1) A translation of a rectangular array of pixel-color values from one buffer area to another can be accomplished in OpenGL as a copy operation: glCopyPixels (xmin, ymin, width, height, GL_COLOR); The first four parameters in this function give the location and dimensions of the pixel block. Both the region to be copied (the source) and the destination area should lie completely within the bounds of the screen coordinates. glReadPixels (xmin, ymin, width, height, GL_RGB, GL_UNSIGNED_BYTE, colorArray); CG 2018/9/12

OpenGL Raster Transformations (2) glDrawPixels (width, height, GL_RGB, GL_UNSIGNED_BYTE, colorArray); glPixelZoom (sx, sy); CG 2018/9/12

Transformations Between Two-Dimensional Coordinate Systems (1) Computer-graphics applications involve coordinate transformations from one reference frame to another during various stages of scene processing. The viewing routine transform object descriptions from world coordinates to device coordinates. Also, scenes are sometimes described in non-Cartesian reference frames that take advantage of object symmetries. Coordinate description in these systems must be converted to Cartesian world- coordinates for processing. Here, we consider only the transformations involved in converting from one two-dimensional Cartesian frame to another. CG 2018/9/12

Transformations Between Two-Dimensional Coordinate Systems (2) To transform object descriptions from xy coordinates to x’y’ coordinates, we set up a transformation that superimpose the x’y’ axes onto the xy plane. Translate so that the origin (x0, y0) of the x’y’ system is moved to the origin (0,0) of the xy system. Rotate the x’ axis onto the x axis. y’ x’ y0 x0 CG 2018/9/12

Geometric Transformations in Three-Dimensional Space Methods for geometric transformations in three dimensions are extended from two-dimensional methods by including considerations for the z coordinate. But the extension from two-dimensional rotations to three dimensions is less straightforward. We can select any spatial orientation for the rotation. A three-dimensional position, expressed in homogenous coordinates, is represented as a four-elements column vector. Thus, each geometric transformation operator is now a 4 by 4 matrix. CG 2018/9/12

Three-Dimensional Translation (1) A position P=(x, y, z) in three-dimensional space is translated to a location P’=(x’, y’, z’). CG 2018/9/12

Three-Dimensional Translation (2) For an object represented as a set of polygon surfaces, we translate each vector for each surface and redisplay the polygon facets at the translated positions. Inverse three-dimensional translation matrix. y x T=(tx,ty,tz) z CG 2018/9/12

Translate for 2D polygon (3D?) class wcPt2D { public: GLfloat x, y; }; void translatePolygon (wcPt2D * verts, GLint nVerts, GLfloat tx, GLfloat ty) { GLint k; for (k = 0; k < nVerts; k++) { verts [k].x = verts [k].x + tx; verts [k].y = verts [k].y + ty; } glBegin (GL_POLYGON); for (k = 0; k < nVerts; k++) glVertex2f (verts [k].x, verts [k].y); glEnd ( ); CG 2018/9/12

typedef GLfloat Matrix4x4 [4][4]; /* Construct the 4 by 4 identity matrix. */ void matrix4x4SetIdentity (Matrix4x4 matIdent4x4) { GLint row, col; for (row = 0; row < 4; row++) for (col = 0; col < 4 ; col++) matIdent4x4 [row][col] = (row == col); } void translate3D (GLfloat tx, GLfloat ty, GLfloat tz) Matrix4x4 matTransl3D; /* Initialize translation matrix to identity. */ matrix4x4SetIdentity (matTransl3D); matTransl3D [0][3] = tx; matTransl3D [1][3] = ty; matTransl3D [2][3] = tz; CG 2018/9/12

Three-Dimensional Scaling (1) The matrix expression for the three-dimensional scaling transformation of a position P =(x, y, z) relative to the coordinate origin is a simple extension of two-dimensional scaling. CG 2018/9/12

Three-Dimensional Scaling (2) We preserve the original shape of an object with a uniform scaling: sx=sy=sz. With a fixed point (xf, yf, zf) Translate Scaling Inverse three-dimensional scaling matrix CG 2018/9/12

Scaling for 2D polygon (3D?) class wcPt2D { public: GLfloat x, y; }; void scalePolygon (wcPt2D * verts, GLint nVerts, wcPt2D fixedPt, GLfloat sx, GLfloat sy) { wcPt2D vertsNew; GLint k; for (k = 0; k < n; k++) { vertsNew [k].x = verts [k].x * sx + fixedPt.x * (1 - sx); vertsNew [k].y = verts [k].y * sy + fixedPt.y * (1 - sy); } glBegin {GL_POLYGON}; for (k = 0; k < n; k++) glVertex2v (vertsNew [k].x, vertsNew [k].y); glEnd ( ); CG 2018/9/12

class wcPt3D { private: GLfloat x, y, z; public: / class wcPt3D { private: GLfloat x, y, z; public: /* Default Constructor: * Initialize position as (0.0, 0.0, 0.0). */ wcPt3D ( ) { x = y = z = 0.0; } setCoords (GLfloat xCoord, GLfloat yCoord, GLfloat zCoord) { x = xCoord; y = yCoord; z = zCoord; CG 2018/9/12

typedef float Matrix4x4 [4][4]; GLfloat getx ( ) const { return x; } GLfloat gety ( ) const { return y; GLfloat getz ( ) const { return z; }; typedef float Matrix4x4 [4][4]; void scale3D (GLfloat sx, GLfloat sy, GLfloat sz, wcPt3D fixedPt) { Matrix4x4 matScale3D; CG 2018/9/12

/. Initialize scaling matrix to identity /* Initialize scaling matrix to identity. */ matrix4x4SetIdentity (matScale3D); matScale3D [0][0] = sx; matScale3D [0][3] = (1 - sx) * fixedPt.getx ( ); matScale3D [1][1] = sy; matScale3D [1][3] = (1 - sy) * fixedPt.gety ( ); matScale3D [2][2] = sz; matScale3D [2][3] = (1 - sz) * fixedPt.getz ( ); } CG 2018/9/12

Three-Dimensional Rotation (1) We can rotate an object about any axis in space, but the easies rotation axes to handle are those that are parallel to the Cartesian- coordinate axes. Also, we can use combinations of coordinate-axis rotations to specify a rotation about any other line in space. Positive rotation angles produce counterclockwise rotations about a coordinate axis, assuming that we are looking in the negative direction along that coordinate axis. CG 2018/9/12

Three-Dimensional Coordinate-Axis Rotations (1) The three-dimensional z-axis rotation CG 2018/9/12

Three-Dimensional Coordinate-Axis Rotations (2) Transformation equations for rotations about the other two coordinates axes can be obtained with a cyclic permutation of the coordinate parameter x, y and z. Inverse three-dimensional rotation matrix CG 2018/9/12

Three-Dimensional Coordinate-Axis Rotations (3) The three-dimensional x-axis rotation CG 2018/9/12

Three-Dimensional Coordinate-Axis Rotations (4) The three-dimensional y-axis rotation CG 2018/9/12

General Three-Dimensional Rotations(1) A rotation matrix for any axis that does not coincide with a coordinate axis can be set up a composite transformation involving combinations of translations and the coordinate-axis rotations. In the special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes. Translate Rotation CG 2018/9/12

General Three-Dimensional Rotations(2) A coordinate position P is transformed with the sequence. When an object is to be rotated about an axis that is not parallel to one of the coordinate axes, we must perform some additional transformations. Translate Rotate Inverse rotate Inverse translate CG 2018/9/12

General Three-Dimensional Rotations(3) We can transform the rotation axis onto any one of the three coordinate axes. The z axis is often a convenient choice. A rotation axis can be defined with two coordinate position. p2 p1 CG 2018/9/12

General Three-Dimensional Rotations(4) The first step in the rotation sequence is to set up the translation matrix that repositions the rotation axis so that it passes through the coordinate origin. Next, we formulate the transformations that will put the rotation axis onto the z axis. We can use a number of ways to perform the two steps. Rotate about the x axis (into xz plane), then rotate about the y axis. CG 2018/9/12

General Three-Dimensional Rotations(5) We establish the transformation matrix for rotation around the x axis by determining the values for the sine and cosine of the rotation angle necessary to get u into the xz plane. If we represent the project of u in the yz plane as the vector u’=(0, b, c), then the cosine of the rotation angle α can be determined from the dot product of u’ and the unit vector uz along the z axis. u u α β u’ CG 2018/9/12

General Three-Dimensional Rotations(6) The next step in the formulation of the transformation sequence is to determine the matrix that will swing the unit vector in the xz plane counterclockwise around the y axis onto the positive z axis. CG 2018/9/12

General Three-Dimensional Rotations(7) CG 2018/9/12

Quaternion Methods for Three-Dimensional Rotations (1) A more efficient method for generating a rotation about an arbitrarily selected axis is to use a quaternion representation for the rotation transformation. Quaternion is a number of computer graphics procedures, including the generation of fractal objects. They require less storage space than 4 by 4 matrices and it is simple. One way to characterize a quaternion is as an ordered pair, consisting of a scalar part and a vector part: CG 2018/9/12

Quaternion Methods for Three-Dimensional Rotations (2) We can also think of a quaternion as a higher-order complex number with one real part (the scalar part) and three complex parts (the elements of vector v) CG 2018/9/12

Quaternion Methods for Three-Dimensional Rotations (3) CG 2018/9/12

Quaternion Methods for Three-Dimensional Rotations (4) Perform a rotation about the z axis by setting rotation axis vector u to the unit z-axis vector (0, 0, 1) CG 2018/9/12

class wcPt3D { public: GLfloat x, y, z; }; typedef float Matrix4x4 [4][4]; Matrix4x4 matRot; /* Construct the 4 by 4 identity matrix. */ void matrix4x4SetIdentity (Matrix4x4 matIdent4x4) { GLint row, col; for (row = 0; row < 4; row++) for (col = 0; col < 4 ; col++) matIdent4x4 [row][col] = (row == col); } CG 2018/9/12

/* Premultiply matrix m1 times matrix m2, store result in m2. */ void matrix4x4PreMultiply (Matrix4x4 m1, Matrix4x4 m2) { GLint row, col; Matrix4x4 matTemp; for (row = 0; row < 4; row++) for (col = 0; col < 4 ; col++) matTemp [row][col] = m1 [row][0] * m2 [0][col] + m1 [row][1] * m2 [1][col] + m1 [row][2] * m2 [2][col] + m1 [row][3] * m2 [3][col]; for (col = 0; col < 4; col++) m2 [row][col] = matTemp [row][col]; } CG 2018/9/12

void translate3D (GLfloat tx, GLfloat ty, GLfloat tz) { Matrix4x4 matTransl3D; /* Initialize translation matrix to identity. */ matrix4x4SetIdentity (matTransl3D); matTransl3D [0][3] = tx; matTransl3D [1][3] = ty; matTransl3D [2][3] = tz; /* Concatenate translation matrix with matRot. */ matrix4x4PreMultiply (matTransl3D, matRot); } CG 2018/9/12

void rotate3D (wcPt3D p1, wcPt3D p2, GLfloat radianAngle) { Matrix4x4 matQuaternionRot; GLfloat axisVectLength = sqrt ((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y) + (p2.z - p1.z) * (p2.z - p1.z)); GLfloat cosA = cos (radianAngle); GLfloat oneC = 1 - cosA; GLfloat sinA = sin (radianAngle); GLfloat ux = (p2.x - p1.x) / axisVectLength; GLfloat uy = (p2.y - p1.y) / axisVectLength; GLfloat uz = (p2.z - p1.z) / axisVectLength; /* Set up translation matrix for moving p1 to origin. */ translate3D (-p1.x, -p1.y, -p1.z); CG 2018/9/12

/* Initialize matQuaternionRot to identity matrix. */ matrix4x4SetIdentity (matQuaternionRot); matQuaternionRot [0][0] = ux*ux*oneC + cosA; matQuaternionRot [0][1] = ux*uy*oneC - uz*sinA; matQuaternionRot [0][2] = ux*uz*oneC + uy*sinA; matQuaternionRot [1][0] = uy*ux*oneC + uz*sinA; matQuaternionRot [1][1] = uy*uy*oneC + cosA; matQuaternionRot [1][2] = uy*uz*oneC - ux*sinA; matQuaternionRot [2][0] = uz*ux*oneC - uy*sinA; matQuaternionRot [2][1] = uz*uy*oneC + ux*sinA; matQuaternionRot [2][2] = uz*uz*oneC + cosA; /* Combine matQuaternionRot with translation matrix. */ matrix4x4PreMultiply (matQuaternionRot, matRot); CG 2018/9/12

translate3D (p1. x, p1. y, p1. z); } void displayFcn (void) { / translate3D (p1.x, p1.y, p1.z); } void displayFcn (void) { /* Input rotation parameters. */ /* Initialize matRot to identity matrix: */ matrix4x4SetIdentity (matRot); /* Pass rotation parameters to procedure rotate3D. */ /* Display rotated object. */ CG 2018/9/12

Composite Three-Dimensional Transformations As with two-dimensional transformation, we form a composite three-dimensional transformation by multiplying the matrix representation for the individual operations in the transformation sequence. An example. Rotation Scale Translate CG 2018/9/12

class wcPt3D { public: GLfloat x, y, z; }; typedef GLfloat Matrix4x4 [4][4]; Matrix4x4 matComposite; /* Construct the 4 by 4 identity matrix. */ void matrix4x4SetIdentity (Matrix4x4 matIdent4x4) { GLint row, col; for (row = 0; row < 4; row++) for (col = 0; col < 4 ; col++) matIdent4x4 [row][col] = (row == col); } CG 2018/9/12

/. Premultiply matrix m1 times matrix m2, store result in m2 /* Premultiply matrix m1 times matrix m2, store result in m2. */ void matrix4x4PreMultiply (Matrix4x4 m1, Matrix4x4 m2) { GLint row, col; Matrix4x4 matTemp; for (row = 0; row < 4; row++) for (col = 0; col < 4 ; col++) matTemp [row][col] = m1 [row][0] * m2 [0][col] + m1 [row][1] * m2 [1][col] + m1 [row][2] * m2 [2][col] + m1 [row][3] * m2 [3][col]; for (col = 0; col < 4; col++) m2 [row][col] = matTemp [row][col]; } CG 2018/9/12

/* Procedure for generating 3D translation matrix. */ void translate3D (GLfloat tx, GLfloat ty, GLfloat tz) { Matrix4x4 matTransl3D; /* Initialize translation matrix to identity. */ matrix4x4SetIdentity (matTransl3D); matTransl3D [0][3] = tx; matTransl3D [1][3] = ty; matTransl3D [2][3] = tz; /* Concatenate matTransl3D with composite matrix. */ matrix4x4PreMultiply (matTransl3D, matComposite); } CG 2018/9/12

/* Procedure for generating a quaternion rotation matrix. */ void rotate3D (wcPt3D p1, wcPt3D p2, GLfloat radianAngle) { Matrix4x4 matQuatRot; float axisVectLength = sqrt ((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y) + (p2.z - p1.z) * (p2.z - p1.z)); float cosA = cosf (radianAngle); float oneC = 1 - cosA; float sinA = sinf (radianAngle); float ux = (p2.x - p1.x) / axisVectLength; float uy = (p2.y - p1.y) / axisVectLength; float uz = (p2.z - p1.z) / axisVectLength; CG 2018/9/12

/. Set up translation matrix for moving p1 to origin, /* Set up translation matrix for moving p1 to origin, * and concatenate translation matrix with matComposite. */ translate3D (-p1.x, -p1.y, -p1.z); /* Initialize matQuatRot to identity matrix. */ matrix4x4SetIdentity (matQuatRot); matQuatRot [0][0] = ux*ux*oneC + cosA; matQuatRot [0][1] = ux*uy*oneC - uz*sinA; matQuatRot [0][2] = ux*uz*oneC + uy*sinA; matQuatRot [1][0] = uy*ux*oneC + uz*sinA; matQuatRot [1][1] = uy*uy*oneC + cosA; matQuatRot [1][2] = uy*uz*oneC - ux*sinA; matQuatRot [2][0] = uz*ux*oneC - uy*sinA; matQuatRot [2][1] = uz*uy*oneC + ux*sinA; matQuatRot [2][2] = uz*uz*oneC + cosA; CG 2018/9/12

/* Concatenate matQuatRot with composite matrix. */ matrix4x4PreMultiply (matQuatRot, matComposite); /* Construct inverse translation matrix for p1 and * concatenate with composite matrix. */ translate3D (p1.x, p1.y, p1.z); } /* Procedure for generating a 3D scaling matrix. */ void scale3D (Gfloat sx, GLfloat sy, GLfloat sz, wcPt3D fixedPt) { Matrix4x4 matScale3D; /* Initialize scaling matrix to identity. */ matrix4x4SetIdentity (matScale3D); CG 2018/9/12

matScale3D [0][0] = sx; matScale3D [0][3] = (1 - sx) * fixedPt.x; matScale3D [1][1] = sy; matScale3D [1][3] = (1 - sy) * fixedPt.y; matScale3D [2][2] = sz; matScale3D [2][3] = (1 - sz) * fixedPt.z; /* Concatenate matScale3D with composite matrix. */ matrix4x4PreMultiply (matScale3D, matComposite); } void displayFcn (void) { /* Input object description. */ /* Input translation, rotation, and scaling parameters. */ CG 2018/9/12

/* Set up 3D viewing-transformation routines. */ /* Initialize matComposite to identity matrix: */ matrix4x4SetIdentity (matComposite); /* Invoke transformation routines in the order they * are to be applied: */ rotate3D (p1, p2, radianAngle); // First transformation: Rotate. scale3D (sx, sy, sz, fixedPt); // Second transformation: Scale. translate3D (tx, ty, tz); // Final transformation: Translate. /* Call routines for displaying transformed objects. */ } CG 2018/9/12

Other Three-Dimensional Transformations (1) The other transformations discussed for two-dimensional applications are also useful in many three-dimensional situations. Three-Dimensional Reflections A reflection in a three-dimensional space can be performed relative to a selected reflection axis or with respect to a reflection plane. An example of a reflection that converts coordinate specifications from a right-handed system to a left-handed system. CG 2018/9/12

Other Three-Dimensional Transformations (2) The matrix representation for a reflection relative to the xy plane is Three-Dimensional Shears A general z-axis shearing transformation relative to a selected reference position is produced with the following matrix CG 2018/9/12

Transformations between Three-Dimensional Coordinate Systems We again consider only Cartesian reference frames, and we assume that an x’y’z’ system is defined with respect to an xyz system. CG 2018/9/12

Affine Transformations A coordinate transformation of the form is called an affine transformation. Each of the transformation coordinates x’,y’ and z’ is a linear function of the original coordinates x, y and z, and parameters aij and bk are constants determined by the transformation type. Rotation, Scaling, Translate, Reflection and Shear all are examples of affine transformation. CG 2018/9/12

OpenGL Geometric-Transformation Functions (1) In the core library of OpenGL (gl), a separate function is available for each of the basic geometric transformations, and all transformation are specified in three-dimensions. Translation  three-dimensional translation vector Rotation  angle and orientation for a rotation axis Scaling  three coordinate scaling factors relative to the coordinate origin. 4 by 4 matrix Basic OepnGL Geometric Transformations CG 2018/9/12

OpenGL Geometric-Transformation Functions (2)-Translate A 4 by 4 translation matrix is constructed with the following routine Translation parameters tx, ty and tz can be assigned any real-number values, and the single suffix code to be affixed to this function is either f or d. (For two-dimensional application, tz=0) The translation matrix generated by this function is used to transform positions of objects defined after this function is invoked. CG 2018/9/12

OpenGL Geometric-Transformation Functions (3)-Rotate A 4 by 4 rotation matrix Vector v = (vx, vy, vz) can have any floating-point value for its components. This vector defines the orientation for a rotation axis that passes through the coordinate origin. If v is not specified as a unit vector, then it is automatically normalized before the elements of the rotation matrix are computed. This function generates a rotation matrix using the quaternion calculations. CG 2018/9/12

OpenGL Geometric-Transformation Functions (4)-Scale A 4 by 4 scaling matrix with respect to the coordinate origin The suffix code is again either f or d and the scaling parameters can be assigned any real-number values. Therefore, this function will also generate reflections when negative values are assigned to the scaling parameters. A zero value for any scaling parameter can cause a processing error. CG 2018/9/12

OpenGL Matrix Operations (1) We noted that the glMatrixMode routine is used to set the projection, which designates the matrix that is to be used for the projection transformation. We use the same routine to set up a matrix for the geometric transformation. But in this case, the matrix is referred to as the modelview matrix, and it is used to store and combine the geometric transformations. It is also used to combine the geometric transformation with the transformation to a viewing-coordinate system. CG 2018/9/12

OpenGL Matrix Operations (2) We specify the modelview mode with the statement. The 4 by 4 modelview matrix is as the current matrix. The previous discussions are used to modify the modelview matrix, which is then applied to transform coordinate positions in a scene. Two other modes are texture mode and color mode. The default argument for the glMatrixMode is GL_MODELVIEW CG 2018/9/12

OpenGL Matrix Operations (3) Once we are in the modelview mode, a call to a transformation routine generates a matrix that is multiplied by the current matrix for that mode. With the following function, we assign the identity matrix to the current matrix. We can assign other values to the elements of the current matrix using CG 2018/9/12

OpenGL Matrix Operations (4) A single subscripted 16-elemnt array of floating-point values is specified with parameter elements16, and a suffix code of either f or d is used to designate the data type. The elements in this array must be specified in column-major order. glMatrixMode (GL_MODELVIEW); Glfloat elems [16]; Glint k; for (k=0; k<16;k++) elems[k]=float (k); glLoadMatrixf (elems); CG 2018/9/12

OpenGL Matrix Operations (5) We can also concatenate a specified matrix with the current matrix. The suffix code is either f or d, and parameters otherElements16 is a 16-elemet, single-subscripted array that lists the elements of some other matrix in column-major order. The current matrix is postmultiplied by the matrix specified in glMultMatrix, and this product replaces the current matrix. M’ represents the matrix whose elements are specified by parameter otherElements16. CG 2018/9/12

OpenGL Matrix Operations (6) The glMultMatrix function can also be used to set up any transformation sequence with individually defined matrices. glMatrixMode (GL_MODELVIEW); glLoadIdentity (); glMultMatrixf (elemsM2); glMultMatrixf (elemsM1); The first transformation to be applied in this sequence is the last one specified in the code. Thus, if we set up a transformation sequence in an OpenGL program, we can think of the individual transformation as being loaded onto a stack. CG 2018/9/12

OpenGL Matrix Operations (7) It is also important to keep in mind that OpenGL stores matrices in column-major order. And a reference to a matrix elements such as mjk in OpenGL is a reference to the elements in column j and row k. CG 2018/9/12

OpenGL Matrix Stacks (1) For each of the four modes (modelview, projection, texture, and color) that we can select with the glMatrixMode function, OpenGL maintains a matrix stack. Initially, each stack contains only the identity matrix. The top matrix on each stack is called the current matrix. After we specify the viewing and geometric transformations, the top of the modelview matrix stack is the 4 by 4 composite matrix that combines the viewing transformations and the various geometric transformations. CG 2018/9/12

OpenGL Matrix Stacks (2) Therefore, OpenGL supports a modelview stack depth of at least 32, and some implementations may allow more than 32 matrices to be saved on the modelview stack. We can determine the number of positions available in the modelview stack for a particular implementation of OpenGL with which returns a single integer value to array stackSize. The other three matrix modes have a minimum stack depth of 2. CG 2018/9/12

OpenGL Matrix Stacks (3) We can also find out how many matrices are currently in the stack with Initially, the modelview stack contains only the identity matrix, so the value 1 is returned by this function if we issue the query before any stack processing has occurred. These stack-processing functions are more efficient than manipulating the stack matrices individually. CG 2018/9/12

OpenGL Matrix Stacks (4) We can maintain an identity matrix on the stack, so that initializations of the current matrix can be performed faster than by using repeated calls to glLoadIdentity. With the following function, we copy the current matrix at the top of the active stack and store that copy in the second stack position. This gives us duplicate matrices at the top two positions of the stack The other stack function is which destroys the matrix at the top of the stack, and the second matrix in the stack becomes the current matrix. (must at least two matrices) CG 2018/9/12

OpenGL Geometric-Transformation Programming Examples CG 2018/9/12

glMatrixMode (GL_MODELVIEW); glColor3f (0. 0, 0. 0, 1 glMatrixMode (GL_MODELVIEW); glColor3f (0.0, 0.0, 1.0); glRecti (50, 100, 200, 150); // Display blue rectangle. glColor3f (1.0, 0.0, 0.0); glTranslatef (-200.0, -50.0, 0.0); // Set translation parameters. glRecti (50, 100, 200, 150); // Display red, translated rectangle. glLoadIdentity ( ); // Reset current matrix to identity. glRotatef (90.0, 0.0, 0.0, 1.0); // Set 90-deg. rotation about z axis. glRecti (50, 100, 200, 150); // Display red, rotated rectangle. glLoadIdentity ( ); // Reset current matrix to identity. glScalef (-0.5, 1.0, 1.0); // Set scale-reflection parameters. glRecti (50, 100, 200, 150); // Display red, transformed rectangle. CG 2018/9/12

glMatrixMode (GL_MODELVIEW); glColor3f (0. 0, 0. 0, 1 glMatrixMode (GL_MODELVIEW); glColor3f (0.0, 0.0, 1.0); // Set current color to blue. glRecti (50, 100, 200, 150); // Display blue rectangle. glPushMatrix ( ); // Make copy of identity (top) matrix. glColor3f (1.0, 0.0, 0.0); // Set current color to red. glTranslatef (-200.0, -50.0, 0.0); // Set translation parameters. glRecti (50, 100, 200, 150); // Display red, translated rectangle. glPopMatrix ( ); // Throw away the translation matrix. glRotatef (90.0, 0.0, 0.0, 1.0); // Set 90-deg. rotation about z axis. glRecti (50, 100, 200, 150); // Display red, rotated rectangle. glPopMatrix ( ); // Throw away the rotation matrix. glScalef (-0.5, 1.0, 1.0); // Set scale-reflection parameters. glRecti (50, 100, 200, 150); // Display red, transformed rectangle. CG 2018/9/12

class wcPt3D { public: GLfloat x, y, z; }; \ class wcPt3D { public: GLfloat x, y, z; }; \* Procedure for generating a matrix for rotation about an * an axis defined with points p1 and p2. */ void rotate3D (wcPt3D p1, wcPt3D p2, GLfloat thetaDegrees) { /* Set up components for rotation-axis vector. */ float vx = (p2.x - p1.x); float vy = (p2.y - p1.y); float vz = (p2.z - p1.z); CG 2018/9/12

/* Specfy translate-rotate-translate sequence in reverse order: */ glTranslatef (p1.x, p1.y, p1.z); // Move p1 back to original position. /* Rotate about axis through origin: */ glRotatef (thetaDegrees, vx, vy, vz); glTranslatef (-p1.x, -p1.y, -p1.z); // Translate p1 to origin. } /* Procedure for generating a matrix for a scaling * transformation with respect to an arbitrary fixed point. */ void scale3D (GLfloat sx, GLfloat sy, GLfloat sz, wcPt3D fixedPt) { /* Specfy translate-scale-translate sequence in reverse order: */ /* (3) Translate fixed point back to original position: */ glTranslatef (fixedPt.x, fixedPt.y, fixedPt.z); glScalef (sx, sy, sz); // (2) Scale with respect to origin. /* (1) Translate fixed point to coordinate origin: */ glTranslatef (-fixedPt.x, -fixedPt.y, -fixedPt.z); CG 2018/9/12

void displayFcn (void) { /. Input object description. / / void displayFcn (void) { /* Input object description. */ /* Set up 3D viewing-transformation routines. */ /* Display object. */ glMatrixMode (GL_MODELVIEW); /* Input translation parameters tx, ty, tz. */ /* Input the defining points, p1 and p2, for the rotation axis. */ /* Input rotation angle in degrees. */ /* Input scaling parameters: sx, sy, sz, and fixedPt. */ /* Invoke geometric transformations in reverse order: */ glTranslatef (tx, ty, tz); // Final transformation: Translate. scale3D (sx, sy, sz, fixedPt); // Second transformation: Scale. rotate3D (p1, p2, thetaDegrees); // First transformation: Rotate. /* Call routines for displaying transformed objects. */ } CG 2018/9/12