1. Drawing in OpenGL CSC 2141 Introduction to Computer Graphics

2. GLUT  Basic elements of how to create a window  OpenGL is intentionally designed to be independent of any specific windowing system: window operations are not provided  A separate library, GLUT is created to provide functionality common to all windowing systems  Open a window  Get input from mouse and keyboard  Menus  Event-driven  GLUT links with the specific window system  GLX for X window systems  WGL for Windows  AGL for Macintosh

3. MyFirstOpenGLProgram.cpp Components of a typical main function:  glutInit():  must be called before others  General initialization of GLUT and OpenGL  Pass the command line arguments to it

4.  glutInitDisplayMode():  Initializations related to the frame buffer  OpenGL maintains an enhance version of frame buffer with additional information  Arguments: Logical-OR of following possible options  Color: tell the system how colors will be represented  GLUT_RGB: 24-bit color  GLUT_RGBA: fourth component indicates opaqueness (1=fully opaque, 0 = fully transparent)  Enabling the Depth buffer (we will need later in 3D for hidden surface removal, do not display objects not visible to viewer)  GLUT_DEPTH  Single or double buffering  GLUT_DOUBLE  GLUT_SINGLE

5. Single Buffering  Recall: whatever is written to frame buffer is immediately transferred to display  Repeated 50-85 times a second (refresh rate)  What if the contents of the frame buffer is changed (e.g. animation)  Typically  First erase the old contents by setting all pixels to some background color  Draw the new contents  Not fast enough: noticeable flicker  Change could happen during refreshing (parts of the object could appear later!!)

6. Double Buffering  System maintains two buffers  The front buffer is the one that is being displayed  Drawing is done to the back buffer  To update the image system swaps the two buffers  Swapping is fast (no flicker)  Twice the buffer space needed

7.  glutInitWindowSize(int width, int height)  specifies desired width and height in pixels  glutInitWindowPosition(int x, int y):  Specifies the upper-left corner of the graphics window  x and y are given relative to the upper-left corner of the display: (0,0)  glutCreateWindow(char *title):  Specifies the title and creates the window (0,0) (x,y)

8. Event-driven Programming and Callbacks  All interactive graphics programs are event-driven  Program must be prepared at any time for input from a number of sources: mouse, keyboard, etc  In OpenGL, this is done through callbacks  Program instructs the system to invoke a particular function whenever an event of interest occurs: a key is hit  That is, the graphics program registers various events: involves telling the window system which event type you are interested in and passing it the name of the function you have written to handle that event

9. Types of callbacks  User input events: keyboard hit, mouse click, motion of a mouse (without clicking), also called passive motion.  Note that, your program is only signaled about events that happen to your window.  System events:  Display event: invoked when the system senses that the contents of the window need to be redisplayed, either because  The graphics window has completed its initial creation  An obscuring window has moved away  The program explicitly requests redrawing by calling glutPostRedisplay()

10. System events cont’d  Reshape event:  When window size is changed  Callback provides information on the new size of the window  For a newly created window as well, first a reshape event then a display event is generated.  Timer event:  There may not be any user input, but it might be necessary to update the image, e.g. plane keeps moving forward in a flight simulator  Request a timer event: your program goes to sleep for some period and it is awakened by an event sometime later to draw the next image.  Idle event:  generated every time system has nothing else to do. Too many events.

11. Callback registration functions Event typeCallback registrationUser callback function prototype Mouse buttonglutMouseFuncmyMouse(int b, int s, int x, int y) Mouse motionglutPassiveMotionFuncmyMotion(int x, int y) KeyboardglutKeyboardFuncmyKeyboard(unsigned char c, int x, int y) DisplayglutDisplayFuncmyDisplay() Reshape window glutreshapeFuncmyReshape(int w, int h) TimerglutTimerFuncmyTimer(int id) IdleglutIdleFuncmyIdle()

12. glutTimerFunc  arguments  Number of milliseconds to wait (unsigned int)  Name of user’s callback function  An integer identifier to be passed to the callback function (in case of multiple timers, to know which one is generating the event) e.g. glutTimerFunc(20, myTimeOut, 0)

13. Information associated with each event  Information provided to user’s callback function by the event  Reshape event passes new window width and height  Mouse click passes  Which button was hit: b  GLUT_LEFT_BUTTON, GLUT_RIGHT_BUTTON, GLUT_MIDDLE_BUTTON  Button’s new state: s  GLUT_DOWN, GLUT_UP  x and y coordinates of the mouse when it was clicked (in pixels)  Keyboard hit passes  The character hit  Current coordinates of the mouse  Timer event passes the integer id specified in registration

14. glutPostRedisplay()  Reshape callback and timer callback both invoke glutPostRedisplay()  inform OpenGL that the state of the scene has changed and request redrawing by calling user’s display function.  If need be other callbacks can request redrawing as well.

15. glutMainLoop()  After registering the callback functions, enter main event loop by calling glutMainLoop()  OpenGL will start handling events now.

16. What to draw?  Geometric primitives  Points  Line Segments  Polygons  OpenGL has a small set of primitives  GLU contains a richer set of objects derived from the basic OpenGL library

17. OpenGL State  OpenGL is a state machine  OpenGL functions are of two types  Primitive generating  How vertices are processed and appearance of primitive are controlled by the state  State changing  Transformation functions  Attribute functions

18. Lack of Object Orientation  OpenGL is not object oriented so that there are multiple functions for a given logical function  glVertex3f  glVertex2i  glVertex3dv  Underlying storage mode is the same

19. Simplest geometric object in space: vertex glVertex3f(x,y,z) belongs to GL library function name x,y,z are floats glVertex3fv(p) p is a pointer to an array dimensions

20. glVertex*  *: nt or ntv  n: 2,3,4 (number of parameters)  t: i,f,d (int, float or double parameters)  v: variables are specified through a pointer to an array  GLfloat vertex[3]; glVertex3fv(vertex);  GLfloat, GLint instead of float, int

21. Group vertices to define other primitives  OpenGL is based on drawing objects with straight sides, so it suffices to specify vertices of the object glBegin( ) glVertex*(..); : glVertex*(..); glEnd();  Calculations can appear within glBegin() and glEnd()

22. Object type  The value of type specifies how OpenGL interprets vertices  Points: GL_POINTS  Line segments: GL_LINES  Polylines: GL_LINE_STRIP, GL_LINE_LOOP

23. Polylines  Finite sequence of line segments joined end to end  closed: ends where it starts  simple: it does not self intersect  Curves can be approximated by breaking them into large number of small polylines closed simple

24. More primitives: Polygon  GL_POLYGON  border described as a line loop  Has an interior: filled object  Variety of ways to display:  Only edges  Fill with solid color or fill pattern (without edges)  To fill with edges, polygon has to be drawn twice  Fill is default

25. Polygon Issues  OpenGL will only display polygons correctly that are  Simple: edges cannot cross  Convex: All points on line segment between two points in a polygon are also in the polygon (all interior angles < 180)  Flat: all vertices are in the same plane  User program can check if above true  OpenGL will produce output if these conditions are violated but it may not be what is desired  Triangles satisfy all conditions  3 points define a plane nonsimple polygon nonconvex polygon

26. Convex, noncovex You must subdivide nonconvex polygons into convex pieces and draw each convex piece separately for correctness. Other convex shapes : spheres, tetrahedra, cube, parallelepipeds, etc.

27. Polygon types  GL_QUADS: successive 4 vertices are treated as quadrilaterals  GL_TRIANGLES: successive 3 vertices are treated as triangles

28. Polygon types  Triangles and quads sharing vertices  GL_TRIANGLE_STRIP: each additional vertex is combined with previous two vertices to define a triangle  GL_QUAD_STRIP  GL_TRIANGLE_FAN

29. Simplest polygon  glRectf(x_ll, y_ll, x_ur, y_ur)  Lower left and upper right corners specified  Draws a filled rectangle  Always on z=0 plane (2D)  OpenGL does not distinguish 2D and 3D representations, everything is represented in 3D internally  (x,y) (x,y,0)

30. Text and Curved Objects: LATER  Curved objects: we can use mathematical definitions and create our own approximations OR use GLU functions

31. Attributes  Attributes are part of the OpenGL state and determine the appearance of objects  Color (points, lines, polygons)  Size and width (points, lines)  Stipple pattern (lines, polygons)  Polygon mode  Display as filled: solid color or stipple pattern  Display edges  Display vertices  Once set the attribute applies to all subsequently defined objects, until set to some other value

32. RGB color  Each color component is stored separately in the frame buffer  Usually 8 bits per component in buffer glColor3f(): 3 float parameters glColor3d(): 3 double parameters glColor3ui(): 3 unsigned int glColor3dv(): color stored in array parameter  Note in glColor3f the color values range from 0.0 (none) to 1.0 (all), whereas in glColor3ui the values range from 0 to 255  glColor3f(1.0, 0.0, 0.0): pure red

33. Other major colors  Cyan: green and blue fully on  Magenta: red and blue fully on  Yellow: red and green fully on  White: red, green and blue fully on  If R,G, B components are equal: shades of gray  Additive color: we think of color as being formed from three primary color (Red, Blue, Green) that are mixed to form desired color

34. RGBA System  The fourth components (A) is called alpha channel  Indicates opaqueness of color  1: fully opaque  0: fully transparent  Now, we use glColor4d(..) and 4-argument forms for all the other types  Useful for creating transparent effects  Recall:  Opaque object passes no light through  Fully transparent object: passes all light through

35. Recall: Indexed Color  Colors are indices into tables of RGB values  Requires less memory  indices usually 8 bits  not as important now  Memory inexpensive  Need more colors for shading  glIndexi(int element)  select a color from color lookup table  glutSetColor(int color, GLfloat r, GLfloat g, GLfloat b):  set entries in a color table  In OpenGL we will mostly use RGB color

36. Color and State  The color as set by glColor becomes part of the state and will be used until changed  Colors and other attributes are not part of the object but are assigned when the object is rendered  We can create conceptual vertex colors by code such as glColor glVertex glColor glVertex

37. Smooth Color  Default is smooth shading  OpenGL interpolates vertex colors across visible polygons  Alternative is flat shading  Color of first vertex determines fill color  glShadeModel(GL_SMOOTH) or GL_FLAT

38. Some other attributes  glPointSize(2.0): points are drawn 2 pixels wide  glLineWidth(..)  glLineStipple(..): create dashed or dotted lines

39. Drawing in OpenGL: Viewing and Viewports CSC 2141 Introduction to Computer Graphics

40. Let’s look at myDisplay() function  Display callback function, where the drawing is done.  Clear window  Do our drawing  SWAP buffers so that what we have drawn becomes visible (double buffering) glutSwapBuffers();  glFlush(): forces OpenGL to render as soon as possible. Avoids any delay.

41. myDisplay() void myDisplay(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0); // set color to red glBegin(GL_POLYGON); // list the vertices to draw a diamond glVertex2f(0.90, 0.50); glVertex2f(0.50, 0.90); glVertex2f(0.10, 0.50); glVertex2f(0.50, 0.10); glEnd(); glColor3f(0.0, 0.0, 1.0); // set color to blue glRectf(0.25, 0.25, 0.75, 0.75); // draw a rectangle glFlush();// force OpenGL to render glutSwapBuffers();// swap buffers }

42. Clearing the window  glClear(…): clears the window by overwriting it with the background color  How to set the background color?  glClearColor(GLfloat Red, GLfloat Green, GLfloat Blue, GLfloat Alpha)  E.g. to set it to blue, and opaque: glClearColor(0.0,0.0,1.0,1.0);  Where to set the background color ?  it is independent of drawing  Typically set in your initialization functions, not in display callback function

43. glClear(…) cont’d  Involves clearing frame buffer  Frame buffer might store different types of information  Color, depth  glClear() allows user to select what to clear  Logical OR of options can be given glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

44. Where are we drawing?  Next we have to specify the geometry of the objects we want to draw.  But, how do we specify the coordinates? Relative to what?  To understand this, it would be helpful to learn about orthographic viewing in general, because 2D viewing is a special case of 3D orthographic viewing

45. Viewing  Orthographic Viewing (Projection)  simplest, default  Camera (of synthetic-camera model) infinitely far from objects  Leave image plane fixed and move camera far from the plane  All projectors become parallel in the limit  Center of projection is replaced by a direction of projection

46. Orthographic Viewing cont’d  Suppose that  Projectors parallel to z-axis  Projection plane at z= 0  Projectors perpendicular (orthogonal) to projection plane  We can slide the projection plane along z- axis without changing where the projectors intersect this plane

47. Default OpenGL Camera  OpenGL places a camera on the projection plane at the origin pointing in the negative z direction  Sees only objects in the viewing volume  The default viewing volume is a box centered at the origin with a side of length 2  We can change the viewing volume by specifying left, right, bottom, top, near, far

48. Orthographic Viewing z=0 In the default orthographic view, points are projected forward along the z axis onto the plane z=0 Orthographic projection takes (x,y,z) and projects to (x,y,0)

49. 2D viewing is a special case of 3D orthographic viewing  We could consider 2D viewing directly by taking a rectangular area of our 2D world.  In 2D, all vertices are on z=0, so, point and projection are the same  All we need is to specify a viewing (clipping) rectangle (on z=0 )  Any drawing outside this region is clipped away.

50. 2D viewing is a special case of 3D orthographic viewing  It is a good idea to think of this in terms of drawing on a rectangular idealized drawing window  We will specify coordinates relative to this window  We will then inform OpenGL of our idealized drawing window and OpenGL will scale the image drawn in our idealized drawing window to fit within the actual graphics window (the viewport in fact)  Why are we doing this?? Because we do not have complete control on actual graphics window size.  We do not want to explicitly scale all of our coordinates when the user resizes the window

51. Back to drawing…  Assume my idealized drawing window : [0,1] X [0,1]  Unit square, whose lower left corner is at (0,0)  Note: As opposed to GLUT, OpenGL uses the convention that coordinates are floating point values and the origin is at the lower left corner. 0 0 0.5 1 1

52. myDisplay() void myDisplay(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0); // set color to red glBegin(GL_POLYGON); // list the vertices to draw a diamond glVertex2f(0.90, 0.50); glVertex2f(0.50, 0.90); glVertex2f(0.10, 0.50); glVertex2f(0.50, 0.10); glEnd(); glColor3f(0.0, 0.0, 1.0); // set color to blue glRectf(0.25, 0.25, 0.75, 0.75); // draw a rectangle glFlush();// force OpenGL to render glutSwapBuffers();// swap buffers }

53. Viewports  OpenGL does not force mapping your graphics (idealized drawing window) to the entire graphics window  Provides subwindows  The subwindow into which current graphics are being drawn is called a viewport  Typically, we set the viewport as the entire window (default), but it may generally be any rectangular subregion  What happens if the window is resized?  We usually prefer to readjust the viewport  Where should we do this? In the reshape callback function!

54. myReshape void myReshape(int winWidth, int winHeight) { windowHeight = winHeight; windowWidth = winWidth; ……. glViewport (0, 0, winWidth, winHeight); //reset viewport ……. }  What happens if we do not reset it? TRY!

55. glViewport  General form glViewport(Glint x, Glint y, GLsizei w, GLsizei h)  (x, y) are pixel coordinates of the lower-left corner of the viewport as defined relative to the lower-left corner of the graphics window  w and h are the width and height of the viewport in pixels

56. Aspect ratio and viewports  We might choose to adjust the width and height of the viewport to match the aspect ratio of the idealized drawing window to prevent distortion of objects.  Aspect ratio of a rectangle : ratio of width to height

57. Viewport is a part of state  If we change the viewport between rendering objects, we achieve the effect of multiple viewports with different images on different parts of the window

58. Projection transformation  We need to inform OpenGL of our idealized drawing window, so that it can map it to our viewport.  This mapping is performed by a transformation called the projection matrix  Maintained internally by OpenGL  Part of the state that remains in effect until changed  OpenGL provides functions to set this matrix. For our 2D example, we simply inform OpenGL of the rectangular region that we called idealized drawing window gluOrtho2D(left, right, bottom, top)

59. Typical code to set projection matrix in 2D glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 1.0, 0.0, 1.0); glMatrixMode(GL_MODELVIEW); // good idea to always switch back to default matrix mode to // keep track of the current matrix

60. Projection transformation cont’d  OpenGL maintains three different types of transformations (we will see later)  And, there is only one set of transformation functions so we must set the matrix mode first telling OpenGL that we will be modifying the projection matrix. glMatrixMode (GL_PROJECTION)  Transformation functions are incremental so we start by initializing he current matrix to identity matrix and alter it with a projection transformation. glLoadIdentity(); glOrtho2D(0.0 1.0, 0.0, 1.0);

61. Where does this code fragment go?  If you do the drawing in the same idealized window all the time, you can place this in your initialization function  If your program needs to change the drawing area depending on window size, place it in reshape callback function to alter the projection every time the window size is changed.

62. Summary of viewports and projection  Viewport is a rectangle within the actual graphics window  Projection defined by gluOrtho2D() simply defines a rectangle (we call it idealized drawing window or clipping rectangle) which you will use to specify the coordinates of your objects  It is OpenGL’s job to map your ideal drawing window to the actual viewport

63. (x, y) w h viewport Actual graphics window Idealized drawing window top bottom left right gluOrtho2D glViewport draw