OpenGL Rendering Process PDF

DEBARK UNIVERSITY Chapter 3 Rendering Process with OpenGL 1  What is OpenGL? OpenGL (Open Graphics Library)  an Application Programming Interface (API) that allows the programmer to create 2D and 3D graphics images,  It generate high-quali...

DEBARK UNIVERSITY Chapter 3 Rendering Process with OpenGL 1  What is OpenGL? OpenGL (Open Graphics Library)  an Application Programming Interface (API) that allows the programmer to create 2D and 3D graphics images,  It generate high-quality color images by rendering with geometric and image primitives  A number of windowing toolkits have been developed for use with OpenGL 2 Cont… OpenGL is based on GL graphics package developed by the graphics hardware manufacturer Silicon Graphics o GL was a popular package but it was specific to Silicon Graphics systems, i.e. code written using GL would only run on Silicon Graphics hardware o to overcome this limitation, OpenGL was developed in the early 1992 as a free platform-independent version of GL OpenGL is the core library that contains the majority of the functionality (around 130 graphics drawing and operation functions), there are a number of associated libraries that are also useful. 3 The Role of OpenGL in the Reference Model  OpenGL (Open Graphics Library) is a cross-platform, hardware-accelerated, language-independent, industrial standard API for producing 3D (including 2D) graphics.  Modern computers have dedicated GPU (Graphics Processing Unit) with its own memory to speed up graphics rendering.  It is a ,  )for rendering and. 4 Cont…  You should make sure that you have access to a C++ development environment that supports these two libraries (OpenGL & glut)  Two possibilities are:  free Dev-C++ environment (www.bloodshed.net) has OpenGL built-in and glut can be easily added on as a separate package  Microsoft Visual C++ also has OpenGL built-in but not glut. The glut library is available as a free download from:- http://www.xmission.com/~nate/glut.html 5  Related Graphics Libraries  glut (GL Utilities Toolkit): contains some extra routines for drawing 3-D objects & other primitives  Using glut with OpenGL enables us to write windows- system independent code  glu (OpenGL Utilities): contains some extra routines for projections and rendering complex 3-D objects  glui (OpenGL User Interface): contains some extra routines for creating user-interfaces  provides controls such as buttons, checkboxes, radio buttons,.. to OpenGL applications 6 Cont…  Every routine provided by OpenGL or associated libraries follows the same basic rule of syntax:  prefix of the function name is either gl, glu, or glut depending on which of these 3 libraries. o the routine is from main part of the function name indicates the purpose of the function.  suffix of the function name indicates the number and type of arguments expected by the function  eg., suffix 3f  3 floating point arguments are expected  Some function arguments can be supplied as predefined symbolic constants – are always in capital letters, and have the same prefix convention as function names  E.g., GL_RGB, GL_POLYGON and GLUT_SINGLE used by OpenGL and its associated libraries 7 Cont…  OpenGL has a number of built-in data types to help make it into a platform-independent package  Mostly, they have the same names as C++ data types but with the prefix GL attached  E.g., GLshort, GLint, GLfloat& GLdouble – are built-in OpenGL data types  Although you will find that your OpenGL code will still work on your computer if you do not use these data types, it will not be as portable to other platforms so it is recommended that you do use them.  #include  Include glut automatically includes other header files 8  Getting Started with OpenGL  To start writing OpenGL programs is exactly which header files to include depends upon which library(s) are being used  For example: o if we only using the core OpenGL library, then add: #include o If we also want to use the GL Utilities library,: #include o For the glui user-interface library we must add: #include o If we want to use the glut library (and this makes using OpenGL a lot easier) we do not need to include the OpenGL or glu header files #include 9  Cont… The following lines initialise the glut library:  glutInit(&argc, argv); // we must call this function before any others in our glut/OpenGL program  glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE ); // type of frame buffer we want to have, ask for a double RGB frame buffer  glutInitWindowSize(640, 480); // sets the size of the display window in pixels  glutInitWindowPosition(10, 10); // sets the position at 10, 10 of the top-left corner of the display window measured in pixels  glutCreateWindow( “GLUT Points Demo” ); // creates the display window with the attributes defined by the previous calls 10  OpenGL Event Loop  OpenGL is an event-driven package  means that it always executes code in response to events code that is executed is known as a callback function, and it must be defined by the programmer E.g., mouse clicks & keyboard presses - events  The most important event is the display event occurs whenever OpenGL decides that it needs to redraw.  To specify a callback function we must first write a programmer-defined function, and then specify that this function should be associated with a particular event  glutDisplayFunc(myDisplay);  To start the event loop we write:  glutMainLoop(); 11  OpenGL Initialization Routines  OpenGL graphics package is a state system means that it maintains a list of state variables, or state parameters, which will be used to define how primitives will be drawn  These state variables are specified separately, before the primitives are drawn o E.g., if we want to draw a red point, we first set drawing colour state variable to red, and then we draw the point  so before we draw the points we assign values for three state variables:  glClearColor(1.0, 1.0, 1.0, 0.0); // background color to white and alpha value (opacity) of background color  glColor3f(0,0,0); // defines drawing color to be black  glPointSize(4.0); // sets the point size to 4 pixels 12  OpenGL Coordinate system  In a 2-D coordinate system, the X axis generally points from left to right, and the Y axis generally points from bottom to top. (Although some windowing systems will have their Y coordinates going from top to bottom).  When we add the third coordinate Z, we have a choice as to whether the Z-axis points into the screen or out of the screen  In Right Hand Coordinate System (RHS), Z is coming out of the screen and in Left Hand Coordinate System (LHS), Z is going into the screen. Generally OpenGL uses a right-hand coordinate system 13 Con…  In a typical graphics program, we need to a number of different coordinate systems, conversion of coordinates from one system to another is very important  Model Coordinate System is defined as reference space of the model with respect to which all the model geometrical data is stored. The origin of MCS can be arbitrary chosen by the user. 14 Con…  World Coordinate System As discussed above every object has its own MCS relative to which its geometrical data is stored.  In case of multiple objects in the same working space then there is need of a World Coordinate System which relates each MCS to each other with respect to the orientation of the WCS. It can be seen by the picture shown above 15  Cont… Hierarchical Coordinate Systems Sometimes objects in a scene are arranged in a hierarchy,  so that the "position" of one object in the hierarchy is relative to its parent in the hierarchy scheme, rather than to the world coordinate system.  For example, a hand may be positioned relative to an arm, and the arm relative to the torso.  When the arm moves, the hand moves with it, and when the torso moves, all three objects move together. 16 Cont…  Viewpoint Coordinate System Also known as the "camera" coordinates system.  This coordinate system is based upon the viewpoint of the observer, and changes as they change their view.  Model Window (Screen) Coordinate System This coordinate system refers to the subset of the overall model world that is to be displayed on the screen.  Depending on the viewing parameters selected, the model window may be rectilinear or a distorted viewing frustum of some kind.  This 2D coordinate system refers to the physical coordinates of the pixels on the computer screen, based on current screen resolution 17  Cont… Viewport Coordinate System This coordinate system refers to a subset of the screen space where the model window is to be displayed.  Typically the viewport will occupy the entire screen window, or even the entire screen, but it is also possible to set up multiple smaller viewports within a single screen window.  The World coordinate positions in the scene are transformed to viewing coordinates, and then viewing coordinates are projected onto the view plan 18 Cont… 19  Contd… routines in the display function:  glutWindowSize(640, 480); // sets the size of the display window in pixels  glClear // to clear the screen before drawing  glBegin, glVertex2i, glEnd // this sequence of commands draws a number of point primitives  glBegin … glEnd pair of commands  used to draw many different types of primitive in OpenGL, with the symbolic constant argument to glBegin defining how the vertices in between should be interpreted  GL_POINTS means that each vertex should be considered to be a point primitive  glFlush // tells OpenGL to „flush‟ the buffer, i.e. to draw any primitives now to the frame buffer 20  Sample #include Program #include void myInit(void) { glClearColor(1.0, 1.0, 1.0, 0.0); // white background glColor3f(0,0,0); // black foreground glPointSize(4.0); // size of points to be drawn // establish a coordinate system for the image glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 640.0, 0.0, 480.0); } void display(void) { glClear(GL_COLOR_BUFFER_BIT); // Clear Screen glBegin(GL_POINTS); // draw 3 points glVertex2i(100,50); glVertex2i(100,130); glVertex2i(150,130); glEnd(); glFlush(); // send all output to the display 21 }  Sample Program int main(int argc, char *argv[]) { glutInit(&argc, argv); // initialise the glut library glutInitWindowSize(640,480); // set size of the window glutInitWindowPosition(10,10); // position of window glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutCreateWindow("GLUT Points demo"); glutDisplayFunc(display); // set display callback myInit(); // perform other initialisation glutMainLoop(); // enter the GL event loop return EXIT_SUCCESS; } 22 Cont… Single or Double Buffering  GLUT_SINGLE & GLUT_DOUBLE specify whether we want to use single or double buffering respectively  In raster graphics systems, whatever is written to the frame buffer is immediately transferred to the display - repeated frequently (30 – 60 times a second)  To do this a typical approach is to first erase the old contents by setting all the pixels to some background color, i.e. black - after, the new contents are drawn Double buffering:  two separate: front buffer and back buffer  front buffer for displaying & back buffer for drawing  swapping to update the image 23 Contd… Depth buffer  Is needed in 3-dimensional graphics for hidden surface removal  Use a special array called depth buffer.  In OpenGL, we use GLUT_DEPTH for this purpose 24  GLUT Callback Functions Event-driven: Programs that use windows - Input/Output - Wait until an event happens and then execute some pre-defined functions according to the user‟s input Events – key press, mouse button press and release, display, window resize, animation, etc. Callback function : Routine to call when an event happens - Window resize or redraw - User input (mouse, keyboard) - Animation (render many frames) 25  Cont… “Register” input callbacks functions with GLUT - glutDisplayFunc( display ); - glutIdleFunc( idle ); - glutKeyboardFunc( keyboard ); - glutMouseFunc( mouse); 26  Events in OpenGL Event Example OpenGL Callback Function Key press Key Down glutKeyboardFunc Key Up Mouse Left Button Down glutMouseFunc Left Button Up Motion With mouse press glutMotionFunc Without glutPassiveMotionFunc Window Moving glutReshapeFunc Resizing System Idle glutIdleFunc Timer glutTimerFunc Software What to draw glutDisplayFunc 27  Rendering Callback Callback function where all our drawing is done Every GLUT program must have a display callback glutDisplayFunc( display ); void display( void ) { glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE ); glVertex3fv( v ); glVertex3fv( v ); glVertex3fv( v ); glEnd(); glFlush(); } 28 Mouse Callback glutMouseFunc(myMouse); void myMouse(GLint button, GLint state, GLint x, GLint y)  button specifies which mouse button was pressed : GLUT_LEFT_BUTTON, GLUT_RIGHT_BUTTON, or GLUT_MIDDLE_BUTTON  state of that button GLUT_UP, GLUT_DOWN  position in window x and y: screen coordinates of mouse position (origin at top-left corner) when the event occurred 29 Cont… Captures mouse press and release events glutMouseFunc( my_mouse); void my_mouse( int button, int state, int x, int y ) { If (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { … } } 30  Menu GLUT provides pop-up menu features that we can use with the mouse to create sophisticated interactive applications We must link the menu to a particular mouse button (left, right or middle) Finally, we must define a callback function corresponding to each menu entry function calls to set up the menu and to link it to the mouse button should be placed in main func. 31 Cont… int main(){ glutCreateMenu(menu); glutAddMenuEntry(“Square", 1); glutAddMenuEntry(“Triangle", 2); glutAttachMenu(GLUT_RIGHT_BUTTON); ….. } void menu(GLint option) { if (option == 1) //statement else //statements } 32 Contd… GLUT also supports hierarchical menus - Submenu to pop up sub_menu = glutCreateMenu(polygon); glutAddSubMenu(“Polygon", sub_menu) glutAddMenuEntry(“Square", 1); glutAddMenuEntry(“Triangle", 2); glutAttachMenu(GLUT_RIGHT_BUTTON); 33  Keyboard Event Link a keyboard key with a routine that‟s invoked when key is pressed key is the ASCII value of the key that was pressed GLUT_KEY_LEFT, GLUT_KEY_RIGHT … (Arrow keys) x and y: screen coordinates of cursor position (origin at top-left corner) when a key is pressed glutKeyboardFunc( keyboard ); void keyboard( unsigned GLchar key, GLint x, GLint y ) { switch( key ) { case ‘q’ : case ‘Q’ : exit( EXIT_SUCCESS ); break; } } 34  Reshape Functions Indicates what action should be taken when the window is resized glutReshapeFunc(myReshape); myReshape(int, int)  “reshape” event o automatically passed arguments that report the new width and height of the reshape window o This function manages any changes needed in the view setup to accommodate the reshape window o Parameter: width & height of the window after it has been changed 35  Viewing Using a Synthetic Camera  Synthetic camera is a type of rendering technique that seeks to replicate the characteristics  especially the distortions (e.g. out of focus, aberration) of a real camera or the human eye,  rather than the perfectly sharp achromatic pictures usually produced by computer graphics. 36  Cont… Synthetic camera paradigm  position of camera  area of interest (direction camera lens is pointed in)  orientation (which way is up)  field of view (wide angle, normal...)  depth of field (clipping planes, sort of)  tilt of view/film plane (if not normal to view direction)  perspective or parallel projection? (camera near objects or an infinite distance away) 37 Output Primitives and Attributes 38  Output Primitives Graphics primitives: All graphics packages construct pictures from basic building blocks Output Primitives: Basic geometric structures (points, straight line segment, circles and other conic sections, quadric surfaces, spline curve and surfaces, polygon color areas, and character strings) 39  Cont… Geometric primitives: primitives or routines to describe the geometry (i.e. shape) of objects (components of the scene), e.g. Point drawing, Line drawing, Polygon drawing,…  can be 2-D (points, lines, quadrilaterals, & general polygons) and more complex 3-D primitives (spheres and polyhedral (made from mesh of 2-D polygons)) All of these primitives are specified using sequence of vertices 40  Attributes? Attribute – any parameter that affects the way a primitive will be displayed e.g.: Colour, type, line thickness, fill style, etc. OpenGL maintain a list of current state variables that are used to modify the appearance of each primitive as it is displayed state variables represent attributes of the primitives All OpenGL state variables have default values Remain in effect until new values specified Some state variables can be changed within glBegin() … glEnd() pairs 41 Cont… Output Primitive Attributes Point Size Color Line Thickness (1pt, 2pt …) Type (Dashed, Dotted, Solid) Color Text Font (Arial, Courier, Times Roman…) Size (12pt, 16pt..) Spacing Orientation (Slant angle) Style (Bold, Underlined, Double lined) Color Filled Region Fill Pattern Fill Type (Solid Fill, Gradient Fill) Fill Color Images Color Depth (Number of bits/pixel) 42 43 Chapter 4: Geometry and Line Generation Point and Lines, DDA and Bresenham’s algorithm  Cont… 3 Point Drawing in OpenGL Line Drawing Algorithms Fill-Area Primitives  OpenGL Drawing Primitives 4 1. Point Drawing in OpenGL ⚫ Basic type of primitive we use  The pair of functions glBegin … glEnd  Symbolic constant GL_POINTS ⯍ to specify how the vertices in between should be interpreted  glPointSize can be used ⯍to set the size of the points in pixels ⯍ default point size is 1 pixel. ⚫ Ex. code draws three 2-D points with a size of 2 pixels.  5 Point Drawing in OpenGL Point Drawing in ⚫ glPointSize(2.0); OpenGL ⚫ glBegin(GL_POINTS); Line Drawing  glVertex2f(100.0, 200.0); Algorithms  glVertex2f(150.0, 200.0); Circle Drawing  glVertex2f(150.0, 250.0); Algorithms ⚫ glEnd(); Fill-Area Primitives ⚫ GL_POINTS : specify how the vertices between should be interpreted ⚫ There is only 3D in OpenGL.  2D + constant Z coordinate  6 2. Line Drawing algorithms Point Drawing in OpenGL ⚫ Are represented by the two end-points Line Drawing of the line. Algorithms ⚫ Line must satisfy the following slope- Circle Drawing intercept equation: Algorithms  y = mx + c ⚫ m is the slope and c is the coordinate Fill-Area Primitives at which the line intercepts y-axis.  7 Lines Point Drawing in OpenGL Line Drawing Algorithms Fill-Area Primitives   y0  c  y m yend  mx 0 xend  x0  0  8 2. Line Drawing algorithms Point Drawing in OpenGL ⚫ For any given x-interval δx, we can Line Drawing calculate the corresponding y-interval Algorithms δy: Circle Drawing  δy = m.δx Algorithms  δx = (1/m).δy Fill-Area Primitives ⚫ These equations are a basis for the two types of line-drawing algorithms.  9 Digital Differential Analyzer Algorithm ⚫ Given (x0,y0) and (xend,yend) ⚫ Compute m Point Drawing in OpenGL ⚫ If |m| ≤ 1:  δx = 1 Line Drawing  δy = m Algorithms ⚫ If |m| > 1:  δx = 1/m DDA Algorithm  δy = 1 ⚫ Paint (x0,y0) ⚫ Find successive pixel positions Bresenham’s  xk+1 = (xk + δx) Algorithm  yk+1 = (yk + δy) ⚫ For each position (xk,yk) plot a line point at  (round(xk),round(yk))  10 Digital Differential Analyzer Algorithm Example Point Drawing in ⚫ Given (x0,y0) = (10,10) m yend  y0   (1310)  3  0.6 OpenGL ⚫ and (xend,yend) = (15,13) xend  x0  (1510) 5 ⚫ Compute m Line Drawing ⚫ If |m| ≤ 1: Algorithms  δx = 1 δx = 1  δy = m δy = 0.6 ⚫ If |m| > 1: DDA Algorithm  δx = 1/m  δy = 1 Bresenham’s ⚫ Paint (x0,y0) (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  11 Digital Differential Analyzer Algorithm Example Point Drawing in ⚫ Given (x0,y0) = (10,10) m yend  y0   (1310)  3  0.6 OpenGL ⚫ and (xend,yend) = (15,13) xend  x0  (1510) 5 ⚫ Compute m Line Drawing ⚫ If |m| ≤ 1: Algorithms  δx = 1 δx = 1  δy = m δy = 0.6 ⚫ If |m| > 1: DDA Algorithm  δx = 1/m  δy = 1 Bresenham’s ⚫ Paint (x0,y0) (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  12 Digital Differential Analyzer Algorithm Example ⚫ Paint (x0,y0) δx = 1 Point Drawing in ⚫ Find successive pixel δy = 0.6 OpenGL positions  xk+1 = (xk + δx) Line Drawing  yk+1 = (yk + δy) (x1,y1) = (10+1,10+0.6) Algorithms = (11,10.6) ⚫ For each position (xk,yk) plot a line point at colour pixel (11,11) DDA Algorithm  (round(xk),round(yk)) Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  13 Digital Differential Analyzer Algorithm Example ⚫ Paint (x0,y0) δx = 1 Point Drawing in ⚫ Find successive pixel δy = 0.6 OpenGL positions  xk+1 = (xk + δx) Line Drawing  yk+1 = (yk + δy) (x2,y2) = (11+1,10.6+0.6) Algorithms = (12,11.2) ⚫ For each position (xk,yk) plot a line point at colour pixel (12,11) DDA Algorithm  (round(xk),round(yk)) Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  14 Digital Differential Analyzer Algorithm Example ⚫ Paint (x0,y0) δx = 1 Point Drawing in ⚫ Find successive pixel δy = 0.6 OpenGL positions  xk+1 = (xk + δx) Line Drawing  yk+1 = (yk + δy) (x3,y3) = (12+1,11.2+0.6) Algorithms = (13,11.8) ⚫ For each position (xk,yk) plot a line point at colour pixel (13,12) DDA Algorithm  (round(xk),round(yk)) Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  15 Digital Differential Analyzer Algorithm Example ⚫ Paint (x0,y0) δx = 1 Point Drawing in ⚫ Find successive pixel δy = 0.6 OpenGL positions  xk+1 = (xk + δx) Line Drawing  yk+1 = (yk + δy) (x4,y4) = (13+1,11.8+0.6) Algorithms = (14,12.4) ⚫ For each position (xk,yk) plot a line point at colour pixel (14,12) DDA Algorithm  (round(xk),round(yk)) Bresenham’s (xend,yend) = (15,13) Algorithm Circle Drawing Algorithms Fill-Area Primitives (x0,y0) = (10,10)  16 Digital Differential Analyzer Algorithm Example ⚫ Paint (x0,y0) δx = 1 Point Drawing in ⚫ Find successive pixel δy = 0.6 OpenGL positions  xk+1 = (xk + δx) Line Drawing  yk+1 = (yk + δy) (x5,y5) = (14+1,12.4+0.6) Algorithms = (15,13) ⚫ For each position (xk,yk) plot a line point at colour pixel (15,13) DDA Algorithm  (round(xk),round(yk)) Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  17 Bresenham’s Line-Drawing Algorithm ⚫ |m| < 1 Point Drawing in OpenGL ⚫ Plot (x0,y0) ⚫ Compute the first Line Drawing decision variable: Algorithms p0  2y  x ⚫ For each k, starting with DDA Algorithm k=0:  If pk < 0: Bresenham’s ⯍ Plot (xk+1,yk) Algorithm pk1  pk  2y  Otherwise: ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x  18 Bresenham’s Line-Drawing Algorithm ⚫ |m| < 1 ⚫ |m| > 1 Point Drawing in OpenGL ⚫ Plot (x0,y0) ⚫ Plot (x0,y0) ⚫ Compute the first ⚫ Compute the first Line Drawing decision variable: decision variable: Algorithms p0  2y  x p0  2X  Y ⚫ For each k, starting with ⚫ For each k, starting with DDA Algorithm k=0: k=0:  If pk < 0:  If pk < 0: Bresenham’s ⯍ Plot (xk+1,yk) ⯍ Plot (xk+1,yk) Algorithm pk1  pk  2y pk1  pk 2X  Otherwise:  Otherwise: ⯍ Plot (xk+1,yk+1) ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x pk 1  pk  2X  2Y  19 Bresenham’s Line-Drawing Algorithm Example ⚫ |m| < 1 m = 0.6 < 1 Point Drawing in OpenGL ⚫ Plot (x0,y0) ⚫ Compute the first Line Drawing decision variable: Algorithms p0  2y  x DDA Algorithm Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  20 Bresenham’s Line-Drawing Algorithm Example ⚫ |m| < 1 m = 0.6 < 1 Point Drawing in OpenGL ⚫ Plot (x0,y0)  Δx = 5 ⚫ Compute the first  Δy = 3 Line Drawing decision variable:  2Δy = 6 Algorithms p0  2y  x  2Δy - 2Δx = -4 DDA Algorithm p0  2y  x  235 1 Bresenham’s (xend,yend) = (15,13) Algorithm (x0,y0) = (10,10)  21 Bresenham’s Line-Drawing Algorithm Example m = 0.6 < 1 ⚫ |m| < 1  Δx = 5 Δy = 3 2Δy = 6 Point Drawing in ⚫ Plot (x0,y0)  2Δy - 2Δx = -4 OpenGL ⚫ For each k, starting with p0 ≥ 0, so Line Drawing k=0: Plot (x1,y1) = (x0+1,y0+1) = Algorithms  If pk < 0: (11,11) ⯍ Plot (xk+1,yk) p1  p0 2y 2x DDA Algorithm pk1  pk  2y 14  3 Bresenham’s  Otherwise: (xend,yend) = (15,13) Algorithm ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x (x0,y0) = (10,10)  22 Bresenham’s Line-Drawing Algorithm Example m = 0.6 < 1 ⚫ |m| < 1  Δx = 5 Δy = 3 2Δy = 6 Point Drawing in ⚫ Plot (x0,y0)  2Δy - 2Δx = -4 OpenGL ⚫ For each k, starting with p1 < 0, Line Drawing k=0: Plot (x2,y2) = (x1+1,y1) = Algorithms  If pk < 0: (12,11) ⯍ Plot (xk+1,yk) p 2  p1  2  y DDA Algorithm pk1  pk  2y  3  6  3 Bresenham’s  Otherwise: (xend,yend) = (15,13) Algorithm ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x (x0,y0) = (10,10)  23 Bresenham’s Line-Drawing Algorithm Example m = 0.6 < 1 ⚫ |m| < 1  Δx = 5 Δy = 3 2Δy = 6 Point Drawing in ⚫ Plot (x0,y0)  2Δy - 2Δx = -4 OpenGL ⚫ For each k, starting with p2 ≥ 0, Line Drawing k=0: Plot (x3,y3) = (x2+1,y2+1) Algorithms  If pk < 0: = (13,12) ⯍ Plot (xk+1,yk) p3  p2  2y  2x DDA Algorithm pk1  pk  2y  3  4  1 Bresenham’s  Otherwise: (xend,yend) = (15,13) Algorithm ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x (x0,y0) = (10,10)  24 Bresenham’s Line-Drawing Algorithm Example m = 0.6 < 1 ⚫ |m| < 1  Δx = 5 Δy = 3 2Δy = 6 Point Drawing in ⚫ Plot (x0,y0)  2Δy - 2Δx = -4 OpenGL ⚫ For each k, starting with p3 < 0, Line Drawing k=0: Plot (x4,y4) = (x3+1,y3) = Algorithms  If pk < 0: (14,12) ⯍ Plot (xk+1,yk) DDA Algorithm p4  p3  2y pk1  pk  2y  1  6  5 Bresenham’s  Otherwise: (xend,yend) = (15,13) Algorithm ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x (x0,y0) = (10,10)  25 Bresenham’s Line-Drawing Algorithm Example m = 0.6 < 1 ⚫ |m| < 1  Δx = 5 Δy = 3 2Δy = 6 Point Drawing in ⚫ Plot (x0,y0)  2Δy - 2Δx = -4 OpenGL ⚫ For each k, starting with p4 ≥ 0, Line Drawing k=0: Plot (x5,y5) = (x4+1,y4+1) Algorithms  If pk < 0: = (15,13) ⯍ Plot (xk+1,yk) DDA Algorithm pk1  pk  2y Bresenham’s  Otherwise: (xend,yend) = (15,13) Algorithm ⯍ Plot (xk+1,yk+1) pk 1  pk  2y  2x (x0,y0) = (10,10)  26 Bresenham’s vs. DDA Point Drawing in ⚫ They plot the same pixels OpenGL ⚫ DDA is simple and easy to implement. Line Drawing Algorithms ⚫ It involves floating point operations to DDA Algorithm calculate each new point.  Time-consuming Bresenham’s Algorithm  27 Bresenham’s vs. DDA… ⚫ Bresenham’s algorithm is more Point Drawing in OpenGL efficient than DDA Line Drawing Algorithms ⚫ Bresenham’s algorithm use only DDA Algorithm integer operations ⚫ Bresenham’s algorithm preferable for Bresenham’s Algorithm line drawing than DDA in computer Graphics.  28 OpenGL Line Drawing Point Drawing in OpenGL ⚫ We can draw straight-lines in OpenGL Line Drawing using glBegin … glEnd functions. Algorithms ⚫ We can draw different types of straight- DDA Algorithm line using different symbolic constant. Bresenham’s  Examples: Algorithm ⯍ GL_LINES ⯍ GL_LINE_STRIP ⯍ GL_LINE_LOOP  29 OpenGL Line Drawing… Point Drawing in For example: OpenGL Glint p1[] = {200,100}; Glint p2[] = {50,0} Glint p3[] = {100,200}; Glint p4[] = {150,0}; Glint p5[] = {0,100}; Line Drawing  They will draw separate line segments Algorithms glBegin(GL_LINES); DDA Algorithm glVertex2iv(p1); glVertex2iv(p2); glVertex2iv(p3); glVertex2iv(p4); Bresenham’s glVertex2iv(p5); (GL_LINE_STRIP) Algorithm glEnd(); Suffix 2i: number and type of arguments (GL_LINE_LOOP) Questions 30  Computer Graphics Chapter Five 2 ⚫ 2D/3D Transformation ⚫ Rotations, Translations, Scaling ⚫ Homogeneous Coordinates  3 Transformations ⚫ Transformation means changing some graphics into something else. Transformations Defining ⚫ To reposition the graphics on the screen Transformations in and change their size or orientation. OpenGL  4 2D Transformation Transformations ⚫ 2x2 matrices 2D Transformations a be f  aebg af bh Defining     c dg h cedg cf dh Transformations in OpenGL For example: 3 1 1 2 3112 3210 1 6    2 1 2 0 2112 2210 4 4  5 2D Transformation… ⚫ Matrix multiplication is not commutative Transformations  For two matrices A and B, AB≠BA. 2D Transformations ⚫ Matrix multiplication is associative.  For three matrices A, B and C, then (AB)C = A(BC).  6 2D Translation Shifts all points by the same amount. Transformations Two translation parameters: the x-translation tx and the y-translation ty must be defined. 2D Transformations To translate a point P to P’ we add on a vector T:  px    px   px   tx  2-D Translation P   p   t        P    T    py  x x py  ty    , py   y , p t  y ,    2-D Rotation The relationship between points before and after the translation is: 2-D Scaling px  p x  tx and py  py t y  7 2D Rotation Rotates all points about a centre of rotation. Transformations The rotation transformation has a single parameter: o The angle of rotation, θ. 2D Transformations To rotate a point P anti-clockwise by θo, we apply the rotation matrix R: 2-D Translation R  cosθ  sinθ   px  cosθ sinθ  px     sinθ cosθ  p  y   sinθ cosθ  py  2-D Rotation The relationship between points before and after the rotation is: 2-D Scaling px  px cosθ  py sinθ and Defining Transformations in py  p y cosθ  p y sinθ OpenGL  8 2D Scaling Transformations Multiplies each coordinate of each point by a scale factor. 2D Transformations o Uniform scaling o Differential scaling 2-D Translation To scale a point P by scale factors Sx and Sy we apply the scaling matrix S: 2-D Rotation Sx 0  px Sx 0 px 2-D Scaling S    0 Sy py   0 Sy py  pxSxpx and py  Sypy  13 3D Transformations Transformations  Introduce a fourth coordinate in addition 2D Transformations to the x, y and z-coordinates. 3D Transformations Defining Transformations in OpenGL  14 3D Homogeneous Translation Transformations  Defined by three translation parameters: tx, ty and tz. 2D Transformations  Given by: 1 0 0 t   px  1 0 0 t  px          T  0 1 0 ty   py   0 1 0 ty  py  0 0 1 tz   p  0 0 1 tz  pz  3D Transformations    z    0 0 1    0 0 1  1   0  1  0 3D Homogeneous Translation Therefore: 3D Homogeneous px px tx pypy ty and pz  pz tz Scaling Defining Transformations in OpenGL  16 3D Homogeneous Scaling Transformations Are defined by three scaling parameters, Sx, Sy and Sz. 2D Transformations Sx 0 0 0    0 S 0 0 S   y 0 0 Sz 0    0 0 0 1 3D Transformations  p   S 0 0 0  p x   x  x   3D Homogeneous  py    0 Sy 0 0  p y  Translation  p   0 0 Sz 0  p z   z     1  0 0 0 1  1  3D Homogeneous Therefore: px Sxpx py Sy py and pz Szpz Scaling Defining Transformations in OpenGL  17 Defining Transformations in OpenGL When concatenating a sequence of matrices, a Transformations graphics package may pre multiply or post multiply. Defining o A is premultiplied by B: B A Transformations in o A is postmultiplied by B: A B OpenGL E.g. we specify the sequence A, B, C: o Using premultiplying, the composite matrix is C (B A) o Using postmultiplying, the composite matrix is (A B) C Almost all transformations in OpenGL uses post Multiply OpenGL always uses a right-handed coordinate system  18 Defining Transformations in OpenGL… OpenGL functions for defining transformations: Transformations o glTranslate*(tx,ty,tz): o E.g. glTranslated(320.0, 260.0, 0.0); Defining Transformations in o Suffix can be d or f OpenGL o glRotate*(θ,vx,vy,vz): o1st argument: rotation angle in degree o2nd/3rd/4t arguments are a vector that h defines the axis of rotation o E.g. glRotated(45.0, 0.0, 0.0, 1.0); o glScale*(Sx,Sy,Sz): o E.g. glScalef(2.0, -3.0, 1.0)  19 Defining Transformations in OpenGL… o glLoadMatrix*(elements16): Transformations o Argument is a one-dimensional array of 16 matrix coefficients Defining o 4x4 matrix for homogeneous coordinates Transformations in o Column-major order (i.e. coefficients of OpenGL first column, then coefficients of second column, etc.) oglMultMatrix*(elements16): oSame as glLoadMatrix*, except it multiplies the specified matrix by the current matrix oglLoadIdentity(elements16): oUsed to set the current matrix to the identity matrix  20 Defining Transformations in OpenGL… OpenGL has an associated matrix stack. Transformations To remember previous transformations. There are two functions for manipulating the stack: Defining o glPushMatrix: Transformations in o Copy the current matrix to the next position OpenGL down in the stack o glPopMatrix: o Destroy the current matrix, and move all other matrices on the stack up one position. o Example: glLoadIdentity(); glTranslated(2.0, 2.0, 0.0); glRotated(90.0, 0.0, 0.0, 1.0); glTranslated(-2.0, -2.0, 0.0); Any Question? 21  Chapter six State Management and Drawing Geometric Objects  1. Basic State management  OpenGL maintains many states and state variables.  An object may be rendered with lighting, texturing, hidden surface removal, fog, and other states affecting its appearance. By default, most of these states are initially inactive.  To turn many of these states on and off, use these two simple commands: 1. Void glEnable(GLenum cap ); glEnable() turns on a capability. 2. Void glDisable(GLenum cap); glDisable() turns it off. Displaying Points Lines and Polygons  All geometric primitives are eventually described in terms of their vertices coordinates that define the points themselves, the endpoints of line segments, or the corners of polygons. 1. Points  A point is represented by a set of floating−point numbers called a vertex.  All internal calculations are done as if vertices are three−dimensional.  Vertices specified by the user as two−dimensional (that is, with only x and y coordinates) are assigned a z coordinate equal to zero by OpenGL. 2. Lines  Lines in OpenGL, the term line refers to a line segment, not the mathematician’s version that extends to infinity in both directions.  There are easy ways to specify a connected series of line segments, or even a closed, connected series of segments.  The lines constituting the connected series are specified in terms of the vertices at their endpoints. 3. Polygons  Polygons are the areas enclosed by single closed loops of line segments,  where the line segments are specified by the vertices at their endpoints. Polygons are typically drawn with the pixels in the interior filled in, but you can also draw them as outlines or a set of points.  First, the edges of OpenGL polygons can’t intersect (a mathematician would call a polygon satisfying this condition a simple polygon).  Second, OpenGL polygons must be convex, meaning that they cannot have indentations.  Chapter Seven Representing 3D Objects  3D Representations provide the foundations for the Computer Graphics, Computer-Aided Geometric Design, and Visualization. They are languages for describing geometry:-  Semantics  Values  operations  Syntax  data structures and algorithms  1.Modeling Using Polygons  A 3D Model can also be displayed as a two-dimensional image through a process called 3D rendering or used in a computer simulation of physical phenomena. Types of 3D Modeling 1. Solid Model o Solid models deliver a 3D digital representation of an object with all the proper geometry. “solid” refers to the model as a whole instead of only the surface. CAD programs use different procedures to build a solid model. Some add solid objects over another combination and placement to produce complex figures. Solid objects can be modified, subtracted, added, combined, transformed, and manipulated in all sorts of manners during the process without losing solidity. There are four key elements of a solid model:- 1. Complete: various points within the modeling environment classified as inside or outside. The purpose is to provide accurate division between the object’s surface and all else beneath it. 2. Valid: edges, faces, and vertices must be connected in proper configuration to deliver a clear view of the 3D object. 3. Unambiguous: design clarity and certainty. A solid model must be realistic in the sense that the digital object represents its true shape in reality. 4. Solid: the object needs to have true-to-life topological and geometric data including shape, size, weight, and connectivity of edges.  2.Wireframe Modeling  Wireframe modeling allows for a smoother transition between curved edges in intricate objects.  All surfaces along with the opposite sides and internal components normally hidden from view appear as visible lines with wireframe modeling.  It is the quickest way for representing 3D images.  Advantages  The ability to create more complex curves and surfaces than solid models  In the final model, the only visible lines are the intersection of surfaces, not every single vertex  The model contains enough information to transform it into solid model Disadvantages o The volume of the object is not defined o You cannot remove lines otherwise hidden from view in the real world and o It’s difficult to interpret if the line is insect to each other  3. Surface Modeling The primary purpose of a surface model is to showcase an object in 3D, the way it is supposed to be visible in the real world. Surface modeling is the most advanced of the three types of 3D modeling techniques. It is easier to achieve than solid, although more complex than wireframe.  Chapter Eight Color and Images  Color is used to differentiate elements in the diagrams so that the comparative information is read and understood rapidly and accurately. Color visualization techniques increase the amount of information that can be integrated into the visual message or picture.  An image is a picture that has been created or copied and stored in electronic form.  An image can be described in terms of vector graphics or raster graphics. o Vector graphics are images created using mathematical equations, points, lines, and shapes to describe an image. o Raster graphics are digital images that represent a two- dimensional picture as a grid of pixels. An image stored in raster form is sometimes called a bitmap.  a raster is a type of image that is made up of a grid of tiny squares, or pixels, that are each assigned a color.  Digital photos and detailed graphics both come in raster form.  Popular types of raster files include JPEG, PNG, and GIF images.  A bitmap is an array of bits that specify the color of each pixel in a rectangular array of pixels.  A Graphics Interchange Format (GIF) is an example of a graphics image file that has a bitmap  Images containing three color channels, represented in a certain way, for example RGB Red, Green, Blue.  RGB (RED, GREEN, and BLUE) refers to a system for representing the colors to be used on a computer display. Raster Image Files vs Vector Image Files  Raster Image Files  Raster images are constructed by a series of pixels, or individual blocks, to form an image.  JPEG, GIF, and PNG are all raster image extensions.  Every photo you find online or in print is a raster image.  Pixels have a defined proportion based on their resolution (high or low), and,  When the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images.  In order to retain pixel quality, you cannot resize raster images without compromising their resolution.  Vector Image Files  Vector images are far more flexible.  They are constructed using proportional formulas rather than pixels.  Encapsulated PostScript (EPS), and PDF are perfect for creating graphics that require frequent resizing.  Image Formats and Their Applications:  There are numerous image file types out there so it can be hard to know which file type best suits your image needs.  Some image types such a Tagged Image File Format (TIFF) are great for printing while others, like JPG or PNG, are best for web graphics.  GIF stands for Graphics Interchange Format:- in social media, GIFs are small animations and video footage.  Graphics Interchange Format files are widely used for web graphics, because they are limited to only 256 colors,  GIF files are typically small in size and are very portable.  Cont…  They also support basic animation, which means they're a popular file format for memes on social media sites  Compression: Lossless - compression without loss of quality  Best For: Web Images and logos  Cont…,  JPEG or JPG stands for Joint Photographic Experts Group, with so-called “lossy” compression.  A “lossy” format meaning that the image is compressed to make a smaller file.  The compression does create a loss in quality but this loss is generally not noticeable.  JPEG files are very common on the Internet and JPEG is a popular format for digital cameras making it ideal for web use and non-professional prints.  Compression :- Lossy - some file information is compressed or lost  Best For: Web Images, Non-Professional Printing, E-Mail, Powerpoint Programs that open JPG files  File Viewer Plus :- Get it from Microsoft.  Microsoft Photos:- Included with OS.  Microsoft Windows Photo Viewer:- Included with OS.  Microsoft OneDrive.  Microsoft Paint:- Included with OS.  Adobe Photoshop.  PNG stands for Portable Network Graphics, with so-called “lossless” compression.  Which means that the image quality was the same before and after the compression.  It is a type of raster image file.  It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds.  TIFF or Tagged Image File Format are lossless images files.  meaning that they do not need to compress or lose any image quality or information, allowing for very high-quality images but also larger file sizes.  Compression:- Lossless- no compression, Very high-quality images.  Best For: High quality prints, professional publications, archival copies  BMP or Bitmap Image File is a format developed by Microsoft for Windows.  There is no compression or information loss with BMP files which allow images to have very high quality, but also very large file sizes.  Due to BMP being a proprietary format, it is generally recommended to use TIFF files.  Research and Analysis Wing (RAW) images are images that are unprocessed that have been created by a camera or scanner.  Many digital single-lens reflex (SLR) cameras can shoot in RAW, whether it be a.raw,.cr2, or.nef.  These RAW images are the equivalent of a digital negative, meaning that they hold a lot of image information, but still need to be processed in an editor such as Adobe Photoshop or Lightroom. Best For: Photography