CS 490: Computer Graphics Chapter 4 Geometric Objects and Transformations Sensational Solar System Simulator Interactive Computer GraphicsChapter 4 - 2 Interactive Computer GraphicsChapter Perspective How is it that mathematics can model the (ideal) world so well? Interactive Computer GraphicsChapter Overview Scalars and Vectors Coordinates and frames Homogeneous coordinates Rotation, translation, and scaling Concatenating transformations Transformations in Canvas Projections A virtual trackball Interactive Computer GraphicsChapter Background: linear algebra Quick review of important concepts Point: location (x, y) or (x, y, z) Vector: direction and magnitude Affine space & Affine sum Affine space: provide a better framework for doing geometry. It is possible to deal with points,curve,surfaces..etc. In an intrinsic manner. Affine sum: For any point Q, vector V, scaler a >> new point Interactive Computer GraphicsChapter 4 - 6 Interactive Computer GraphicsChapter Vectors Magnitude of a vector: |v| Direction of a vector, unit vector: v Affine sum: P = (1-a) Q + a R ^ Interactive Computer GraphicsChapter Dot Product Def: u v = u x v x + u y v y + u z v z u v = |u| |v| cos Uses: Angle between two vectors? Are two vectors perpendicular? u.v=0 Do two vectors form acute or obtuse angle? Is a face visible? (backface culling) backface culling A method which determines whether a polygon of a graphical object is visible? If not, the polygon is culled from rendering process. >> increase efficiency of rendering. >>similar to Clipping. Interactive Computer GraphicsChapter 4 - 9 Interactive Computer GraphicsChapter Cross Product u v = Direction: normal to plane containing u, v (using right-hand rule in right-handed coordinate system) Magnitude |u x v|: |u||v| sin Uses: Angle between vectors? Face outward normal? Normal:is a vector that is perpendicular to a given objects. Interactive Computer GraphicsChapter Face outward normals Why might I need face normals? How to find the outward normal of a face? Assume that vertices are listed in a standard order when viewed from the outside -- counter- clockwise Cross product of the first two edges is outward normal vector Note that first corner must be convex Interactive Computer GraphicsChapter How can I tell if I have run into a wall? Walls, motion segments, intersection tests How to tell if two line segments (p1, p2) and (p3, p4) intersect? Looking from p1 to p2, check that p3 and p4 are on opposite sides Looking from p3 to p4, check that p1 and p2 are on opposite sides How do you get the earth to go around the sun? How do you get the moon to do that fancy motion? Interactive Computer GraphicsChapter Sensational Solar System Simulator Interactive Computer GraphicsChapter Coordinate systems and frames In geometry, a coordinate system is a system which uses one or more numbers, or coordinates, to uniquely determine the position of a point or other geometric element A graphics program uses many coordinate systems, e.g. model, world, screen Frame: origin + basis vectors (axes) Need to transform between frames Coordinate systems World Coordinate System - Also known as the "universe" or sometimes "model" coordinate system. This is the base reference system for the overall model, ( generally in 3D ), to which all other model coordinates relate. Screen Coordinate System - This 2D coordinate system refers to the physical coordinates of the pixels on the computer screen, based on current screen resolution. ( E.g. 1024x768 ) Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Transformations Changes in coordinate systems usually involve Translation Rotation Scale 3-D Rotation and scale can be represented as 3x3 matrices, but not translation We're also interested in a 3-D to 2-D projection We use 3-D "homogeneous coordinates" with four components per point For 2-D, can use homogeneous coords with three components Homogeneous Coordinates or projective coordinates are a system of coordinates. They have the advantage that the coordinates of points, including points at infinity, can be represented using finite coordinates. Formulas involving homogeneous coordinates are often simpler and more symmetric. Homogeneous coordinates have a range of applications, including computer graphics and 3D computer vision, where they allow affine transformations and, in general, projective transformations to be easily represented by a matrix. If the homogeneous coordinates of a point are multiplied by a non-zero scalar then the resulting coordinates represent the same point. Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Homogeneous Coordinates A point: (x, y, z, w) where w is a "scale factor" Converting a 3D point to homogeneous coordinates: (x, y, z) (x, y, z, 1) Transforming back to 3-space: divide by w (x, y, z, w) (x/w, y/w, z/w) (3, 2, 1): same as (3, 2, 1, 1) = (6, 4, 2, 2) = (1.5, 1, 0.5, 0.5) Where is the point (3, 2, 1, 0)? Point at infinity or "pure direction., Ideal point Used for vectors (vs. points) Interactive Computer GraphicsChapter Homogeneous transformations Most important reason for using homogeneous coordinates: All affine transformations (line-preserving: translation, rotation, scale, perspective, skew) can be represented as a matrix multiplication You can concatenate several such transformations by multiplying the matrices together. Just as fast as a single transform! Modern graphics cards implement homogeneous transformations in hardware Interactive Computer GraphicsChapter Translation -Move (translate, displace) a point to a new location -Displacement determined by a vector d P=P+d Interactive Computer GraphicsChapter Scaling Note that the scaling fixed point is the origin Rotation Interactive Computer GraphicsChapter Consider rotation about the origin by degrees radius stays the same, angle increases by x = r cos ( y = r sin ( x=x cos y sin y = x sin + y cos Z = z x = r cos y = r sin Interactive Computer GraphicsChapter Rotation General rotation: about an axis v by angle u with fixed point p With origin as fixed point, about x, y, or z-axis. For rotation about x axis, x is unchanged For rotation about y axis, y is unchanged Rotation about z axis in three dimensions leaves all points with the same z Equivalent to rotation in two dimensions in planes of constant z R = R x ( ) = R = R y ( ) = R = R z ( ) = Interactive Computer GraphicsChapter Rotating about another point How can I rotate around another fixed point, e.g. [1, 2, 3]? Translate [1, 2, 3] -> 0, 0, 0 (T) to origin Rotate (R) Translate back (T -1 ) T -1 R T P = P' Interactive Computer GraphicsChapter Rotating about another axis How can I rotate about an arbitrary axis? Can combine rotations about z, y, and x: R x R y R z P = P' Note that order matters and angles can be hard to find Concatenating transformations Many transformations can be concatenated into one matrix for efficiency Canvas: transformations concatenate Set the transformation to the identity to reset Or, push/pop matrices (save/restore state) Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Example: Orbiting the Sun How to make the earth move 5 degrees? Set appropriate modeling matrix before drawing image Rotate 5 degrees, then translate What Canvas code to use? How to animate a continuous rotation? Every few ms, modify modeling matrix and redisplay Reset to original and concatenate rotation and translation How to make it spin on its own axis too? rotate, translate, rotate, draw Interactive Computer GraphicsChapter Earth & Moon solar.cx.save(); solar.cx.rotate(timefrac/365); // earth around the sun solar.cx.translate(250,0); solar.cx.save(); solar.cx.rotate(timefrac); solar.cx.drawImage(earth, -earth.width/2, earth.height/2); solar.cx.restore(); solar.cx.save(); // moon around earth solar.cx.rotate(timefrac/28); solar.cx.translate(56, 0); solar.cx.drawImage(moon, -moon.width/2, -moon.height/2); solar.cx.restore(); Moon River, wider than a mile How to make the moon follow that crazy path? Try it Interactive Computer GraphicsChapter Write a program to animate something that has moving parts that have moving parts Use both translation and rotation It should save/restore state Examples: Walking robot Person pedaling a bicycle Person waving in a moving convertible Spinning machine with moving parts Interactive Computer GraphicsChapter Project 4: Wonderfully Wiggly Working Widget Accelerometer events Safari now supports the DeviceOrientation API (W3C draft)DeviceOrientation API window.ondevicemotion = function(event) { // event.accelerationIncludingGravity.x // event.accelerationIncludingGravity.y // event.accelerationIncludingGravity.z } Interactive Computer GraphicsChapter 3D: Polgyons and stuff Interactive Computer GraphicsChapter How to display a complex object? You don't want to put all those teapot triangles in your source code Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter A JSON object format JSON: JavaScript Object Notation. * JSON uses JavaScript syntax, but the JSON format is text only, just like XML.Text can be read and used as a data format by any programming language. Object description with vertex positions and faces { "vertices" : [ 40,40,40, 60,0,60, 20,0,60, 40,0,20], "indices" : [ 0,1,2, 0,2,3, 0,3,1, 1,3,2] } ________________________________ x = data.vertices[0]; Loading an object via AJAX What do you think of this code? trackball.load = function() { var objectURL = $('#object1').val(); $.getJSON(objectURL, function(data) { trackball.loadObject(data); }); trackball.display(); } Remember the first 'A' in AJAX! Wait for the object to load before displaying it $.getJSON(objectURL, function(data) { trackball.loadObject(data); trackball.display(); }); Interactive Computer GraphicsChapter Question How to move object into the sphere centered at the origin with radius 1? Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Point normalization Find min and max values of X, Y, Z Find center point, Xc, Yc, Zc Translate center to origin (T) Scale (S) P' = S T P Modeling matrix M = S T Note apparent reversed order of matrices Question How to draw a 3-D object on a 2-D screen? Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Orthographic projection Zeroing the z coordinate with a matrix multiplication is easy Or, just ignore the Z value when drawing Interactive Computer GraphicsChapter Perspective projection Can also be done with a single matrix multiply using homogeneous coordinates Uses the divide-by-w step We'll see in next chapter Interactive Computer GraphicsChapter Transformations in the Pipeline Three coordinate frames: World coordinates (e.g. unit cube) Eye (projection) coordinates (from viewpoint) Window coordinates (after projection) Two transformations convert between them Modeling xform * world coords -> eye coords Projection xform * eye coords -> window coords Transformations in the Pipeline Viewpoint is an option for Graphics3D and related functions which gives the point in space from which three dimensional objects are to be viewed. eye cordinates >> by projection Interactive Computer GraphicsChapter Window cordinates Window cordinates :is based on the coordinate system of the display device. The basic unit of measure is the device unit (typically, the pixel). Points on the screen are described by x- and y-coordinate pairs. The x-coordinates increase to the right; y-coordinates increase from top to bottom. Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter Transformations in Canvas Maintain separate 3-D model and project matrices. Multiply vertices by these matrices before drawing polygons. Vertices are transformed as they flow through the pipeline CTM is current transformation matrices. Interactive Computer GraphicsChapter Transformations If p is a vertex, pipeline produces Cp (post- multiplication only) Can concatenate transforms in CTM: C I C T(4, 5, 6) C R(45, 1, 2, 3) C T(-4, -5, -6) [C = T -1 S T] Note that last transform defined is first applied Interactive Computer GraphicsChapter Putting it all together Load vertices and faces of object. Normalize: put them in (-1, 1, -1, 1, -1, 1) cube Put primitives into a display list Set up viewing transform to display that cube Set modeling transform to identity To spin the object, every 1/60 second do: Add 5 degrees to current rotation amount Set up modeling transform to rotate by current amount Interactive Computer GraphicsChapter Virtual Trackball Imagine a trackball embedded in the screen Rotation of three dimensional objects by a two dimensional mouse is a typical task in computer aided design. If I click on the screen, what point on the trackball am I touching? Interactive Computer GraphicsChapter Trackball Rotation Axis If I move the mouse from p 1 to p 2, what rotation does that correspond to? Interactive Computer GraphicsChapter Virtual Trackball Rotations Rotation about the axis n = p 1 x p 2 Fixed point: if you use the [-1, 1] cube, it is the origin Angle of rotation: use cross product |u v| = |u||v| sin (or use Sylvester's built-in function) n = p1.cross(p2); theta = p1.angleFrom(p2); modelMat = oldModelMat.multiply(1); // restore old matrix modelMat = Matrix.Rotation(theta,n).multiply(modelMat); Interactive Computer GraphicsChapter Virtual Trackball Program Stage 1 Read in, normalize object Display with rotation, HSR Stage 2 Virtual trackball rotations Perspective Lighting/shading Interactive Computer GraphicsChapter Hidden surface removal What's wrong with this picture? How can we prevent hidden surfaces from being displayed? Interactive Computer GraphicsChapter Hidden surface removal How can we prevent hidden surfaces from being displayed? Painter's algorithm: paint from back to front. How can we do this by computer, when polygons come in arbitrary order? Poor-man's HSR Transform points for current viewpoint Sort back to front by the face's average Z Does this always work? Interactive Computer GraphicsChapter Interactive Computer GraphicsChapter HSR Example Which polygon should be drawn first? We'll study other algorithms later Interactive Computer GraphicsChapter Data structures needed An array of vertices, oldVertices An array of normalized vertices, vertices[n][3], in the [-1, 1] cube An array for vertices in world coordinates An array of faces containing vertex indexes, int faces[n][max_sides]. Use faces[n][0] to store the number of sides. Set max_sides to 12 or so.