Slide 1

Lecture 1: Introduction and Background Slide 2 Lecturer Details Dr. Walid Khedr, Ph.D. Email: khedrw@yahoo.comkhedrw@yahoo.com Web: www.staff.zu.edu.eg/wkhedrwww.staff.zu.edu.eg/wkhedr Department of Information Technology Slide 3 Main Topics Introduction Basic principles of two-dimensional graphics Drawing lines and curves Areas, text and colors Basic principles of three-dimensional graphics Modeling three-dimensional objects Visible surface determination Illumination and shading Special effects and virtual reality Slide 4 What is Computer Graphics In general sense, computer graphics is the process of producing a picture or Image using the computer. This includes applications that start form drawing simple graphs or line drawings And ends with programs that involve complex mathematics and physics in the production of highly accurate images. Added to this is the capability to create a series of images that result in an animation. The purpose of this Course is to explore some of the basic ideas of realistic image generation. The goal then is the creation of an image by writing a program instead of taking a picture with a camera. Slide 5 Image Terminology A Pixel: is shorthand for "picture element." and it is one location in an image, whether on the computer screen or in a printout. Gray Scale Pixels: Each pixel takes one value that indicates where in the range from black to white it is. Color Pixels: Each pixel will use three values to store the range of intensities for the red, green, and blue (RGB) components. Each of those values, whether for a gray scale or color image, can be expressed as either: A floating point number values between 0.0 and 1.0 An integer range Most graphics systems use either one or two bytes per value i.e. zero to 255, or zero to 65,535. The alpha-channel: Indicates the transparency of the pixel Slide 6 Image Terminology, Cont. The pixels of an image are organized into a two- dimensional grid that is called a frame buffer and is frequently used as a two-dimensional array Graphics hardware has enough memory to store multiple frame buffers, which is useful for animation and game programs (a process called double buffering) The goal of realistic image creation is to calculate a collection of pixel values that when viewed creates the impression of a picture. Slide 7 Image Terminology: Double Buffering Slide 8 The Rendering (Graphics) Pipeline There is a wide range of different applications of computer graphics, but there are common elements in all of these applications. They all begin with data and that data is then used to create (or "render") an image, which is then displayed on a computer screen. The process going from data to image is called the graphics pipeline Slide 9 9 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Slide 10 10 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Transform into 3D camera coordinate system Done with modeling transformation Slide 11 11 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Transform into 3D camera coordinate system Done with modeling transformation Illuminate according to lighting and reflectance Apply texture maps Slide 12 12 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Illuminate according to lighting and reflectance Apply texture maps Transform into 2D screen coordinate system Transform into 3D camera coordinate system Done with modeling transformation Slide 13 13 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Clip primitives outside cameras view Transform into 2D screen coordinate system Transform into 3D camera coordinate system Done with modeling transformation Illuminate according to lighting and reflectance Apply texture maps Slide 14 14 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion Transform into 3D world coordinate system Draw pixels (includes texturing, hidden surface,...) Clip primitives outside cameras view Transform into 2D screen coordinate system Transform into 3D camera coordinate system Done with modeling transformation Illuminate according to lighting and reflectance Apply texture maps Slide 15 15 3D Rendering Pipeline Modeling Transformation Modeling Transformation Lighting & Texturing Lighting & Texturing Projection Transformation Projection Transformation Viewing Transformation Viewing Transformation 3D Geometric Primitives Image Clipping Scan Conversion Scan Conversion 3D 2D Slide 16 16 The Rendering Pipeline: A Tour Modeling Transform Illuminate Viewing Transform Clip Project Rasterize Model & Camera Parameters Rendering Pipeline FramebufferDisplay Slide 17 17 The Parts You Know Model & Camera Parameters Rendering Pipeline FramebufferDisplay Modeling Transform Illuminate Viewing Transform Clip Project Rasterize Slide 18 18 The Rendering Pipeline Model & Camera Parameters Rendering Pipeline FramebufferDisplay Modeling Transform Illuminate Viewing Transform Clip Project Rasterize Slide 19 19 Well talk about this soon 2-D Rendering: Rasterization Model & Camera Parameters Rendering Pipeline FramebufferDisplay Modeling Transform Illuminate Viewing Transform Clip Project Rasterize Slide 20 20 The Rendering Pipeline: 3-D Model & Camera Parameters Rendering Pipeline FramebufferDisplay Modeling Transform Illuminate Viewing Transform Clip Project Rasterize Slide 21 The Graphics Pipeline, Cont. In the case of realistic image generation, the three main stages for computer generated image are modeling, rendering, and display Slide 22 Modeling Before an image can be created, a model of the scene is developed. The model needs to give the details of each of the objects Shape Simple Complex Parameters specifying the object's materials The object color What the object is made Of Whether the object is shiny, transparent, etc. Slide 23 Rendering Rendering is the process of generating an image from a model, by means of computer programs. The rendering process includes: Geometric Transformations (Affine Transformations) Clipping Scan Conversion Illumination Shading Slide 24 Image Display One issue with the display of an Image is differences with output capability/ Each company that manufactures a computer monitor or a color printer uses unique components. CRT Monitors LCD Monitors Plasma Monitors Those components differ in how they produce their output, which means that one image can appear differently when displayed on two different monitors This issue is called "color reproduction." This topic is complex and well beyond the scope of this course Slide 25 Real Scene Image Real scene whose details/objects have to be modelled. Slide 26 Real Scene Image Model of the scene: in which the objects of the real scene are represented by the available modelling techniques. The true geometry might only be approximated by the model. Slide 27 Real Scene Image Choice of a view/part of the virtual world to be displayed. Clipping: Computation which objects are within the chosen view. Visibility considerations: Which objects in the clipping region are visible for the viewer, i.e. are not hidden from view by other objects? Slide 28 Real Scene Image Result: pixel image Slide 29 Reading JAVA Chapter 1 Slide 30 Background Math Review Java Review Slide 31 Math Review Slide 32 32 Matrices Applications in many areas Rectangular array 2D array Size Colour smallmediumlargeXlarge Black60100150120 White25486010 Gray10093140170 Navy7594140170 Red80 600 Slide 33 33 Definitions A matrix is a rectangular array of elements (usually numbers) arranged in rows and columns enclosed in brackets. Order of the matrix is the number of rows and columns. A is a 32 matrix, B is a 33 matrix C is a 41 matrix. Matrices are denoted by capital letters while their elements are written as lower case letters as in example C above. We refer to a particular element by using notation that refers to the row and column containing the element, i.e. a 21 =-1, b 32 = 1, c 21 = b. Two matrices A and B are said to be equal, written A = B, if they have the same order and a ij = b ij for every i and j. Slide 34 34 Type of Matrices Square matrix a matrix with an equal number of rows and columns. Diagonal matrix a square matrix with zeros everywhere except down the leading diagonal. Unit matrix (identity matrix) a diagonal matrix with ones down the leading diagonal. The identity matrix is denoted with the letter I. Slide 35 35 Type of Matrices (continue) Zero matrix a matrix with zeros everywhere, denoted by O. Symmetric matrix a square matrix whose (ij) th element is the same as the (ji) th element for all i and j. Row matrix (row vector) a matrix with only one row, i.e. its order is 1m. Column matrix (column vector) a matrix with only one column, i.e. an n1 matrix. Slide 36 36 Matrix Addition and Subtraction If A and B are two nm matrices then their sum C = A + B is the nm matrix with c ij = a ij + b ij their difference C = A - B is the nm matrix with c ij = a ij - b ij Examples: Slide 37 37 Scalar Multiplication of Matrices If A is an nm matrix and k is a real number, then the scalar multiple C = kA is the nm matrix where c ij = ka ij. Slide 38 38 The Transpose of a Matrix If A is a matrix then the transpose of A is the matrix A t where a t ij = a ji. Slide 39 39 Matrix Multiplication If A is an nm matrix and B is an mp matrix then the product of A and B, C = AB, is an np matrix C ij = (row i of A) (column j of B) = a i1 b 1j + a i2 b 2j + a i3 b 3j + a in b jp Slide 40 40 Properties If a, b are scalars and A, B, C are matrices of the same dimension (order) then A + B = B + A A + (B + C) = (A + B) + C a(bA) = (ab)A (a + b)A = aA + bA a(A + B) = aA + aB a(A - B) = aA - aB A + OA = A, and aO = O (A + B) t = A t + B t (A - B) t = A t - B t Slide 41 41 Properties If a, b are scalars and A, B, C are matrices of the same dimension (order) then assuming that the matrix dimensions are such that the products in each of the following are defined, then we have: AB BA A(BC) = (AB)C (A + B)C = AC + BC A(B + C) = AB + AC OA = O, AO = O (aA)(bB) = abAB IA = AI = A (AB) T = B T A T Slide 42 42 Inverse of a 22 Matrix Not all Matrices have an inverse. The Determinant determines if a matrix has an inverse or not. If the determinant of a matrix A is zero then the matrix has no inverse. Example: Slide 43 43 Inverse of a 22 Matrix If A is a matrix then it is possible to find another matrix, called A -1, such that AA -1 = I or A -1 A = I. Example: Slide 44 44 Solution of Systems of Simultaneous Equations A x = b Ax = b A -1 Ax = A -1 b x = A -1 b Slide 45 45 A x = b Slide 46 46 Inverse of a 33 matrix Slide 47 47 Inverse of a 33 matrix (example) Slide 48 48 Dimension of a Space is the amount of freedom of movement that objects within the space have.0D 2D y x3D y x z 1D x Slide 49 49 3D Coordinate Systems y x z y x z Right-handed system (z comes out) Left-handed system (z goes in) Slide 50 50 Distance 1D P1P1 P2P2 2D y x 3D y x z P1P1 P2P2 P1P1 P2P2 Slide 51 51 Trigonometry 3 5 ? ? ? 10 20 Slide 52 52 Equation of the Line y x c (x1,y1)(x1,y1) (x2,y2)(x2,y2) Slide 53 53 Equation of a circle at (0,0) Cartesian form Polar form (0, 0) r (x,y) Slide 54 54 Equation of a circle at (x c,y c ) r (x c,y c ) r (x,y) Cartesian form Polar form Slide 55 55 Positions (points) & Directions (vectors) A vector is the difference between two points, i.e. vector = point 2 point 1 v = P 2 P 1 = (4, 3, 1) (2, 1, 2) = (2, 2,-1) point 2 = point 1 + vector P 2 = P 1 + v = (2, 1, 2) + (2, 2,-1) = (4,3,1) y z v=(x,y,z)=(2,2,-1) x P 1 =(2,1,2) P 2 =(4,3,1) Slide 56 56 Addition of Vectors v 1 = (x 1, y 1, z 1 ) v 2 = (x 2, y 2, z 2 ) v 1 + v 2 = (x 1 + x 2, y 1 + y 2, z 1 + z 2 ) (0, 0, 0) (x 2, y 2, z 2 ) (x 1, y 1, z 1 ) (x 1 +x 2, y 1 +y 2, z 1 +z 2 ) Slide 57 57 Length of a vector Norm of a vector Only interested on the direction and not in its length. So norm(v) has the same direction but length 1. Slide 58 58 Inner (dot) product of two vectors The dot-product, denoted by v 1 v 2, is the angular relationship between two vectors: Normalizing each of the vectors v 1 and v 2 and then take the dot-product of the normalized vectors we find which is the angle between the two vectors. The dot product of a unit length vector with itself is 1. Vectors that are perpendicular to one another (called orthogonal) have a zero dot product. Slide 59 59 Exercise Find the angle between vectors (3,7) and (-4,5). y x (-4,5)(3,7) Slide 60 60 The cross-product, denoted by v 1 v 2, is the vector: v 1 v 2 is orthogonal to both v 1 and v 2, i.e. v 1 and v 2 form a plane and their cross product is normal to that plane. How to remember the formula: Vector cross-product v1v1 v2v2 v1v2v1v2 v1v1 v2v2 -v 1 v 2 = v 2 v 1 Properties: Slide 61 Next Lecture Chapter 2: Basic principles of two-dimensional graphics